is it possible to have 2 items with same name in Echarts Pie legend?

Question

The problem is: I have devices which can have same name, this caused a problem when they become same color in Echarts pie. I tried to avoid this by changing name to id, because they can't have same id. So the problem with colors was solved. But now, i need to display this items in legend of pie chart. I push the item name to legend data array, it shows that it has 2 items. But legend displays only one, because they have same name. Any ways to fix it? I want legend to be like 'Device' 'Device', but it shows 'Device' only once.

private setChartOption(devicesForChart: DeviceForChart[], unit: string): void {
    devicesForChart = devicesForChart.sort((a, b) => compare(a, b, 'name'));
    this.legend = [];
    this.chartOption = {
      tooltip: {
        trigger: 'item',
      },
      color: COLOR_PALETTE,
      legend: {
        data: this.legend,
        show: true,
        bottom: '1%',
        type: 'scroll',
        padding: 0
      },
      series: this.getSeriesData(devicesForChart, unit)
    };
}


private getSeriesData(data: DeviceForChart[], unit: string): any[] {
    const consumerData = data.filter(device => device.measure_type === MeasureTypes.CONSUMER);
    const producerData = data.filter(device => device.measure_type === MeasureTypes.PRODUCER);
    const series = data.map((device, i) => {
      const consumerDevice = device.measure_type === MeasureTypes.CONSUMER;

      const seriesData = consumerDevice ? consumerData : producerData;

      return {
        type: 'pie',
        radius: consumerDevice ? ['45%', '60%'] : [0, '30%'],
        labelLine: consumerDevice ? { length: 5 } : { show: false },
        label: consumerDevice ? {
                  formatter: (d: any) => {
                    return `${d.data.id}`;
                  }
                  ,
                  rich: {
                    b: {
                      color: '#4C5058',
                      fontSize: 14,
                      fontWeight: 'bold',
                      lineHeight: 33
                    },
                  },
                } : {
                      position: 'inside',
                      fontSize: 8,
                      formatter: '{d}%'
                    },
        tooltip: consumerDevice ? {
          formatter: (d: any) => {
            return `Verbraucher: <br>${d.data.id}: <b>${d.value}${unit}</b>`;
          }
        } : {
          formatter: (d: any) => {
            return `Solar: <br>${d.data.id}: <b>${d.value}${unit}</b>`;
          }
        },
        name: device.id,
        data: seriesData

        };
    });
    return series;
  }

Devices looks like this

{
  value: 123,
  name: '123qweasdzxc',
  id: Device,
  measure_type: CONSUMER
},
{
  value: 456,
  name: '124zxcasd',
  id: Device,
  measure_type: CONSUMER
}

For example, if my legend array looks like this

['Device', 'Device', 'Device2']

My legend looks like this

Device, Device2

Answer 1

change your series id to 'Device1', 'Device2'.