echarts 多环形多颜色套圈显示

 "echarts": "^5.2.0", 

<template>
	<div :class="className" :style="{height:height,width:width}" id="myChartZyzxl" />
</template>

<script>
	import * as echarts from 'echarts';
	import resize from '@/utils/resize.js'
	export var data1 = [{
			value: 890,
			name: '本科'
		},
		{
			value: 721,
			name: '大专'
		},
		{
			value: 176,
			name: '高中'
		},
		{
			value: 674,
			name: '其他'
		}

	]

	export default {
		 mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '24vw'
			},
			height: {
				type: String,
				default: '20vh'
			},
			chartData: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				timer: 0,
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOption(val)
				}
			}
		},
		mounted() {
			// this.$nextTick(() => {
			this.initChart();
			// })
		},
		beforeDestroy() {
			
		},
		methods: {
			
			initChart() {
				var myChart = echarts.init(document.getElementById('myChartZyzxl'));
				// total 和 salary的数据就是各个环的数据
				let salayry1 = 890;
				let salayry2 = 721;
				let salayry3 = 176;
				let salayry4 = 674;
				let total = parseInt(salayry1) + parseInt(salayry2) + parseInt(salayry3) + parseInt(salayry4);
				// console.log(total, '222')
				let option = {
					color: [
						"#FFEB3B",
						"#FF8D1A",
						"#2A82E4",
						"#7948EA"
					],
					legend: {
						orient: 'vertical',
						right: 40,
						top: 40,
						itemHeight: 10,
						itemWidth: 10,
						width: 100, //图例的宽度，想要对齐这个必须要有
						itemGap: 18, //各组的间距
						data: [{
								name: "本科",
								textStyle: {
									color: "#A9D5E8", // 单独设置某一个图列的颜色
								},
							},
							{
								name: "大专",
								textStyle: {
									color: "#A9D5E8", // 单独设置某一个图列的颜色
								},
							},
							{
								name: "高中",
								textStyle: {
									color: "#A9D5E8", // 单独设置某一个图列的颜色
								},
							},
							{
								name: "其他",
								textStyle: {
									color: "#A9D5E8", // 单独设置某一个图列的颜色
								},
							},

						],
						textStyle: {
							rich: {
								name: {
									fontSize: 14,
									color: "#A9D5E8",
									padding: [0, 50, 0, 0]
								},
								num: {
									fontSize: 14,
									fontWeight: 500,
									padding: [0, 0, 0, 0],
									color: "#A9D5E8"
								}
							}
						},
						formatter: function(name) {
							let tarValue;
							for (let i = 0; i < data1.length; i++) {
								if (data1[i].name == name) {
									tarValue = data1[i].value;
								}
							}
							return `{name|${name}}{num|${tarValue}}`;
						},
						//图例的名字需要和饼图的name一致，才会显示图例
					},
					series: [
						// A版块
						{
							name: "本科",
							type: "pie",
							radius: ["80%", "90%"],
							center: ["30%", "45%"],
							//环的位置
							label: {
								show: false,
								position: "center",
							},
							labelLine: {
								normal: {
									show: false,
								},
							},
							emphasis: {
								label: {
									show: true,
									fontSize: "20",
									fontWeight: "bold",
								},
							},
							data: [{
									value: 890, //需要显示的数据
									name: '本科',
									itemStyle: {
										normal: {
											color: "#00FFFF",
										},
									},
								},
								{
									value: total - salayry1,
									//不需要显示的数据，颜色设置成和背景一样
									itemStyle: {
										normal: {
											color: "#3C4E78",
										},
									},
								},
							],
						},
						// B版块
						{
							name: "大专",
							type: "pie",
							radius: ["60%", "70%"],
							center: ["30%", "45%"],
							//环的位置
							label: {
								show: false,
								position: "center",
							},
							labelLine: {
								normal: {
									show: false,
								},
							},
							emphasis: {
								label: {
									show: true,
									fontSize: "20",
									fontWeight: "500",
								},
							},
							data: [{
									value: 721, //需要显示的数据
									name: '大专',
									itemStyle: {
										normal: {
											color: "#00B0FF",
										},
									},
								},
								{
									value: total - salayry2,
									//不需要显示的数据，颜色设置成和背景一样
									itemStyle: {
										normal: {
											color: "#3C4E78",
										},
									},
								},
							],
						},
						// C版块
						{
							name: "高中",
							type: "pie",
							radius: ["40%", "50%"],
							center: ["30%", "45%"],
							//环的位置
							label: {
								show: false,
								position: "center",
							},
							labelLine: {
								normal: {
									show: false,
								},
							},
							emphasis: {
								label: {
									show: true,
									fontSize: "20",
									fontWeight: "bold",
								},
								itemStyle: {
									normal: {
										color: "#FFC000",
									},
								},
							},
							data: [{
									value: 176, //需要显示的数据
									name: '高中',
									itemStyle: {
										normal: {
											color: "#FFC000",
										},
									},
								},
								{
									value: total - salayry3,
									//不需要显示的数据，颜色设置成和背景一样
									itemStyle: {
										normal: {
											color: "#3C4E78",
										},
									},
								},
							],
						},
						// D版块
						{
							name: "其他",
							type: "pie",
							radius: ["20%", "30%"],
							center: ["30%", "45%"],
							//环的位置
							label: {
								show: false,
								position: "center",
							},
							labelLine: {
								normal: {
									show: false,
								},
							},
							emphasis: {
								label: {
									show: true,
									fontSize: "20",
									fontWeight: "bold",
								},
							},
							data: [{
									value: 674, //需要显示的数据
									name: '其他',
									itemStyle: {
										normal: {
											color: "#FFAB6F",
										},
									},
								},
								{
									value: total - salayry4,
									//不需要显示的数据，颜色设置成和背景一样
									itemStyle: {
										normal: {
											color: "#3C4E78",
										},
									},
								},
							],
						},

					],
				};
				myChart.setOption(option);
				window.addEventListener('resize', function() {
					myChart.resize()
				})
				// window.addEventListener('resize', myChart.resize);


			},


		}
	}
</script>