echarts 圆角圆环

<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[];
			let count = 0;
			res?.data.map((item: any) => {
				let obj = {
					name: filter(item.source),
					value: item.COUNT
				};
				count += item.COUNT;
				console.log(obj, "来了");
				data.push(obj);
			});
			initEchart(data, count);
		} 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 = (data: any, count: number) => {
	let pieVal = {
		title: count, //中间title文字
		subTitle: "总系统数", //中间底部文字
		pieList: data,
		colorList: [
			//环形图颜色
			"#ffb22b",
			"#1779ee",
			"#29e2b0",
			"#7b8c74",
			"#1DB6C5",
			"#fcc525",
			"#fb9712",
			"#26c6da",
			"#1e88e5",
			"#eeeeee"
		],
		afterSeries: [], //绘制环形饼图的数据
		nameList: [],
		totalNum: 0
	};

	pieVal.pieList.forEach((item: any, index: any) => {
		let seriesVal = {
			type: "bar",
			data: [0, 0, 2],
			coordinateSystem: "polar",
			barMaxWidth: 25, //圆环的宽度
			roundCap: true,
			name: "正式员工",
			color: "#ffb22b",
			stack: "a"
		};
		seriesVal.data[2] = Number(item.value);
		seriesVal.name = item.name;
		seriesVal.color = pieVal.colorList[index];
		pieVal.totalNum += Number(item.value);
		pieVal.nameList.push(item.name); //获取名称数组
		pieVal.afterSeries.push(seriesVal); //获取绘制环形饼图数组
	});
	let BtVal = pieVal;
	let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
	let option: echarts.EChartsOption = {
		title: [
			{
				text: BtVal.title,
				subtext: BtVal.subTitle,
				textStyle: {
					fontSize: 16,
					color: "black"
				},
				subtextStyle: {
					fontSize: 14,
					color: "#ff873b"
				},
				textAlign: "center",
				x: "48%",
				y: "36%"
			}
		],
		tooltip: {
			trigger: "item",
			formatter: "{a} <br/>人数：{c}"
		},
		angleAxis: {
			axisLine: {
				show: false
			},
			axisLabel: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			min: 0,
			max: BtVal.totalNum, //一圈的刻度值
			startAngle: 180 //初始角度
		},
		radiusAxis: {
			type: "category",
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			data: ["1", "2", "3", "4"], //代表层级
			z: 10
		},
		polar: {
			center: ["50%", "40%"], //圆环-图形位置
			radius: "100%" //图形大小 值可设置超过100%
		},
		series: BtVal.afterSeries,
		legend: {
			show: true,
			icon: "rect",
			itemWidth: 20,
			itemHeight: 20,
			bottom: 30,
			left: "center",
			data: BtVal.nameList
			// formatter: function (name) {
			// 	// 获取legend显示内容
			// 	let data = BtVal.pieList;
			// 	let total = 0;
			// 	let tarValue = 0;
			// 	for (let i = 0, l = data.length; i < l; i++) {
			// 		total += data[i].value;
			// 		if (data[i].name == name) {
			// 			tarValue = data[i].value;
			// 		}
			// 	}
			// 	let p = ((tarValue / total) * 100).toFixed(2);
			// 	if (total == 0) {
			// 		p = 0;
			// 	}
			// 	return name + " " + " " + p + "%";
			// }
		}
	};
	useEcharts(myChart, option);
};
onMounted(() => {
	getEarning();
});
</script>

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