Echarts visualMap配置问题：仅着色数据点而非折线

原因 #

ECharts的visualMap组件默认对line系列仅作用于数据标记（symbol），而非折线本身。这是因为折线是连续线段，组件默认未实现基于相邻数据点值的渐变/分段着色逻辑，仅会将视觉映射规则应用到离散的数据点上。

解决方法 #

方法1：用lineStyle.color配合视觉映射回调 #

通过visualMap的配置规则，结合lineStyle.color的回调函数，根据数据值动态计算线段颜色，适合简单分段或渐变衔接场景：

option = {
  // 其他基础配置
  series: [{
    type: 'line',
    data: yourData,
    lineStyle: {
      color: function(params) {
        // 获取visualMap的颜色映射规则
        const visualMap = myChart.getOption().visualMap[0];
        const value = params.value[1]; // 假设y轴数值为映射依据
        const colorList = visualMap.inRange.color;
        const ratio = (value - visualMap.min) / (visualMap.max - visualMap.min);
        const colorIndex = Math.floor(ratio * (colorList.length - 1));
        return colorList[colorIndex];
      }
    }
  }],
  visualMap: {
    min: 0,
    max: 100,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    }
    // 其他visualMap配置
  }
};

方法2：拆分折线为多个分段系列 #

将原折线拆分为多个小型line系列，每个系列对应一组相邻数据点，再根据数据值为每个分段分配对应颜色，实现严格的分段着色：

const rawData = [[0, 20], [1, 50], [2, 30], [3, 80]];
const series = [];
const visualMapConfig = { min: 0, max: 100, color: ['#50a3ba', '#eac736', '#d94e5d'] };

// 生成分段折线系列
for (let i = 0; i < rawData.length - 1; i++) {
  const start = rawData[i];
  const end = rawData[i+1];
  const avgValue = (start[1] + end[1]) / 2; // 取两点平均值作为颜色依据
  const colorIndex = Math.floor((avgValue - visualMapConfig.min) / (visualMapConfig.max - visualMapConfig.min) * (visualMapConfig.color.length - 1));
  
  series.push({
    type: 'line',
    data: [start, end],
    lineStyle: { color: visualMapConfig.color[colorIndex], width: 2 },
    symbol: 'none' // 隐藏分段的冗余数据点
  });
}

// 添加仅显示数据点的原系列
series.push({
  type: 'line',
  data: rawData,
  lineStyle: { color: 'none' }, // 隐藏原折线
  symbol: 'circle',
  symbolSize: 6
});

option = {
  series: series,
  visualMap: visualMapConfig
};

方法3：使用自定义系列（custom series） #

通过renderItem函数完全自定义折线绘制逻辑，自由度最高，但需要手动处理Canvas绘制细节，适合复杂的自定义着色需求。

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