JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

JavaScript

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

    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%'],

// -------~~~~~~~~~~~~~~~~~~~~~~~~~~

        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%',
          }],
        },

// -------~~~~~~~~~~~~~~~~~~~~~~~~~~

        avoidLabelOverlap: true,
        label: {
          show: false,
          color: '#000',
          fontSize: '80',
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            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',
  ...