在项目开发中用到echarts有这样的需求,点击点击柱子改变颜色并且回调柱子的信息,看官网方法很简单,就是官网的例子
myChart.on(‘click’, function (params) {
//params 就是点击柱子的返回信息
});
那么如何改变柱子的颜色呢?请在 如何给ECharts柱状图设置一个高亮色 文中阅读,讲的是如何设置高亮色,其实实现方法是一样的,只不过这里只是添加了点击事件而已,实现方法如下:
var curInt = null;
option = {
…
series:[{
…
data:[…],
itemStyle:{
color: function(params){
var key = params.dataIndex;
if(key === curInt){
return ‘#E062AE’
}else{
return ‘#37A2DA’
}
}
},
…
}],
…
};
myChart.on(‘click’, function (params) {
curInt = params.dataIndex;
myChart.setOption(option)
});
See the Pen Echarts给柱子设置不同颜色点击变色 by w3cbest.com (@w3cbest) on CodePen.
我用的是4.0.0版本,测试了一下4.2版本以上有bug,无法重新绘制颜色