echarts 柱形图 一组数据使用不同的颜色

如果柱形图是2个维度也就是说一个代表日期一个代表温度 那么在 series 中shi 2个对象很容修改成不同个颜色,例如日期绿色,温度红色,但如果只是温度,并根据温度的不同显示不同格颜色这种情况可以使用color的函数返回

series : [
            {
                name: 温度,
                type: bar,
                itemStyle: {
                    normal: {
              //好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了,
                        color: function(params) {
                            // build a color map as your need.
                            // 在这里面写好函数 根据条件返回对应的颜色就可以
                            var colorList = [
                              #C1232B,#B5C334,#FCCE10,#E87C25,#27727B,
                               #FE8463,#9BCA63,#FAD860,#F3A43B,#60C0DD,
                               #D7504B,#C6E579,#F4E001,#F0805A,#26C0C0
                            ];
                            return colorList[params.dataIndex]
                        },
              //以下为是否显示,显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: top,
                            formatter: {b}
{c}
                        }
                    }
                },
          //设置柱的宽度,要是数据太少,柱子太宽不美观~
          barWidth:70,
                data: [28,15,9,4,7,8,23,11,17]
            }
        ]

备注补充:

针对echarts3柱状图的答案:在series里配置如下itemStyle,即可实现值大于0时为红色,小于0时为绿色

itemStyle: {
    normal: {
        color: function(params) {
          var index_color = params.value;
          if(index_color>=0){
               return #fe4365;
          } else {
               return #25daba;
          }
        }
    }
}
经验分享 程序员 微信小程序 职场和发展