You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
2.8 KiB
Vue
129 lines
2.8 KiB
Vue
<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 * as echarts from "echarts/core";
|
|
|
|
const { isDark } = useDark();
|
|
|
|
const theme: EchartOptions["theme"] = computed(() => {
|
|
return isDark.value ? "dark" : "light";
|
|
});
|
|
|
|
const radarChartRef = ref<HTMLDivElement | null>(null);
|
|
const { setOptions, resize } = useECharts(
|
|
radarChartRef as Ref<HTMLDivElement>,
|
|
{
|
|
theme
|
|
}
|
|
);
|
|
const dataMax = ref([
|
|
{ name: "类型A", max: 15 },
|
|
{ name: "类型B", max: 15 },
|
|
{ name: "类型C", max: 15 },
|
|
{ name: "类型D", max: 15 },
|
|
{ name: "类型E", max: 15 }
|
|
]);
|
|
setOptions(
|
|
{
|
|
title: {
|
|
text: "缺陷类型",
|
|
left: "left",
|
|
textStyle: {
|
|
fontSize: 14,
|
|
color: "#333"
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "item"
|
|
},
|
|
radar: {
|
|
center: ["50%", "50%"], //调位置 第一个左右 第二个上下
|
|
radius: 70, //调大小
|
|
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
|
|
indicator: dataMax.value,
|
|
shape: "polygon", //对雷达图形设置成一个圆形,可选 circle:圆形,polygon:多角形(默认)
|
|
splitArea: {
|
|
areaStyle: {
|
|
// 图表背景网格区域的颜色
|
|
color: ["#f2f6ff"]
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: "radar",
|
|
label: {
|
|
show: false //显示数值
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(255, 255,255, 1)"
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(255, 84,3, 1)"
|
|
}
|
|
],
|
|
false
|
|
)
|
|
},
|
|
// areaStyle: {}, //每个雷达图形成一个阴影的面积
|
|
itemStyle: {
|
|
//折线拐点标志的样式
|
|
color: "#FF7B3D"
|
|
},
|
|
lineStyle: {
|
|
//线条样式
|
|
color: "#FF7B3D"
|
|
},
|
|
symbolSize: 4, //圆点大小
|
|
symbol: "circle", //圆点样式
|
|
data: [
|
|
{
|
|
name: "类型A",
|
|
value: [5, 6, 7, 8, 9]
|
|
},
|
|
{
|
|
name: "类型B",
|
|
value: [9, 8, 7, 6, 5]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: "click",
|
|
callback: params => {
|
|
console.log("click", params);
|
|
}
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => useAppStoreHook().getSidebarStatus,
|
|
() => {
|
|
delay(600).then(() => resize());
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="radarChartRef" style="width: 100%; height: 35vh" />
|
|
</template>
|