|
|
|
|
@ -1,12 +1,7 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, computed, watch, type Ref } from "vue";
|
|
|
|
|
import { useAppStoreHook } from "@/store/modules/app";
|
|
|
|
|
import {
|
|
|
|
|
delay,
|
|
|
|
|
useDark,
|
|
|
|
|
useECharts,
|
|
|
|
|
type EchartOptions
|
|
|
|
|
} from "@pureadmin/utils";
|
|
|
|
|
import { ref, computed, watch, type Ref, nextTick } from "vue";
|
|
|
|
|
// import { useAppStoreHook } from "@/store/modules/app";
|
|
|
|
|
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
|
|
|
|
|
|
|
|
|
|
const { isDark } = useDark();
|
|
|
|
|
|
|
|
|
|
@ -15,163 +10,180 @@ const theme: EchartOptions["theme"] = computed(() => {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const pieChartRef = ref<HTMLDivElement | null>(null);
|
|
|
|
|
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
|
|
|
|
|
const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
|
|
|
|
|
theme
|
|
|
|
|
});
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
data: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => []
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
setOptions(
|
|
|
|
|
{
|
|
|
|
|
// title: {
|
|
|
|
|
// text: "算力占用",
|
|
|
|
|
// left: "left",
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// fontSize: 14,
|
|
|
|
|
// color: "#333"
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "item",
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
// 图例值格式化
|
|
|
|
|
return `${params.value}%`;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// legend: {
|
|
|
|
|
// // icon: "rect",
|
|
|
|
|
// // // orient: "vertical",
|
|
|
|
|
// // align: "auto",
|
|
|
|
|
// // bottom: "0",
|
|
|
|
|
// // // top: "40%",
|
|
|
|
|
// // // right: "15%",
|
|
|
|
|
// // // itemGap: 18,
|
|
|
|
|
// // textStyle: {
|
|
|
|
|
// // fontSize: 12,
|
|
|
|
|
// // color: "#333"
|
|
|
|
|
// // }
|
|
|
|
|
// // right: true
|
|
|
|
|
// },
|
|
|
|
|
series: [
|
|
|
|
|
watch(
|
|
|
|
|
() => props,
|
|
|
|
|
async () => {
|
|
|
|
|
await nextTick();
|
|
|
|
|
setOptions(
|
|
|
|
|
{
|
|
|
|
|
type: "pie",
|
|
|
|
|
radius: ["30%", "50%"], // 设置内半径和外半径，达到高低不一样的效果
|
|
|
|
|
color: [
|
|
|
|
|
{
|
|
|
|
|
type: "linear",
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0.4,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#F9AC28" // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#F58400" // 100% 处的颜色
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
globalCoord: false // 缺省为 false
|
|
|
|
|
},
|
|
|
|
|
// title: {
|
|
|
|
|
// text: "算力占用",
|
|
|
|
|
// left: "left",
|
|
|
|
|
// textStyle: {
|
|
|
|
|
// fontSize: 14,
|
|
|
|
|
// color: "#333"
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "item",
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
// 图例值格式化
|
|
|
|
|
return `${params.value}%`;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// legend: {
|
|
|
|
|
// // icon: "rect",
|
|
|
|
|
// // // orient: "vertical",
|
|
|
|
|
// // align: "auto",
|
|
|
|
|
// // bottom: "0",
|
|
|
|
|
// // // top: "40%",
|
|
|
|
|
// // // right: "15%",
|
|
|
|
|
// // // itemGap: 18,
|
|
|
|
|
// // textStyle: {
|
|
|
|
|
// // fontSize: 12,
|
|
|
|
|
// // color: "#333"
|
|
|
|
|
// // }
|
|
|
|
|
// // right: true
|
|
|
|
|
// },
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: "linear",
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0.4,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [
|
|
|
|
|
type: "pie",
|
|
|
|
|
radius: ["30%", "50%"], // 设置内半径和外半径，达到高低不一样的效果
|
|
|
|
|
color: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#2C48FF" // 0% 处的颜色
|
|
|
|
|
type: "linear",
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0.4,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#F9AC28" // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#F58400" // 100% 处的颜色
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
globalCoord: false // 缺省为 false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#001BCF" // 100% 处的颜色
|
|
|
|
|
type: "linear",
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
x2: 0.4,
|
|
|
|
|
y2: 1,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#2C48FF" // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#001BCF" // 100% 处的颜色
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
globalCoord: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
globalCoord: false // 缺省为 false
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
// depth: 30,
|
|
|
|
|
labelLine: {
|
|
|
|
|
// type: "dashed",
|
|
|
|
|
length: 20, // 设置引导线长度
|
|
|
|
|
length2: 30 // 设置引导线第二段长度
|
|
|
|
|
},
|
|
|
|
|
// depth: 30,
|
|
|
|
|
labelLine: {
|
|
|
|
|
// type: "dashed",
|
|
|
|
|
length: 20, // 设置引导线长度
|
|
|
|
|
length2: 30 // 设置引导线第二段长度
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
label: {
|
|
|
|
|
// formatter: "{b} {c}", // 设置标签显示内容
|
|
|
|
|
lineHeight: 20, // 设置标签行高
|
|
|
|
|
// backgroundColor: ["#1D39EF", "#F58702"],
|
|
|
|
|
label: {
|
|
|
|
|
// formatter: "{b} {c}", // 设置标签显示内容
|
|
|
|
|
lineHeight: 20, // 设置标签行高
|
|
|
|
|
// backgroundColor: ["#1D39EF", "#F58702"],
|
|
|
|
|
|
|
|
|
|
align: "center",
|
|
|
|
|
verticalAlign: "middle",
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
// 自定义 formatter 函数
|
|
|
|
|
const { name, percent } = params;
|
|
|
|
|
if (name === "未占用") {
|
|
|
|
|
// 设置 Apple 标签的背景色为红色
|
|
|
|
|
return `{red|${name}: ${percent}%}`;
|
|
|
|
|
} else {
|
|
|
|
|
// 设置其他标签的背景色为蓝色
|
|
|
|
|
return `{blue|${name}: ${percent}%}`;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
rich: {
|
|
|
|
|
red: {
|
|
|
|
|
backgroundColor: "#F58400",
|
|
|
|
|
// width: 79,
|
|
|
|
|
height: 24,
|
|
|
|
|
padding: [5, 8], // 调整背景边界大小
|
|
|
|
|
borderRadius: 4, // 调整背景圆角大小
|
|
|
|
|
color: "#fff"
|
|
|
|
|
align: "center",
|
|
|
|
|
verticalAlign: "middle",
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
// 自定义 formatter 函数
|
|
|
|
|
const { name, percent } = params;
|
|
|
|
|
if (name === "未占用") {
|
|
|
|
|
// 设置 Apple 标签的背景色为红色
|
|
|
|
|
return `{red|${name}: ${percent}%}`;
|
|
|
|
|
} else {
|
|
|
|
|
// 设置其他标签的背景色为蓝色
|
|
|
|
|
return `{blue|${name}: ${percent}%}`;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
rich: {
|
|
|
|
|
red: {
|
|
|
|
|
backgroundColor: "#F58400",
|
|
|
|
|
// width: 79,
|
|
|
|
|
height: 24,
|
|
|
|
|
padding: [5, 8], // 调整背景边界大小
|
|
|
|
|
borderRadius: 4, // 调整背景圆角大小
|
|
|
|
|
color: "#fff"
|
|
|
|
|
},
|
|
|
|
|
blue: {
|
|
|
|
|
backgroundColor: "#1D39EF",
|
|
|
|
|
// width: 79,
|
|
|
|
|
height: 24,
|
|
|
|
|
padding: [5, 8], // 调整背景边界大小
|
|
|
|
|
borderRadius: 4, // 调整背景圆角大小
|
|
|
|
|
color: "#fff"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
blue: {
|
|
|
|
|
backgroundColor: "#1D39EF",
|
|
|
|
|
// width: 79,
|
|
|
|
|
height: 24,
|
|
|
|
|
padding: [5, 8], // 调整背景边界大小
|
|
|
|
|
borderRadius: 4, // 调整背景圆角大小
|
|
|
|
|
color: "#fff"
|
|
|
|
|
// data: [
|
|
|
|
|
// { value: 22, name: "未占用" },
|
|
|
|
|
// { value: 78, name: "已占用" }
|
|
|
|
|
// ],
|
|
|
|
|
data: props.data,
|
|
|
|
|
emphasis: {
|
|
|
|
|
itemStyle: {
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
shadowOffsetX: 0,
|
|
|
|
|
shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{ value: 22, name: "未占用" },
|
|
|
|
|
{ value: 78, name: "已占用" }
|
|
|
|
|
],
|
|
|
|
|
emphasis: {
|
|
|
|
|
itemStyle: {
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
shadowOffsetX: 0,
|
|
|
|
|
shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "click",
|
|
|
|
|
callback: params => {
|
|
|
|
|
console.log("click", params);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 点击空白处
|
|
|
|
|
{
|
|
|
|
|
type: "zrender",
|
|
|
|
|
name: "click",
|
|
|
|
|
callback: params => {
|
|
|
|
|
console.log("点击空白处", params);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "click",
|
|
|
|
|
callback: params => {
|
|
|
|
|
console.log("click", params);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
// 点击空白处
|
|
|
|
|
{
|
|
|
|
|
type: "zrender",
|
|
|
|
|
name: "click",
|
|
|
|
|
callback: params => {
|
|
|
|
|
console.log("点击空白处", params);
|
|
|
|
|
}
|
|
|
|
|
deep: true,
|
|
|
|
|
immediate: true
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => useAppStoreHook().getSidebarStatus,
|
|
|
|
|
() => {
|
|
|
|
|
delay(600).then(() => resize());
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
// watch(
|
|
|
|
|
// () => useAppStoreHook().getSidebarStatus,
|
|
|
|
|
// () => {
|
|
|
|
|
// delay(600).then(() => resize());
|
|
|
|
|
// }
|
|
|
|
|
// );
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
JINGYJ
9 months ago