如何在ngx-echart折线图中为负值部分设置红色连线？

ngx-echarts是ECharts的Angular封装，完全支持ECharts原生配置，你可以通过折线样式的回调函数实现需求，不存在功能不支持的情况。

实现步骤 #

1. 在折线图的series配置中，为lineStyle.color设置回调函数，通过判断线段两端的数据点值，决定是否将线段设为红色。
2. 结合你已有的负值数据点样式，完整配置示例如下：

// ngx-echarts的option配置
public chartOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, -20, 150, -30, 200],
      type: 'line',
      // 已实现的负值数据点样式
      itemStyle: {
        color: (params) => params.value < 0 ? '#ff4d4f' : '#5470c6'
      },
      // 核心：设置连线颜色的回调逻辑
      lineStyle: {
        width: 2,
        color: (params) => {
          // 获取线段起点和终点的数值
          const startVal = params.data[1];
          const endVal = params.nextData[1];
          // 只要其中一个点为负值，线段设为红色
          return startVal < 0 || endVal < 0 ? '#ff4d4f' : '#5470c6';
        }
      }
    }
  ]
};

关键说明 #

• 回调函数的params参数包含当前线段的data（起点数据）和nextData（终点数据），可根据需求调整判断条件（比如仅当两点均为负值时才变红）。
• 所有ECharts原生配置项都可直接在ngx-echarts中使用，无需额外适配。

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