echarts pie chart, the total number is displayed in the middle

There are really too many echarts attributes, and the requirements are varied. Write down
the graphicattributes first.

const datas = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' },
  { value: 30, name: 'Video Ads1' },
  { value: 36, name: 'hhh Ads1' },
  { value: 100, name: 'llll Ads1' }
];
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;

option = {
  tooltip: {
    trigger: 'item'
  },

  legend: {
    orient: 'vertical',
    // left: 'right',
    top: '40%',
    right: '5%',
  
     textStyle: {
            align: 'left',
            verticalAlign: 'middle',
            rich: {
                name: {
                    color: 'rgba(0,0,0,0.5)',
                    fontSize: 12,
                },
                value: {
                    color: 'rgba(0,0,0,0.5)',
                    fontSize: 12,
                },
                rate: {
                    color: 'rgba(0,0,0,0.9)',
                    fontSize: 12,
                },
            },
        },
    formatter: (name) => {
        if (datas.length) {
                const item = datas.filter((item) => item.name === name)[0];
                return `{name|${name} | }{rate| ${item.value/ 100}%} {value| ${item.value}} `;
            }
     },
  },
  graphic: {
    type: 'text',
    left: 'center',
    top: 'center',
    style: {
      // text: '总数',
      text:
        '总数' +
        '\n\n' +
        datas.reduce((n, i) => {
          return (n += i.value);
        }, 0),

      textAlign: 'center',
      fill: '#333',
      width: 30,
      height: 30,
      fontSize: 14
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['30%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        // borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data:datas
    }
  ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);