效果图:
实现方法:
参考官网:标题居中的环形图
把 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)
}