How to place the text inside donut chart (echarts)

user_12450159 0
Viewed 1946

I'm new one of echarts, I need to set the text in centre of donuts chart. I tried and google it no use, I tried it by html also but I cant able to achieve it. Please any one suggest me, How can I resolved it. Thanks in advance.

In options I add the total in title but I need to show that one into centre.

var myChart = echarts.init(document.getElementById('pieChart1'));

var idx = 1;
pieChartOption =  {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    title: {
        text: "Total "+10+"%",
        left: 'center'
    },
    series: [
        {
            name: 'Test one',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            label: {
                show: true,
                color: '#000',
                fontSize: '80',
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 10, name: 'Success', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#5E50A1'}}},
                {value: 20, name:'Failed', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FFB200'}}},
                {value: 30,name:'Onprocess', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FF434F'}}}
            ]
        }
    ]
} 
myChart.setOption(pieChartOption);
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Using ECharts</title>
</head>

<body>
  <!-- 为ECharts准备一个具备大小的Dom-->
  <div id="pieChart1" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
  
</body>
  <!--引入echarts. Using echarts-all.js for convenience -->
  <!-- CDN is taken from https://cdnjs.com/libraries/echarts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
</html>

echarts
2 Answers

As far as I understand, you do not plan to place labels in the center, only the total, right? In this case the most simple option it is a markPoint (see live example):

series: [{

  // ...

  markPoint: {
    tooltip: { show: false },
    label: {
      show: true,
      formatter: '{b}',
      color: 'black',
      fontSize: 20,
    },
    data: [{
      name: 'Total 10%',
      value: '-',
      symbol: 'circle',
      itemStyle: { color: 'transparent' },
      x: '50%',
      y: '50%',
    }],
  },

  // ...

}]

enter image description here

P.S. Library that you included in example is very strange (copyrights?, binary data?) and distort default behaviour. Please don't use them, take the any pack from the repo instead https://www.jsdelivr.com/package/npm/echarts?path=dist

user_15979640

You can use the graphic property, like this:

https://jsfiddle.net/motz75an/

  graphic: {
    elements: [{
      type: 'text',
      left: 'center',
      top: 'middle',
      z: 999,
      style: {
        text: `Total 10%`,
        textAlign: 'center',
        fontSize: 26,
      }
    }]
  },
user_55515930
Related