vueEcharts柱状图点击事件
drawBar(){
let that = this;
let chart = this.$echarts.ElementById('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 : untryName,
axisLine:{show:false},
axisTick:{show:false},
//max:5
}
],
yAxis : [
{
type : 'value',
show:false
}
],
series : [
{
type:'bar',
barWidth: '30%',
untryValue,
itemStyle: {
//通常情况下：
normal:{
            //每个柱⼦的颜⾊即为colorList数组⾥的每⼀项，如果柱⼦数⽬多于colorList的长度，则柱⼦颜⾊循环使⽤该数组                                    color: function (params){
var colorList = lorList;
return colorList[params.dataIndex];
}
},
},
label:{
normal:{
show:true,
position:'top',
textStyle:{
color:function (params){
var colorList = lorList;
return colorList[params.dataIndex];
},
//fontSize:9
}
}
},
barCategoryGap:"65%"
}
]
};
chart.setOption(barOption);
<('click', function (params) {
})
chart.setOption(barOption);
that.circleId = params.dataIndex+1;
setoptionlet lis = that.$ElementsByTagName("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"
})
},
echarts柱状图的点击事件，之前在⽹上了很久，在echarts的官⽹查了API，本⼈属于阅读有障碍的⼈，真的不愿意看⽂档，就⾃⼰瞎琢磨试验，很好使，之后再vue的项⽬中就照这个套路使，⼀直没有出错很成功，这个模板⽐较适合刚开始接触vue 以及在vue的项⽬中使⽤echarts的同学们
"barGap": "30%" 是调整双柱状图之间的间隔的有⼈说不⽣效，那应该你的柱状图不是双的
类似于这种
"axisTick": {
show: true
},
"axisLine":{
    show:true
  }
这两个属性是控制x轴或y轴的刻度以及线条是否显⽰
"legend": {
'left':'2%',}调整⼩图标的位置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。