ECharts多系列折线图映射配置教程

本文深入解析了ECharts多系列折线图中实现“每条线独立颜色映射”的核心技巧——突破单个visualMap无法精准绑定系列的限制，通过声明多个visualMap实例并为每个指定唯一的seriesIndex，让不同折线能依据自身数据范围（而非全局统一阈值）进行分段着色，真正实现同坐标下多维度语义色彩的解耦表达，既解决了开发者高频踩坑的配置误区，又赋予图表更强的业务解释力与视觉表现力。

本文详解如何在 ECharts 中为多个折线系列（series）分别配置独立的 visualMap，解决 seriesIndex 在单个 visualMap.pieces 中失效的问题，通过声明多个 visualMap 实例实现每条线按自身数据范围动态着色。

本文详解如何在 ECharts 中为多个折线系列（series）分别配置独立的 `visualMap`，解决 `seriesIndex` 在单个 `visualMap.pieces` 中失效的问题，通过声明多个 `visualMap` 实例实现每条线按自身数据范围动态着色。

在使用 ECharts 绘制多系列折线图时，若希望每个系列根据其自身数据值区间独立应用颜色映射（如阈值分段着色），直接在单个 visualMap 的 pieces 中设置 seriesIndex 是无效的——这是开发者常遇到的典型误区。根本原因在于：visualMap.pieces.seriesIndex 并非用于“将某段规则绑定到某系列”，而是用于限定该 visualMap 实例仅作用于指定 series；而 visualMap 本身是全局视觉组件，其 pieces 规则仍会对所选系列的全部数据点统一计算，无法实现“同坐标不同色”的精细控制。

正确方案是：为每个需独立着色的 series 声明一个专属的 visualMap 实例，并精确设置 seriesIndex 指向对应 series 索引。ECharts 支持 visualMap 配置为数组形式，每个对象可独立控制位置、类型、分段逻辑及目标系列。

以下是一个完整可运行的示例，包含两条折线（索引 0 和 1），各自拥有完全独立的颜色分段规则：

const data = [
  ["2000-06-05", 116], ["2000-06-06", -129], ["2000-06-07", 135],
  // ...（其余数据保持不变，见原始代码）
];
const dateList = data.map(item => item[0]);
const valueList = data.map(item => item[1]);

option = {
  // ✅ 关键：visualMap 为数组，每个元素绑定一个 series
  visualMap: [
    // visualMap 实例 1：专用于 series[0]
    {
      type: 'piecewise',
      top: 50,
      right: 10,
      seriesIndex: 0, // ← 仅影响第一个 series
      pieces: [
        { min: 200, color: 'orange', label: 'High (≥200)' },
        { max: 200, min: 150, color: 'brown', label: 'Medium (150–200)' },
        { max: -50, color: 'yellow', label: 'Low (≤-50)' }
      ],
      outOfRange: { color: 'cyan' }
    },
    // visualMap 实例 2：专用于 series[1]
    {
      type: 'piecewise',
      top: 50,
      right: 10,
      seriesIndex: 1, // ← 仅影响第二个 series
      pieces: [
        { min: 200, color: 'red', label: 'Critical (≥200)' },
        { max: 200, min: 150, color: 'green', label: 'Normal (150–200)' },
        { max: -50, color: 'orange', label: 'Alert (≤-50)' }
      ],
      outOfRange: { color: 'blue' }
    }
  ],

  title: [
    { left: 'center', text: 'Gradient along the y axis' },
    { top: '55%', left: 'center', text: 'Gradient along the x axis' }
  ],
  tooltip: { trigger: 'axis' },
  xAxis: [
    { data: dateList },
    { data: dateList, gridIndex: 1 }
  ],
  yAxis: [
    {},
    { gridIndex: 1 }
  ],
  grid: [
    { bottom: '60%' },
    { top: '60%' }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList // series[0]
    },
    {
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1 // series[1]，位于下网格
    }
  ]
};

? 关键要点说明：

• visualMap 必须是数组，不可为单个对象；
• 每个 visualMap 对象中的 seriesIndex 是数字（非数组），直接指定目标 series 的索引（如 0 或 1）；
• 各 visualMap 可自由设置 top/right 等定位属性，但建议保持一致以避免图例重叠（本例中均设为 top: 50, right: 10）；
• pieces 中的 min/max 值始终相对于其所绑定 series 的数据值域进行判断，互不干扰；
• 若需隐藏某 series 的视觉映射图例，可设置 show: false（但通常保留更利于用户理解）。

⚠️ 注意事项：

• 不支持在 series[i].itemStyle.color 中混合 visualMap 与静态色——二者逻辑冲突，应全程依赖 visualMap 控制；
• 当 series 数据含 null/undefined 时，对应点将被跳过，不参与 visualMap 计算；
• 若需连续型渐变（而非分段色），请改用 type: 'continuous'，同样支持 seriesIndex 单独绑定；
• 多 visualMap 实例会生成多个图例控件，请通过 formatter 或 CSS 调整样式以保障 UI 清晰度。

通过这种“一系一图例”的设计模式，你不仅能精准控制每条折线的颜色语义，还能为业务场景提供更强的数据解释力——例如：主指标用红/绿表示健康度，辅助指标用蓝/紫表示波动强度，真正实现多维信息的可视化解耦。

好了，本文到此结束，带大家了解了《ECharts多系列折线图映射配置教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！