vue中echarts之常规柱状统计图



首先定义好图标的宽高

<div id="indexc4" class="echarts2"></div>

这里是css样式
.echarts2 {
    height: 350px;
    width: 100%;
    /*border-radius: 25px;*/
}

编辑图表的相关属性

option2: {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        },
        formatter: function (params) {
            var tar = params[0];
            var tar1 = params[1];
            return tar.name + '<br/>' + tar.seriesName + ' : ' + (tar.value).toFixed(2)+ "万元" + '<br/>' + tar1.seriesName + ' : ' + tar1.value + "笔";
        }
    },
    legend: {
        data: ['放款订单金额', '放款订单笔数']
    },
    color: ['#1685ff', '#efc11a'],
    xAxis: [
        {
            type: 'category',
            data: this.timeList,
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '金额(万元)',
            // min: 0,
            // max: 5000,
            // interval: 1000,
            axisLabel: {
                formatter: function (params) {
                    return params;
                }
            }
        },
        {
            type: 'value',
            name: '笔数',
            // min: 0,
            // max: 2500,
            // interval: 500,
            axisLabel: {
                formatter: function (params) {
                    return params;
                }
            }
        }
    ],
    series: [
        {
            name: '放款订单金额',
            type: 'bar',
            barMaxWidth: 80,   //最大柱宽度
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//给柱子设置渐变色
                        offset: 0,
                        color: '#2D93FF'
                    }, {
                        offset: 1,
                        color: '#14D0FF'
                    }]),
                    // barBorderRadius: 12,//
                },
            },
            data: this.signList
        },

        {
            name: '放款订单笔数',
            type: 'bar',
            barMaxWidth: 80,   //最大柱宽度
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//柱子设置渐变色
                        offset: 0,
                        color: '#F57423'/
                    }, {
                        offset: 1,
                        color: '#F5A623'
                    }]),
                    // barBorderRadius: 12,
                },
            },
            data: this.countList
        }
    ]
},

在钩子函数中调用

var myChart3 = echarts.init(document.getElementById('indexc4'));

myChart3.setOption(this.option2);

注意:在拿到数据之后要给option2中相关的的data赋值然后重新调用钩子函数中的代码

this.option2.xAxis[0].data = respond.data.data.timeList
this.option2.series[0].data = this.signList
this.option2.series[1].data = respond.data.data.countList
var myChart3 = echarts.init(document.getElementById('indexc4'));
myChart3.setOption(this.option2);

横向柱形统计图

饼图

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章