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%" 是调整双柱状图之间的间隔的 有人说不生效 ,那应该你的柱状图不是双的
![](https://images2018.cnblogs.com/blog/1283076/201803/1283076-20180328180449256-1521002774.png)
类似于这种
"axisTick": {
show: true
},
"axisLine":{
show:true
}
这两个属性是控制x轴或y轴的刻度以及线条是否显示
"legend": {
'left':'2%',}调整小图标的位置
![](https://images2018.cnblogs.com/blog/1283076/201803/1283076-20180328180703864-54372767.png)