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

Answer 2

pieChart.dispatchAction({type:'highlight',seriesIndex: 0,dataIndex: 0});

// PieChart Highlight the Large Value
pieChart.on('mouseover',function(e){
pieChart.dispatchAction({type:'downplay',seriesIndex: 0,dataIndex:0});
if(e.dataIndex != index){
pieChart.dispatchAction({type:'downplay', seriesIndex: 0, dataIndex: index });
}
if(e.dataIndex == 0){
pieChart.dispatchAction({type:'highlight',seriesIndex: 0,dataIndex:e.dataIndex});
}
});
//When the mouse leaves, set the current item as selected
pieChart.on('mouseout',function(e){
index = e.dataIndex;
pieChart.dispatchAction({type:'highlight',seriesIndex: 0,dataIndex: e.dataIndex});
});

如何在ECharts中的甜甜圈图中心显示文本？

2 个答案: