vue Echarts 柱狀圖點擊事件

drawBar(){
                let that = this;
                let chart = this.$echarts.init(document.getElementById('bar-graph'));
                let barOption = {
                    color: ['#29B4FC'],
                    tooltip : {
                        trigger: 'axis',
                        // formatter: function(params) {
                        //     return params[0].value + '篇-' + params[0].name +'年'
                        // }
                    },
                    grid: {
                        top:'20%',
                        left: '1%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : that.countryName,
                            axisLine:{show:false},
                            axisTick:{show:false},
                            //max:5
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            show:false
                        }
                    ],
                    series : [
                        {
                            type:'bar',
                            barWidth: '30%',
                            data:that.countryValue,
                            itemStyle: {   
                                //通常情況下：
                                normal:{  
                    　　　　　　　　　　　　//每個柱子的顏色即為colorList數組里的每一項，如果柱子數目多於colorList的長度，則柱子顏色循環使用該數組
                                    color: function (params){
                                        var colorList = that.colorList;
                                        return colorList[params.dataIndex];
                                    }
                                },
                                
                            },
                            label:{
                                normal:{
                                    show:true,
                                    position:'top',
                                    textStyle:{
                                        color:function (params){
                                            var colorList = that.colorList;
                                            return colorList[params.dataIndex];
                                        },
                                        //fontSize:9
                                    }                                    
                                }
                            },
                            barCategoryGap:"65%"
                        }
                    ]
                };
                chart.setOption(barOption);
                chart.on('click', function (params) {
                    that.colorList.forEach((i,v)=>{
                        that.colorList[v] = "#29b4fc"
                    })
                    that.colorList[params.dataIndex] = "#00C99A"//點擊時改變當前柱子的顏色
                    chart.setOption(barOption);
                    that.circleId = params.dataIndex+1;
                    let lis = that.$refs.green.getElementsByTagName("li");
                    let li = Array.from(lis);
                    li.forEach((li)=>{
                        li.style.cssText = "border-bottom:none"
                    })
                    li[params.dataIndex].style.cssText = "border-bottom:2px solid #00C99A"
                    that.getCircleData();
            })
            },

echarts柱狀圖的點擊事件，之前在網上找了很久，在echarts的官網查了API，本人屬於閱讀有障礙的人，真的不願意看文檔，就自己瞎琢磨試驗，很好使，之后再vue的項目中就照這個套路使，一直沒有出錯 很成功，這個模板比較適合剛開始接觸vue 以及在vue的項目中使用echarts的同學們 

"barGap": "30%" 是調整雙柱狀圖之間的間隔的 有人說不生效 ，那應該你的柱狀圖不是雙的

 

類似於這種

"axisTick": {

show: true

},

"axisLine":{

　　　　show:true

　　 }

這兩個屬性是控制x軸或y軸的刻度以及線條是否顯示

"legend": {

'left':'2%',}調整小圖標的位置