项目用的是uniapp框架,代码运行在h5端(npm run dev:h5). 一开始用的是官方提供的居中方式, 但是由于存在以下两种场景,导致标题还是无法在圆环中居中:
- 第一种场景:环形图渲染的位置会根据标签数量的增加减少而改变, 导致标题无法居中
- 第二种场景: 不同移动设备(尺寸不同),导致标题无法居中
框架
uniapp 引用的插件版本
- “vue”: “^2.6.11”,
- “vuex”: “^3.4.0”
- “highcharts”: “^9.1.0”
- “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=