本文详解如何在 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），各自拥有完全独立的颜色分段规则：
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
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 清晰度。
通过这种“一系一图例”的设计模式，你不仅能精准控制每条折线的颜色语义，还能为业务场景提供更强的数据解释力——例如：主指标用红/绿表示健康度，辅助指标用蓝/紫表示波动强度，真正实现多维信息的可视化解耦。
