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'
      },
      
      graphic: {
        elements: [{
          type: 'text',
          left: 'center',
          top: 'middle',
          z: 999,
          style: {
            text: `Total 10%`,
            textAlign: 'center',
            fontSize: 26,
          }
        }]
      },
      
      series: [{
        name: 'Test one',
        type: 'pie',
        radius: ['50%', '70%'],

        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',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
           ...