使用echart繪制圖表

1.柱狀圖

drawOperation() {

// 基於准備好的dom，初始化echarts實例
let operation = this.$echarts.init(document.getElementById('operation'));
// 繪制圖表
operation.setOption({
    // tooltip: {},
    xAxis: {
        type: 'category',
        data: ["事故處理", "智能移車", "信號燈優化", "擁堵上報", "受理投訴", "我要舉報", "我的預約", "事故快處"]
        axisLabel: {   //設置字體顏色
            interval: 0,
            textStyle: {
                color: '#97b0c6',
                fontSize: 7,
            },
        },
        axisLine: {   //設置坐標軸顏色
            lineStyle: {
                color: '#1c4595',//左邊線的顏色

            }
        },
        splitLine: {show: false}  //去除x軸的網格線
    },
    grid: {
        left: '3%',
        right: '1%',
        containLabel: true
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            textStyle: {
                color: '#97b0c6',
                fontSize: 7,
            },
        },
        axisLine: {   //設置坐標軸顏色
            lineStyle: {
                color: '#1c4595',//左邊線的顏色
            }
        },
        splitLine: {show: false}, //去除Y軸的網格線
    },
    series: [{
        type: 'bar',
        data: ["382247", "139351", "13358", "14780", "34343", "787966", "598", "10"]
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(   //設置柱狀的漸變
                    0, 0, 0, 1,
                    [
                        {offset: 0.5, color: '#04b3fe'},
                        {offset: 1, color: '#055df0'}
                    ]
                )
            },
        }
    }]
});
}

2.多個柱狀圖的合集

drawOptimize() {
    let optimize = this.$echarts.init(document.getElementById('optimize'));
    optimize.setOption({
        color: ['#10c9c6', '#3ca8f0', '#e67177'],
        legend: {
            type: 'plain',    //顯示類型
            orient: 'horizontal',   //縱向顯示 horizontal水平顯示
            left: 'right',     //左右位置
            top: 'top',    //上下位置
            itemHeight: 7,      //圖例的高度
            itemWidth: 8,       //圖例的寬度
            itemGap: 6,        //行間距
            textStyle: {//圖例文字的樣式
                color: '#97b0c6',
                fontSize: 7
            },
        },
        dataset: {
            source:
　　　　　　　　　　　　[
　　　　　　　　　　　　　　["星期", "擁堵上報", "信號燈優化", "投訴建議"],
　　　　　　　　　　　　　　["周四", "10", "20", "30"],
　　　　　　　　　　　　　　["周三", "10", "20", "30"],
　　　　　　　　　　　　　　["周二", "10", "20", "30"],
　　　　　　　　　　　　　　["周一", "10", "20", "30"],
　　　　　　　　　　　　　　["周日", "10", "20", "30"],
　　　　　　　　　　　　　　["周六", "10", "20", "30"],
　　　　　　　　　　　　　　["周五", "10", "20", "30"],
　　　　　　　　　　　　],
　　　　　},

 xAxis: {
 type: 'category',
 axisLabel: { //設置字體顏色
 interval: 0,
 textStyle: {
 color: '#97b0c6',
 fontSize: 7,
 },
 },
 axisLine: { //設置坐標軸顏色
 lineStyle: {
 color: '#1c4595',//左邊線的顏色
 }
 },
 splitLine: {show: false} //去除x軸的網格線
 },
 yAxis: {
 type: 'value',
 axisLabel: { //設置字體顏色
 interval: 0,
 textStyle: {
 color: '#97b0c6',
 fontSize: 7,
 },
 },
 axisLine: { //設置坐標軸顏色
 lineStyle: {
 color: '#1c4595',//左邊線的顏色
 }
 },
 splitLine: {show: false} //去除y軸的網格線
 },
 series: [
 {
 type: 'bar'
 },
 {type: 'bar'},
 {type: 'bar'}
 ]
 });
},