vue highcharts 3d饼图 piechart

vue highcharts 3d饼图 piechart

• 安装

npm install highcharts@11.4.1 --save

• 组件

<template>
	<div class="ChartBox">
		<div :style="{ width: '100%', height: '100%' }" id="pieChart"></div>
	</div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);

export default {
	data() {
		return {
			// 模拟数据
			dataList: [
				{
					name: "数据一",
					y: 435,
				},
				{
					name: "数据二",
					y: 90,
				},
				// {
				// 	name: "数据三",
				// 	y: 543,
				// },
				// {
				// 	name: "数据四",
				// 	y: 654,
				// },
			],
		};
	},
	mounted() {
		this.init(); //定义一个图表方法在methods中调用
	},
	methods: {
		// 调用init方法
		init() {
			Highcharts.chart("pieChart", {
				chart: {
					type: "pie", //类型
					options3d: {
						enabled: true, // 是否启用 3D 功能,默认为false
						alpha: 70, // 内旋转角度
						beta: 0, // 外旋转角度
					},
					backgroundColor: "transparent",
				},
				exporting: {
					enabled: false,
				},
				title: {
					text: "", //标题
				},
				tooltip: {
					//鼠标触摸显示值
					pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
					style: {
						fontSize: 26,
					},
				},
				plotOptions: {
					pie: {
						allowPointSelect: true, //是否允许数据点的点击
						cursor: "pointer", //鼠标触摸变小手
						depth: 35, //图表高度
						dataLabels: {
							enabled: false, //是否允许数据标签
							format: "{point.name}",
						},
					},
				},
				series: [
					// 数据列
					{
						type: "pie", //类型
						name: "占比", //名称
						data: this.dataList, //数据
						colors: ["#28B7FE", "#00D7E9", "#FBC61F", "#3FC9CB", "#FA5728", "#29F217"],
					},
				],
			});
		},
	},
};
</script>
<style scoped>
.ChartBox {
	width: 100%;
	height: 100%;
}
</style>