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}\n{c}'
                        }
                    }
                },
          //设置柱的宽度,要是数据太少,柱子太宽不美观~
          barWidth:70,
                data: [28,15,9,4,7,8,23,11,17]
            }
        ]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值