highcharts 扇形玫瑰图

• 效果图
  

• 依赖模块

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:'度'
		}  ]
	}]
});