基于数据范围自定义Echarts柱状图图例的实现方案

要实现你需要的两个范围图例（蓝色对应0-70%，红色对应71-100%），可以通过以下修改完成：

修改后的完整代码 #

HTML部分 #

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js" integrity="sha512-OTbGFYPLe3jhy4bUwbB8nls0TFgz10kn0TLkmyA+l3FyivDs31zsXCjOis7YGDtE2Jsy0+fzW+3/OVoPVujPmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
  <div id="main" style="width: 100%; height: 400px"></div>
</body>
</html>

JavaScript部分 #

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  legend: {
    type: 'plain',
    data: [
      {
        name: '0-70%',
        icon: 'rect',
        itemStyle: {
          color: 'rgba(26, 179, 179, 1)'
        }
      },
      {
        name: '71-100%',
        icon: 'rect',
        itemStyle: {
          color: 'rgba(179, 26, 26, 1)'
        }
      }
    ],
    show: true
  },
  tooltip: {},
  xAxis: [{
    data: ['MON', 'TUE', 'WED', 'THU'],
    gridIndex: 0
  }],
  yAxis: [{
    gridIndex: 0,
    max: 100,
    splitNumber: 2
  }],
  grid: [{
    height: 200,
    width: 400
  }],
  series: [
    {
      name: 'days',
      type: 'bar',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: [
        {
          value: 90,
          itemStyle: {
            color: getColor(90)
          }
        },
        {
          value: 22,
          itemStyle: {
            color: getColor(22)
          }
        },
        {
          value: 56,
          itemStyle: {
            color: getColor(56)
          }
        },
        {
          value: 76,
          itemStyle: {
            color: getColor(76)
          }
        }
      ]
    }
  ]
};

function getColor(value) {
  if (value > 70) return 'rgba(179, 26, 26, 1)';
  else return 'rgba(26, 179, 179, 1)';
}

option && myChart.setOption(option);

关键修改点说明 #

• 图例配置调整：
  • 移除原全局formatter，在legend.data中直接定义两个独立图例项
  • 每个图例项指定显示文本、矩形图标和对应颜色，直观展示范围与色彩的对应关系
• 数据颜色修正：
  • 修正原代码中第一个数据的getColor参数错误，确保传入当前数据的实际数值
  • 所有数据项均通过itemStyle.color调用getColor，保证柱子颜色严格匹配数值区间

内容的提问来源于stack exchange，提问作者user3062224