如何在Angular Echarts中按条件修改X轴标签颜色

你可以通过ECharts提供的axisLabel.textStyle回调函数来实现X轴标签的条件变色，具体修改如下：

1. 找到Stack图表组件中配置ECharts option的代码块，定位到xAxis配置项
2. 修改axisLabel的textStyle为一个函数，根据标签内容返回对应样式：

xAxis: {
  type: 'category',
  data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  axisLabel: {
    // 用回调函数动态设置标签样式
    textStyle: (labelText: string) => {
      // 匹配需要变色的标签
      const targetLabels = ['Wednesday', 'Friday'];
      if (targetLabels.includes(labelText)) {
        return {
          color: '#e63946', // 替换为你需要的指定颜色
          // 可选：添加其他样式，比如加粗
          fontWeight: 'bold'
        };
      }
      // 其余标签保持原有默认样式
      return {};
    }
  }
}

方案说明 #

• ECharts的axisLabel.textStyle支持接收回调函数，参数为当前的标签文本内容
• 函数返回的样式对象会覆盖默认样式，未匹配到的标签返回空对象即可继承原有样式
• 如果你的X轴数据是动态获取的（比如从接口返回），只需要调整targetLabels的匹配逻辑即可适配

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