Echarts for React 柱状图:根据数值大小自定义单个柱子渐变颜色

今天接到一个需求,要根据数值大小,区分柱状图柱子的颜色,没办法,需求为上。

Echarts_bar_color.png Echarts for React 柱状图:根据数值大小自定义单个柱子渐变颜色 经验总结

项目使用的是 Echarts 的柱状图(type: bar),在处理数据的时候判断一下,如果数值小于零,就给它增加一个控制颜色的属性,我这是一个渐变的柱子:

let yData: number[] = [];
yAxisDatas.forEach((item: number) => {
  if (item < 0) {
    yData.push({
      value: item,
      itemStyle: {
        color: {
          colorStops: [
            {
              offset: 0,
              color: '#00FFD5', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#00CCCC', // 100% 处的颜色
            },
          ],
        },
      },
    });
  } else {
    yData.push(item);
  }
});

如果不是渐变的话,就不需要 colorStops 属性了,可以参考一下官方给的示例的配置部分:

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        120,
        {
          value: 200,
          itemStyle: {
            color: '#a90000'
          }
        },
        150,
        80,
        70,
        110,
        130
      ],
      type: 'bar'
    }
  ]
};


未经允许不得转载:Web前端开发资源网 » Echarts for React 柱状图:根据数值大小自定义单个柱子渐变颜色

推荐阅读:

CSS3中元素背景的 gradient 渐变属性

jQuery实现本地input选择图片实时显示

【笔记】微信小程序注册、发布流程及首页自动跳转

JetBrains IDE Support 浏览器自动刷新插件(不定时更新)

ColorZilla Chrome浏览器网页取色插件(不定时更新)

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)