Echarts 设计饼图扇区被选中时中间显示数据

效果图如下：

1、初始状态

2、扇区被选中时状态（中间数据跟着修改）

    

思路：

使用echarts饼图自带的label，显示出每一个扇区的具体值 可采用 【formatter: "{b} : {c} 人"】 设计格式

并将显示位置改为 position: 'right'

其实本身直接将position改为 ‘center’也能将数据显示在中间，但是扇区边缘就不会显示具体数据了

所以我的思路是：添加一个div盒子显示数据，利用子绝父相固定位置

HTML代码如下：

 <div class="border" style="position: relative">
      <div id="equipment" :style="{height: '360px',marginLeft:'20px',marginBottom:'40px'}"></div>
      <!--为ECharts新增一个DOM空间-->
      <div style="position: absolute;left: 46%;top: 45%;">
        <p style="font-size: 29px">{{chooseEquipment.data}}%</p> 
        <p style="font-size: 16px;margin-left: 22px;margin-top: 3px">{{chooseEquipment.value}}</p>
      </div>
 </div>

脚本代码如下：

drawLineEquipment() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('equipment'));
        let obj = this;
        // 绘制图表
        myChart.setOption({
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['安卓', '苹果'],
          },
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  borderColor: "#FFFFFF", borderWidth: 1,
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: '#727272'  // 改变标示线的颜色
                  }
                },
                emphasis: {
                  lineStyle: {
                    color: '#727272'  // 改变标示线的颜色
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  formatter: "{b} : {c} 人",
                  textStyle: {
                    color: '#727272',
                  }
                },
                emphasis: {
                  show: true,
                }
              },
              data: [
                {value: obj.deviceUserStatisticsModelList[1].userNumber, name: '安卓'}, /*数据更改*/
                {value: obj.deviceUserStatisticsModelList[0].userNumber, name: '苹果'},
              ]
            }
          ],
          color: ['#2864fa', '#50b6ff']
        });
        myChart.on('mouseover', function (params) { /*添加鼠标事件*/
          obj.chooseEquipment.value = params.name;
          if (params.percent === 0)
            obj.chooseEquipment.data = '0.00';
          else
            obj.chooseEquipment.data = params.percent;
        });
      },

准备潜心研究前端一段时间，希望能有所成！