echarts实现多柱颜色不一样的渐变效果

最新推荐文章于 2024-06-02 21:27:33 发布

程序媛董董

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量216

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_48240390/article/details/132403522

版权

思路

改变series的color属性，创建颜色数组，循环数组实现渐变效果

代码实现

let than = this;

// 仅series
series: [{
     name: "",
     type: "bar",
     barWidth: "30",
     data: [883,567,103],
     itemStyle: {
       normal: {
         color: function(params) {
           // 创建颜色数组
           var colorList = [
             ["rgba(24, 172, 255, 1)", "rgba(25, 66, 112, 1)"],
             ["rgba(55, 255, 243, 1)", "rgba(32, 81, 108, 1)"],
             ["rgba(255, 216, 116, 1)", "rgba(80, 62, 17, 1)"]
           ];
           let index = params.dataIndex;
           // 柱子个数超过colorList设置的个数，循环使用
           if (index >= colorList.length) {
             index = index - colorList.length;
           }
           return new than.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: colorList[index][0] },
             { offset: 1, color: colorList[index][1] }
           ]);
         },
         label: {
           show: true,
           position: "top",
           formatter: "{c}万元",
           textStyle: {
             color: "rgba(255,255,255,1)", //字体颜色
             fontSize: 14 //字体大小
           }
         }
       }
     }
   }
 ]