highCharts 饼图中间添加自定义文本

效果图：

实现方法：

参考官网：标题居中的环形图

把 title 放在圆环中间，具体代码如下，具体数据请根据实际情况赋值：

1、vue中引入highCharts：官网教程

2、

<highcharts :options="pieOption" :callback="pieCallback"></highcharts>

data:
	pieOption: {
          chart: {
            type: 'pie',
            backgroundColor: 'transparent',
            color: '#fff',
          },
          title: {
            text: '',
            align:'center',
            floating:true
          },
          credits: {
            enabled: false//隐藏右下角水印
          },
          subtitle: {
            text: null
          },

          plotOptions: {
            pie: {
              colors: [ '#29b00f','#c3c3c3','#ee9e45','#ff0000'],
              borderColor: 'transparent',
              dataLabels: {
                // 环形图内部展示
                // enabled: false
              },
              cursor: 'pointer',
              showInLegend: true,
              point: {
                events: {
                  mouseOver: function(e) {  // 鼠标滑过时动态更新标题
                    // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                    console.log(this)
                    let chart = this.series.chart
                    chart.setTitle({
                      text:this.name+ '\t'+ this.percentage + ' %'
                    });
                  }
                }
              }
            }
          },
          legend: {
            align: 'center',
            verticalAlign: 'bottom',
            padding: 0,
            itemDistance: 30,
            lineHeight: 140,
            labelFormatter: function() {
              return `${this.name}\xa0\xa0\xa0${this.y}台`;
            }
          },
          tooltip: {
            headerFormat: '',
            pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}：</b>' + '<b>{point.y}台</b>'
          },
          series: [
            {
              innerSize: '70%',
              zMin: 0,
              data: [{name:'正常',y:1},{name:'不在线',y:2},{name:'预警',y:0},{name:'故障',y:5}]
            }
          ]
        }

methods:
	pieCallback(c){
		这里使用了定时器延迟1S，是因为c.series[0].data获取的值可能为[]，延迟一秒确保得到准确的data
        setTimeout(()=>{
          console.log('饼图回调函数', c.series[0].data)
          let centerY = c.series[0].center[1],
              titleHeight = parseInt(c.title.styles.fontSize);
          c.setTitle({
            y:centerY + titleHeight/2-10,
            text:'<div><p style="margin: 0">正常 '+c.series[0].data[0].percentage+'%</p></div>',
            useHTML:true
          });
        },1000)
      }