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

德顺

发布于 2021-12-03 08:19:23

8500

发布于 2021-12-03 08:19:23

文章被收录于专栏：前端资源前端资源

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

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'
    }
  ]
};

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

echarts