angular - 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,
    },
  ],
};