記一次vue中使用echart柱狀圖

 let myChart = this.$echarts.init(document.getElementById('myChart'));
            let option = {
                color: ['#FFCD86'],//柱子顏色
                backgroundColor: ['#fff'],//背景色
                title: {
                    text: ''
                },
                tooltip: {},
                legend: {
                    data: ['總訂單量'],
                },
                xAxis: [{
                    type: 'category',
                    data: ['10.1-10.7', '10.7-10.14', '10.14-10.21', '10.21-10.28', '10.28-11.5', '11.5-11.12', '11.12-11.19', '11.19-11.26'],
                    axisLabel: {
                        interval: 0,//橫軸信息全部顯示  
                        // rotate: -5,//-15度角傾斜顯示  
                    },
                }],
                yAxis: {
                },
                series: [{
                    name: '總訂單量',
                    type: 'bar',
                    data: [50, 120, 180, 80, 200, 110, 130, 50],
                    barWidth: 30,//柱圖寬度
                }]
            };
            myChart.setOption(option);// 使用剛指定的配置項和數據顯示圖表。
            //點擊圖例默認是把柱狀圖隱藏了，此段代碼就是爲了點擊圖例展示柱狀圖
            myChart.on('legendselectchanged', function (params) {
                let option = this.getOption();
                let select_key = Object.keys(params.selected);
                if (!params.selected[params.name]) {
                    select_key.map(res => {
                        option.legend[0].selected[res] = !params.selected[res];
                    });
                } else {
                    select_key.map(res => {
                        option.legend[0].selected[res] = false;
                    });
                    option.legend[0].selected[params.name] = true;
                }
                this.setOption(option);
            });