vue3写的echarts示例：表示总数居中，图表位置。。。

function echartsTwo() {
  const data = [
          { value: 1048, name: '女生' },
          { value: 735, name: '男生' },
        ]
  let total = data.map(item => item.value).reduce((a, b) => a + b)
//以上把数据进行统一处理

  var myChart = echarts.init(document.getElementById('echartsTwo'));
  var option = {
    title: {
      text: [total,' 总人数'].join('\n\n'), // join('\n')作用是换行居中 total为计算的总数
      left: '142',                        //标题位于图标居中的位置的偏移量
      top:'78',
      textAlign: 'center',                
      // 可以设置显示的样式 ，文本样式           
      textStyle: {
        color: '#1EFFFF',
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    tooltip: {                 //鼠标移到目标悬浮数据的文本框
      trigger: 'item',
      position: ['38%', '45%']        //设置显示位置
    },
    color:['#EB6100','#1EFFFF'],       //可以设置图表的颜色
    legend: {                           //图例的设置
      orient: 'vertical',               //图例排列方式， 此为竖着排列
      right: '15%',                     //离右侧的距离
      top: 'center',                     //上下居中
      textStyle:{                        //图例文本样式设置
        color:'#00eeff',                  // 图例文字的颜色
        fontSize: 18,
        fontWeight: 'bold',
      },
      formatter:function(name){           //可以设置图例显示数值
        	//通过name获取到数组对象中的单个对象
            let singleData = data.filter(function(item){
                return item.name == name
            })
            return  name + ' : ' + singleData[0].value + '人';
        },
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],      //设置饼图的大小及颜色所占宽度
        center: ['30%', '50%'],      //图表的位置
        avoidLabelOverlap: false,     //设置是否重叠
        itemStyle: {                   //图表的样式
          borderColor: '#fff',
          borderWidth: 0
        },
        label: {                        是否显示文本
          show: false,
          position: 'center'
        },
        emphasis: {                    //饼图中鼠标移动到图表是否出现文本数据
          label: {
            show: false,
          }
        },
        labelLine: {                 //饼图中是否显示牵引线
          show: false
        },
        data: data
      }
    ]
  };
  myChart.setOption(option);
}