ECharts能否绘制按走势方向变色的折线？用line还是markLine实现？

这个效果完全可以通过line类型原生实现，不需要使用markLine或者其他额外组件。

具体实现逻辑非常简单：

• 先预处理你的数据集，计算每两个相邻数据点之间的走势：后一个值大于前一个值判定为向上走势，反之判定为向下走势
• 利用ECharts series-line 自带的分段样式配置能力，给不同走势的线段分别配置颜色即可

核心配置示例参考：

const rawData = [120, 200, 170, 230, 180, 280];
// 计算每一段的走势，和线段索引一一对应
const segmentTrend = rawData.slice(1).map((current, index) => current > rawData[index] ? 'up' : 'down');

option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'line',
    data: rawData,
    lineStyle: {
      width: 3
    },
    // 核心分段颜色配置
    lineStyle: {
      color: function (params) {
        const segIdx = params.dataIndex - 1;
        if (segIdx < 0) return '#00b42a'; // 首段无前置数据默认用绿色
        return segmentTrend[segIdx] === 'up' ? '#00b42a' : '#f53f3f';
      }
    }
  }]
};

markLine本身是用于绘制辅助标记线（比如阈值线、平均线、极值标注线等）的组件，不适合用来绘制主折线，不需要额外引入增加实现复杂度。

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