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;
        });
      },

準備潛心研究前端一段時間，希望能有所成！