¿Es posible tener 2 elementos con el mismo nombre en la leyenda de Echarts Pie?

18 Jun, 2023 Programación 0

El problema es el siguiente: tengo dispositivos que pueden tener el mismo nombre, lo que provoca un problema cuando se convierten en el mismo color en el gráfico circular de Echarts. Traté de solucionarlo cambiando el nombre por “id”, porque no pueden tener la misma “id”. Así que el problema con los colores se solucionó. Pero ahora, necesito mostrar estos elementos en la leyenda del gráfico circular. Agrego el nombre del elemento al arreglo de datos de la leyenda, lo que muestra que hay 2 elementos. Pero la leyenda muestra solo uno, porque tienen el mismo nombre. ¿Hay alguna manera de solucionarlo? Quiero que la leyenda sea como “Dispositivo” “Dispositivo”, pero muestra “Dispositivo” solo una vez.

“`
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.measuretype === MeasureTypes.CONSUMER);
const producerData = data.filter(device => device.measuretype === 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: ${d.data.id}: ${d.value}${unit};
}
} : {
formatter: (d: any) => {
return Solar: ${d.data.id}: ${d.value}${unit};
}
},
name: device.id,
data: seriesData

};

});
return series;
}

{
value: 123,
name: ‘123qweasdzxc’,
id: Device,
measuretype: CONSUMER
},
{
value: 456,
name: ‘124zxcasd’,
id: Device,
measuretype: CONSUMER
}

Por ejemplo, si mi arreglo de leyenda se ve así:
[‘Dispositivo’, ‘Dispositivo’, ‘Dispositivo2’]

Mi leyenda se ve así:
Dispositivo, Dispositivo2

davy.ai

June 18, 2023 at 2:01 pm

Una posible solución es agregar un identificador único al nombre de cada dispositivo en la leyenda. Puede modificar el método getSeriesData para agregar un objeto con el nombre y el id del dispositivo al arreglo legend, así:

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);

    // Inicializa un mapa vacío para llevar el registro de los dispositivos agregados
    const addedDevices = {};

    const series = data.map((device, i) => {
      const consumerDevice = device.measure_type === MeasureTypes.CONSUMER;

      const seriesData = consumerDevice ? consumerData : producerData;

      // Verifica si este dispositivo ya ha sido agregado a la leyenda
      let name = device.name;
      if (addedDevices[device.id]) {
        // Si es así, agrega un identificador único al nombre
        name += ` (${device.id})`;
      } else {
        // De lo contrario, agrega el dispositivo a la leyenda
        this.legend.push({ name: device.name, id: device.id });
        addedDevices[device.id] = true;
      }

      return {
        type: 'pie',
        radius: consumerDevice ? ['45%', '60%'] : [0, '30%'],
        // ...
        name: name, // Usa el nombre del dispositivo con el identificador único
        data: seriesData
      };
    });

    return series;
  }

Este código agrega un objeto con el nombre y el id del dispositivo al arreglo legend solo si el id aún no ha sido agregado. Luego, verifica si el id del dispositivo actual ya ha sido agregado y, de ser así, agrega un identificador único al nombre del dispositivo antes de usarlo en el gráfico.

Con esta solución, el arreglo legend se vería algo así:

[
  { name: '123qweasdz', id: 'Device' }, 
  { name: '124zxcasd (Device)', id: 'Device' },
  { name: 'Device2', id: 'Device2' }
]

Y la leyenda que se muestra en el gráfico se vería así:

123qweasdz
124zxcasd (Device)
Device2

es.davy.ai

¿Tienes una pregunta?

¿Es posible tener 2 elementos con el mismo nombre en la leyenda de Echarts Pie?

Answer

davy.ai