[js][ECharts] 데이터 명이 같아도 다른 데이터이면 다른색으로 표시 (파이차트)

ECharts 파이 차트에서 이름(label)이 같은 경우 같은 색상으로 표시되는 이유는,

ECharts가 내부적으로 name 값을 기준으로 색상을 매핑하기 때문입니다.

즉, data: [{name: 'A', value: 100}, {name: 'A', value: 200}] 처럼 name이 동일하면 같은 색상을 자동으로 지정합니다.

 

✅ 해결 방법: name을 고유하게 바꾸고, label에서는 다시 원래 이름으로 보이게 설정

const rawData = [
  { name: 'A', value: 100 },
  { name: 'A', value: 200 }
];

// 실제 표시할 이름은 label에서 처리하고,
// 내부 name은 유일하게 만들어줍니다.
const dataList = rawData.map((item, index) => ({
  name: `${item.name}_${index}`,  // 고유 name 부여
  realName: item.name,            // 실제 보여줄 이름
  value: item.value
}));

option = {
  series: [
    {
      type: 'pie',
      data: dataList,
      color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#d8b5ff'],
      label: {
        show: true,
        position: 'inside',
        fontSize: 13,
        formatter: function (data) {
          const originalName = data.data.realName;
          return `${originalName}\n${Common.numberWithCommas(data.value)}\n(${data.percent.toFixed(1)}%)`;
        }
      },
      right: '20%',
      radius: ['0%', '95%']
    }
  ]
};