设置echarts柱状图柱体不同颜色

最新推荐文章于 2024-06-29 10:01:23 发布

L_WalkingPig

最新推荐文章于 2024-06-29 10:01:23 发布

阅读量1k

点赞数

分类专栏： echarts Vue

本文链接：https://blog.csdn.net/l_walkingpig/article/details/108334818

版权

Vue 同时被 2 个专栏收录

27 篇文章 4 订阅

订阅专栏

echarts

5 篇文章 0 订阅

订阅专栏

我的是在js中递归循环柱状图的配置数据（即option={}）后设置的每个柱体颜色（设置颜色模块写法是类似的）。

找到series:[]下的itemStyle:{}下的normal.color

if(h === 'itemStyle'){
    var barColorData = [];
    //params=每个柱体  须一次性设置所有柱体的颜色
    seriesData[h].normal.color = function(params) {
         //color为颜色数据数组
         var colorList = color;
         //不循环使用color颜色数组数据
         return colorList[params.dataIndex];
         // 循环使用color颜色数组数据
         // return colorList[params.dataIndex%colorList.length];
     }
}

如上图代码，color为颜色数据数组，如果长度和柱体数量一致则，return colorList[params.dataIndex];

如果不一致，且想循环使用当前color颜色数据数组，则，return colorList[params.dataIndex%colorList.length];

参考文档：https://blog.csdn.net/weixin_43798882/article/details/89848153

个人纪录，仅供参考~ : D