echarts简单的圆角圆环实现

逻辑 ： 根据饼图 改变 radius为["50%", "50%"] 通过itemStyle下的normal 的字段 调整borderWidth borderColor 即可 shadowColor

<template>
	<div class="box1">
		<div ref="echartsRef" class="pie-box">div>
	div>
template>

<script setup lang="ts" name="pieChart">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { ElMessage } from "element-plus";
import { useEcharts } from "@/hooks/useEcharts";
import { sysClass } from "@/api/modules/system";
const echartsRef = ref<HTMLElement>();

// 定义饼图data类型

const getEarning = async () => {
	try {
		const res = await sysClass();
		if (res.success) {
			console.log(res, "我是系统类比");
			let data = [] as any[];
			res?.data.map((item: any) => {
				if (item.source != -2 && item.source != 2) {
					let obj = {
						name: filter(item.source),
						value: item.COUNT
					};

					data.push(obj);
				}
			});
			initEchart(data);
		} else {
			ElMessage.error(res.msg);
		}
	} catch (err: any) {
		ElMessage.error(err);
	}
};
const filter = (data: any) => {
	if (data == -1) {
		return "购买发布的系统";
	}
	if (data == -2) {
		return " 试用发布的系统";
	}
	if (data == 2) {
		return "复制的系统";
	}
	if (data == 1) {
		return "合并的系统";
	}
	if (data == 0) {
		return "自建的系统";
	}
};

const initEchart = (data1: any) => {
	let color = ["#EB5757", "#4CCCD4", "#FAA53B"];
	let data = [];
	for (let i = 0; i < data1.length; i++) {
		data.push({
			value: data1[i].value,
			name: data1[i].name,
			itemStyle: {
				normal: {
					borderWidth: 25,
					// shadowBlur: 5,
					borderColor: color[i],
					shadowColor: color[i]
				}
			}
		});
	}
	console.log(data, "的值");
	let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
	let seriesOption = [
		{
			name: "",
			type: "pie",
			clockWise: false,
			radius: ["50%", "50%"],
			hoverAnimation: false,
			itemStyle: {
				normal: {
					label: {
						show: true,
						position: "outside",
						overflow: "none",
						color: "inherit",
						align: "center",
						rich: {
							a1: {
								align: "center"
							}
						},
						formatter: function (params) {
							console.log(params, "每一个的值");
							return `{a1|${params.name}}  \n` + `{a1|${params.value}}`;
						}
					},
					labelLine: {
						length: 30,
						length2: 50,
						// maxSurfaceAngle: 90,
						show: true,
						color: "#00ffff"
					}
				}
			},
			data: data
		}
	];
	let option: echarts.EChartsOption = {
		backgroundColor: "white",
		color: color,
		title: {
			top: "48%",
			left: "49%",
			textAlign: "center"
		},
		tooltip: {
			show: false
		},
		toolbox: {
			show: false
		},
		series: seriesOption
	};
	useEcharts(myChart, option);
};
onMounted(() => {
	getEarning();
});
script>

<style scoped lang="scss">
.box1 {
	width: 100%;
	height: 100%;
	.pie-box {
		width: 100%;
		height: 100%;
	}
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148