Echarts饼图图例能否展示重名项？如何解决重名项仅显示一个的问题？

架构老林

2026-9-24

问题根因

Echarts 的图例默认以name字段作为唯一标识自动去重，因此直接传入重复的名称字符串会被合并，同时图例需要和系列扇区的name一一对应才能保证颜色同步、点击显隐等联动功能正常。

解决方案

你已经通过将扇区name替换为唯一ID解决了颜色冲突问题，只需要对图例配置做对应调整即可保留重名展示：

图例数据不再传入字符串数组，改为传入对象数组，用唯一ID作为内部标识name字段，实际要展示的设备名存为自定义的text字段
新增图例formatter配置，渲染时展示自定义的text字段而非内部标识name
保证系列扇区的name和图例的name（即唯一ID）一一对应，原有联动逻辑不受影响

代码修改示例

1. 修改图例赋值逻辑

在setChartOption方法中调整图例生成逻辑：

private setChartOption(devicesForChart: DeviceForChart[], unit: string): void {
    devicesForChart = devicesForChart.sort((a, b) => compare(a, b, 'name'));
    // 图例改为对象数组，name存唯一id，text存展示的设备名
    this.legend = devicesForChart.map(device => ({
      name: device.id,
      text: device.name
    }));
    this.chartOption = {
      tooltip: {
        trigger: 'item',
      },
      color: COLOR_PALETTE,
      legend: {
        data: this.legend,
        show: true,
        bottom: '1%',
        type: 'scroll',
        padding: 0,
        // 新增formatter，渲染时展示text字段
        formatter: (name: string) => {
          const legendItem = this.legend.find(item => item.name === name);
          return legendItem ? legendItem.text : name;
        }
      },
      series: this.getSeriesData(devicesForChart, unit)
    };
}