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);

《橫向柱形統計圖》

《餅圖》