使用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'}
        ]
    });
},