<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>
echarts 圆角圆环
最新推荐文章于 2024-06-25 11:43:23 发布