How to show text in centre of doughnut chart in ECharts?

user_12034088 0
Viewed 5719

I want to display the sum of all data values in the centre of doughnut chart without using x and y-axis. For doughnut chart, I used this as reference https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut

As shown in below code, chartvalueData and nameoflabels both are coming dynamically.

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']
            }
          ]
};
echarts angular
3 Answers

Use the formatter option to show custom values in the chart and position: center to center align the label: 

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

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

user_56763530

If you only want the static text in the center, use title for the chart instead of label for the series.

options = {
    title: {
       text: `${sum}`,
       left: 'center',
       top: 'center',
    },
    series: [...]
}
user_17789880
Related