前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >highcharts 扇形玫瑰图

highcharts 扇形玫瑰图

作者头像
路过君
发布2021-10-15 15:14:51
1.2K0
发布2021-10-15 15:14:51
举报
文章被收录于专栏:路过君BLOG from CSDN
  • 效果图
在这里插入图片描述
在这里插入图片描述
  • 依赖模块

variable-pie.js

  • 源码
代码语言:javascript
复制
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:'度'
		}  ]
	}]
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/03/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档