(echarts)echarts环形图表

(echarts)echarts环形图表

效果：

代码：

<template>
	<!-- 环形图 -->
	<div class="echartList">
		<div id="echartsOne"></div>
		<p>禽类</p>
	</div>
	<div class="echartList">
		<div id="echartsTwo"></div>
		<p>畜类</p>
	</div>
	<div class="echartList">
		<div id="echartsThree"></div>
		<p>水产类</p>
	</div>
</template>
<script>
import Vue from "vue";
import * as echarts from "echarts";
export default {
	components: {},
	data() {
		return { 
		};
	},
	created() {
		this.onSubmit();
		this.$nextTick(() => {
			this.echartOne();
		});
		this.$nextTick(() => {
			this.echartTwo();
		});
		this.$nextTick(() => {
			this.echartThree();
		});
	},
	mounted() {},
	methods: {
		//查询
		onSubmit() {},
		//环形图
		echartOne() {
			let chartDom = document.getElementById("echartsOne");
			let myChart = echarts.init(chartDom);
			let option;

			option = {
				// title: {
				// 	text: "{b|c}%",
				// 	textStyle: {
				// 		rich: {
				// 			b: {
				// 				fontSize: "16",
				// 			},
				// 		},
				// 	},
				// 	left: "center",
				// 	top: "center",
				// },
				series: [
					{
						name: "Acc ",
						type: "pie",
						radius: ["70%", "90%"], //镂空和整体比例
						color: ["#a6c84c", "#ccc"],
						avoidLabelOverlap: false,
						label: {
							show: true,
							position: "center",
							formatter: "{d_style|{d}}{per_style|%} ",
							// 为标签内容指定样式，只能设置series-pie.label支持的样式
							rich: {
								d_style: {
									fontSize: 20,
									color: "#fff",
								},
								per_style: {
									fontSize: 18,
									color: "#fff",
								},
							},
						},
						labelLine: {
							show: false,
						},
						data: [
							{ value: 80, name: "Email" },
							{ value: 20, name: "test" },
						],
					},
				],
			};

			option && myChart.setOption(option);
		},
		echartTwo() {
			...
		},
		echartThree() {
			...
		},
	},
};
</script>
<style scoped>
.echartList {
	width: 145px;
	height: 150px;
	text-align: center;
}
#echartsOne {
	width: 120px;
	height: 120px;
	margin: 4px auto;
}
#echartsTwo {
	width: 120px;
	height: 120px;
	margin: 4px auto;
}
#echartsThree {
	width: 120px;
	height: 120px;
	margin: 4px auto;
}
</style> 

解决参考：https://blog.csdn.net/qq_34428553/article/details/109049980