103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
|
<div :style="{height,width}" ref="chartRef"></div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, shallowReactive, watch } from "vue";
|
|
import * as echarts from "echarts";
|
|
interface ColorObjProps {
|
|
textStyle: string;
|
|
series: {
|
|
color: string[];
|
|
dataColor: {
|
|
normal: string;
|
|
shadowColor: string;
|
|
};
|
|
};
|
|
}
|
|
const props = withDefaults(defineProps<{
|
|
tips: number;
|
|
colorObj: ColorObjProps;
|
|
}>(), {
|
|
tips: 50,
|
|
colorObj: () => ({
|
|
textStyle: "#3fc0fb",
|
|
series: {
|
|
color: ["#00bcd44a", "transparent"],
|
|
dataColor: {
|
|
normal: "#03a9f4",
|
|
shadowColor: "#97e2f5"
|
|
}
|
|
}
|
|
})
|
|
});
|
|
const height = "100px";
|
|
const width = "120px";
|
|
// 定义 ref
|
|
const chartRef = ref();
|
|
// 配置项
|
|
let options = shallowReactive({ title: null, series: null });
|
|
// echarts 实例
|
|
let chartInstance: echarts.ECharts | null = null;
|
|
watch(
|
|
() => props.tips,
|
|
(val: any) => {
|
|
options = {
|
|
title: {
|
|
text: val * 1 + "%",
|
|
x: "center",
|
|
y: "center",
|
|
textStyle: {
|
|
color: props.colorObj.textStyle,
|
|
fontSize: 16
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["75%", "80%"],
|
|
center: ["50%", "50%"],
|
|
hoverAnimation: false,
|
|
color: props.colorObj.series.color,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
data: [
|
|
{
|
|
value: val,
|
|
itemStyle: {
|
|
normal: {
|
|
color: props.colorObj.series.dataColor.normal,
|
|
shadowBlur: 10,
|
|
shadowColor: props.colorObj.series.dataColor.shadowColor
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: 100 - val
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
// 手动触发更新
|
|
if (chartRef.value) {
|
|
if (!chartInstance) {
|
|
chartInstance = echarts.init(chartRef.value);
|
|
}
|
|
chartInstance.setOption(options);
|
|
}
|
|
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
);
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |