vue+hightCharts---标题居中的圆环图

官网例子在线编辑：官网案例在线编辑

先上效果图：

实现：

1、安装

cnpm install highcharts-vue --save

2、全局注册--------main.js

import HighchartsVue from 'highcharts-vue'
Vue.use(HighchartsVue)

3、使用

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

pieCallback(c) {
      this.callbackC = c
      setTimeout(() => {
        const centerY = c.series[0].center[1]
        const titleHeight = parseInt(c.title.styles.fontSize)
        const percentage = c.series[0].data[2] ? c.series[0].data[2].percentage : 0
        c.setTitle({
          y: centerY + titleHeight / 2 - 40,
          text: '<div style="width: 200px;text-align: center"><p style="margin: 0;font-size: 32px">' + percentage.toFixed(2) + '%</p><p style="margin: 0">健康</p></div>',
          useHTML: true
        })
      }, 2500)
}


参考option：
	  pieOption: {
        chart: {
          type: 'pie',
          backgroundColor: 'transparent',
          color: '#fff',
          marginTop: 20,
          marginBottom: 50,
          marginLeft: 0,
          marginRight: 0
        },
        title: {
          text: '',
          align: 'center',
          floating: true
        },
        credits: {
          enabled: false// 隐藏右下角水印
        },
        subtitle: {
          text: null
        },

        plotOptions: {
          pie: {
            colors: ['#1EBD98', '#DD5252', '#fbbb3f', '#9dacc3', '#a29a9a'],
            borderColor: 'transparent',
            dataLabels: {
              // 环形图内部展示
              enabled: false // 是否显示支出去的label标签
            },
            cursor: 'pointer',
            showInLegend: true,
            point: {
              events: {
                mouseOver: function(e) { // 鼠标滑过时动态更新标题
                  const chart = this.series.chart
                  chart.setTitle({
                    text: '<div style="width: 200px;text-align: center"><p style="margin: 0;font-size: 32px">' + this.percentage.toFixed(2) + '%</p><p style="margin: 0">' + this.name + '</p></div>'
                  })
                }
              }
            }
          }
        },
        legend: {
          enabled: true,
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom',
          padding: 0,
          labelFormatter: function() {
            return `${this.name}`
          },
          itemStyle: {
            fontSize: 16
          }
        },
        tooltip: {
          headerFormat: '',
          pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}：</b>' + '<b>{point.y}台</b>'
        },
        series: [
          {
            innerSize: '70%',
            zMin: 0,
            data: []
          }
        ]
      }

4、更改图表宽高

高度：
/deep/.highcharts-container{
    height: 350px!important;
    svg{
      height: 350px!important;
    }
  }
宽度：根据父容器自适应