警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>ECharts>ECharts柱状图点击柱子改变颜色并且回调柱子的位置

ECharts柱状图点击柱子改变颜色并且回调柱子的位置

原创2018-11-07ECharts/JavaScript7362 次阅读 · 读完需要 2 分钟。

在项目开发中用到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,无法重新绘制颜色

赞(6) 打赏
未经允许不得转载:W3Cbest前端开发>ECharts柱状图点击柱子改变颜色并且回调柱子的位置

相关推荐

发表评论