80 lines
1.5 KiB
Vue
80 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div ref="chartDom" style="width:600px;height:400px;"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import { nextTick, onMounted, ref } from "vue";
|
||
|
|
import { listCircularDiagram } from "@/api/sidebar/reportAnalytics.js";
|
||
|
|
import { defineProps } from "vue";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
default: () => []
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//创建一个响应式引用来保存DOM元素
|
||
|
|
const chartDom = ref(null);
|
||
|
|
let chartInstance = null;
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
title: {
|
||
|
|
text: "巡检人统计情况",
|
||
|
|
left: "left"
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "item"
|
||
|
|
},
|
||
|
|
// legend: {
|
||
|
|
// orient: "vertical",
|
||
|
|
// left: "left"
|
||
|
|
// },
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: "pie",
|
||
|
|
radius: ["40%", "70%"],
|
||
|
|
data: [
|
||
|
|
|
||
|
|
],
|
||
|
|
emphasis: {
|
||
|
|
itemStyle: {
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
//监听到有新值传入，调用函数重新渲染
|
||
|
|
watch(props, newData => {
|
||
|
|
option.series.data = newData.data;
|
||
|
|
freshEchart();
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
await nextTick(); //确保dow已经渲染完成
|
||
|
|
chartInstance = echarts.init(chartDom.value);
|
||
|
|
freshEchart();
|
||
|
|
});
|
||
|
|
|
||
|
|
const freshEchart = () => {
|
||
|
|
option.series[0].data=props.data;
|
||
|
|
chartInstance && chartInstance.clear();
|
||
|
|
chartInstance.setOption(option);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 销毁ECharts实例
|
||
|
|
onUnmounted(() => {
|
||
|
|
if (chartInstance != null && chartInstance.dispose) {
|
||
|
|
chartInstance.dispose();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|