Как показать текст в центре кольцевой диаграммы в ECharts?

Question

Я хочу отобразить сумму всех значений данных в центре кольцевой диаграммы, не используя оси X и Y. Для кольцевой диаграммы я использовал это в качестве ссылки https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut

Как показано в приведенном ниже коде, chartvalueData и nameoflabels оба идут динамически.

this.chartData = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: nameoflabels,
            bottom: 20
          }
          series: [
            {
              name: 'Title',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  textStyle: {
                    fontWeight: 'bold'
                  }
                },
                emphasis: {
                  textStyle: {
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: chartvalueData,
              color: ['lightblue', 'orange','lightcoral','plum']
            }
          ]
};

Answer 1

Используйте параметр formatter для отображения пользовательских значений на диаграмме и position: center для выравнивания по центру метки:

const data = [
  { value: 335, name: 'A' },
  { value: 310, name: 'B' },
  { value: 234, name: 'C' },
  { value: 135, name: 'D' },
  { value: 1548, name: 'E' },
];

// find the sum of all data values
const sum = data.reduce((prev, current) => prev + current.value, 0);

option = {
  series: [
    {
      name: 'Series 1',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: true,
      label: {
        color: '#000',
        fontSize: '80',
        position: 'center',
        formatter: () => {
          return sum; // Use sum variable here
        },
      },
      labelLine: {
        show: false,
      },
      data: data,
    },
  ],
};