基于highcharts、highcharts-vue实现标题在圆环居中

项目用的是uniapp框架，代码运行在h5端(npm run dev:h5). 一开始用的是官方提供的居中方式, 但是由于存在以下两种场景,导致标题还是无法在圆环中居中：

1. 第一种场景：环形图渲染的位置会根据标签数量的增加减少而改变, 导致标题无法居中
2. 第二种场景: 不同移动设备(尺寸不同),导致标题无法居中

框架

uniapp 引用的插件版本

1. “vue”: “^2.6.11”,
2. “vuex”: “^3.4.0”
3. “highcharts”: “^9.1.0”
4. “highcharts-vue”: “^1.3.5”

highcharts-vue文档说明地址: https://www.highcharts.com.cn/docs/highcharts-vue

main.js
在vue中引用:
import HighchartsVue from ‘highcharts-vue’
import * as Highcharts from “highcharts”
require(“highcharts/modules/variable-pie”)(Highcharts); // 引入可变圆环宽度的js
Vue.use(HighchartsVue, {
highcharts: Highcharts
});

html:

	<view id="highChartsWrap">
			<!-- 【代码说明 - 4】>
          <view class="sc-text" id=