67 lines
1.4 KiB
TypeScript
67 lines
1.4 KiB
TypeScript
import { onBeforeUnmount, ref } from "vue";
|
|
import { EChartsOption } from "echarts";
|
|
import { generateNumbers } from "@/utils";
|
|
|
|
export default function () {
|
|
const option = ref<EChartsOption>({});
|
|
|
|
function refresh() {
|
|
option.value = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
top: "5%",
|
|
left: "center",
|
|
},
|
|
series: [
|
|
{
|
|
name: "Access From",
|
|
type: "pie",
|
|
radius: ["40%", "70%"],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderColor: "#fff",
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: "center",
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 30,
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{ value: generateNumbers(10, 100), name: "产品一" },
|
|
{ value: generateNumbers(10, 100), name: "产品二" },
|
|
{ value: generateNumbers(10, 100), name: "产品三" },
|
|
{ value: generateNumbers(10, 100), name: "产品四" },
|
|
{ value: generateNumbers(10, 100), name: "产品五" },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
}
|
|
|
|
refresh();
|
|
|
|
const timer = setInterval(() => {
|
|
refresh();
|
|
}, 3000);
|
|
|
|
onBeforeUnmount(() => {
|
|
clearInterval(timer);
|
|
});
|
|
|
|
return {
|
|
option,
|
|
refresh,
|
|
};
|
|
}
|