variable-pie.js
Highcharts.chart('container', {
chart: {
type: 'variablepie'
},
title: {
text: '今日实时耗能'
},
legend:{
verticalAlign:'top',
reversed: true // 由于是下半圆,需要图例与数据顺序逆序
},
plotOptions: {
variablepie: {
dataLabels: {
enabled: true,
distance: 20,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
},
format: '<b>{point.z} {point.unit}</b>'
},
startAngle: 90, // 圆环的开始角度
endAngle: 270, // 圆环的结束角度
center: ['50%', '25%'],
showInLegend: true
}
},
tooltip: {
headerFormat: '',
pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
'用量 ({point.unit}): <b>{point.z}</b><br/>'
},
series: [{
minPointSize: 10,
innerSize: '20%',
zMin: 0,
name: 'countries',
data: [{
name: '水',
y: 1,
z: 192,
unit:'吨'
},{
name: '压缩气体',
y: 1,
z: 251,
unit:'立方'
}, {
name: '天然气',
y: 1,
z: 235,
unit:'立方'
},{
name: '电力',
y: 1,
z: 9261,
unit:'度'
} ]
}]
});