Apache ECharts：能否用分段型VisualMap将多类别映射至旭日图多数据值？

原生的分段型（piecewise）VisualMap确实只支持单值与数据项的映射，无法直接通过values: [[CAT-1,CAT-3]]这种多值格式实现你要的多类别关联高亮。但可以通过数据预处理+VisualMap事件监听的方式达成需求，具体实现步骤如下：

1. 数据结构改造 #

给旭日图的每个数据项添加一个存储对应类别的字段（比如categories），用来标记该主题所属的CAT分组，示例数据结构：

const sunburstData = [
  {
    name: 'TH-A',
    value: 1, // 保留原有value字段（VisualMap需要依赖数值类型的字段触发）
    categories: ['CAT-1', 'CAT-2']
  },
  {
    name: 'TH-B',
    value: 1,
    categories: ['CAT-2', 'CAT-3']
  },
  {
    name: 'TH-C',
    value: 1,
    categories: ['CAT-1', 'CAT-3']
  },
  {
    name: 'TH-D',
    value: 1,
    categories: ['CAT-1', 'CAT-2']
  },
  {
    name: 'TH-E',
    value: 1,
    categories: ['CAT-3']
  }
];

2. 配置分段VisualMap #

将VisualMap的分段项设置为你需要的CAT类别，用数值代替类别名称（因为VisualMap的分段值需要是数值类型，后续通过名称映射）：

visualMap: {
  type: 'piecewise',
  pieces: [
    { value: 1, label: 'CAT-1' },
    { value: 2, label: 'CAT-2' },
    { value: 3, label: 'CAT-3' }
  ],
  selectedMode: 'multiple', // 开启多选
  outOfRange: {
    opacity: 0.3 // 默认置灰样式
  }
}

3. 监听VisualMap选中事件，自定义高亮逻辑 #

通过监听visualMapSelected事件，获取当前选中的CAT项，遍历旭日图所有节点，判断节点的categories是否包含选中的CAT，然后通过dispatchAction执行高亮/置灰操作：

myChart.on('visualMapSelected', function(params) {
  // 获取当前选中的CAT标签集合
  const selectedCats = [];
  Object.keys(params.selected).forEach(key => {
    if (params.selected[key]) {
      // 根据value映射回CAT名称
      const catLabel = params.pieces.find(p => p.value == key).label;
      selectedCats.push(catLabel);
    }
  });

  // 收集需要高亮的节点名称
  const highlightNames = sunburstData.filter(item => {
    return item.categories.some(cat => selectedCats.includes(cat));
  }).map(item => item.name);

  // 先重置所有节点样式
  myChart.dispatchAction({
    type: 'downplay',
    seriesName: '旭日图' // 替换成你的series名称
  });

  // 高亮符合条件的节点
  if (highlightNames.length > 0) {
    myChart.dispatchAction({
      type: 'highlight',
      seriesName: '旭日图',
      name: highlightNames
    });
  }
});

关键逻辑说明 #

• 选中单个CAT（比如CAT-1）时，自动筛选出所有包含该CAT的主题（TH-A、TH-C、TH-D）并高亮；
• 选中多个CAT（比如CAT-1+CAT-3）时，筛选出包含任一选中CAT的主题（TH-A、TH-B、TH-C、TH-E）并高亮；
• 未选中任何CAT时，所有节点保持置灰状态（可根据需求调整默认样式）。

这种方式完全适配你提出的所有需求场景，绕过了原生VisualMap单值映射的限制，实现了多类别关联的高亮效果。

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