74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { computed, ref } from "vue";
|
||
|
|
import { useDark, useECharts } from "@pureadmin/utils";
|
||
|
|
|
||
|
|
const { isDark } = useDark();
|
||
|
|
|
||
|
|
const theme = computed(() => (isDark.value ? "dark" : "light"));
|
||
|
|
|
||
|
|
const chartRef = ref();
|
||
|
|
const { setOptions } = useECharts(chartRef, {
|
||
|
|
theme,
|
||
|
|
renderer: "svg"
|
||
|
|
});
|
||
|
|
|
||
|
|
setOptions({
|
||
|
|
container: ".line-card",
|
||
|
|
title: {
|
||
|
|
text: "100%",
|
||
|
|
left: "47%",
|
||
|
|
top: "30%",
|
||
|
|
textAlign: "center",
|
||
|
|
textStyle: {
|
||
|
|
fontSize: "16",
|
||
|
|
fontWeight: 600
|
||
|
|
}
|
||
|
|
},
|
||
|
|
polar: {
|
||
|
|
radius: ["100%", "90%"],
|
||
|
|
center: ["50%", "50%"]
|
||
|
|
},
|
||
|
|
angleAxis: {
|
||
|
|
max: 100,
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
radiusAxis: {
|
||
|
|
type: "category",
|
||
|
|
show: true,
|
||
|
|
axisLabel: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: "bar",
|
||
|
|
roundCap: true,
|
||
|
|
barWidth: 2,
|
||
|
|
showBackground: true,
|
||
|
|
backgroundStyle: {
|
||
|
|
color: "#dfe7ef"
|
||
|
|
},
|
||
|
|
data: [100],
|
||
|
|
coordinateSystem: "polar",
|
||
|
|
color: "#7846e5",
|
||
|
|
itemStyle: {
|
||
|
|
shadowBlur: 2,
|
||
|
|
shadowColor: "#7846e5",
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowOffsetY: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div ref="chartRef" style="width: 100%; height: 60px" />
|
||
|
|
</template>
|