echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）

cyndi_超努力

已于 2022-09-22 16:56:29 修改

阅读量958

点赞数

分类专栏：工作积累文章标签： echarts 前端 javascript

于 2022-09-08 09:31:56 首次发布

本文链接：https://blog.csdn.net/m0_66722601/article/details/126758182

版权

工作积累专栏收录该内容

39 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Echarts配置柱状图的渐变色。通过在series的itemStyle属性中设置normal模式下的color属性，可以实现线性渐变效果。示例代码展示了从正上到正下的红色到蓝色渐变，以及根据数据索引动态配置每个柱子不同颜色的渐变。通过调整offset和color值，可以自由定制柱子的渐变颜色方案。

摘要由CSDN通过智能技术生成

配置柱子的渐变色:需要在series中配置itemStyle属性

itemStyle: {
    normal: {
        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
        // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0, color: 'red'                   //指0%处的颜色
        }, {
            offset: 1, color: 'blue'                 //指100%处的颜色
        }], false)
    }
}

配置每个柱子不同颜色的渐变的代码 :需要在series中配置itemStyle属性

itemStyle: {
              normal: {
                  //柱体的颜色
                  //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                  color: function (params) {
                      console.log(params);
                      var colorList = [
                          ['#00FCFF', '#008297'],
                          ['#0091FF', '#005EA4'],
                          ['#901698', '#F157EE'],
                          ['#40FBCB', '#009871']
                      ];

                      var colorItem = colorList[params.dataIndex];
                      return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: colorItem[0]
                          },
                          {
                              offset: 1,
                              color: colorItem[1]
                          }
                      ], false);
                  }
              }
          },