37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<template>
|
|
<div class="ma-content-block p-3 mt-3 bg-white">
|
|
<a-spin class="chartContainer" :loading="isPending" tip="图标数据加载中...">
|
|
<div class="flex justify-center items-center" v-if="!isPending">
|
|
<template v-if="isError">
|
|
<img class="w-[200px] h-[300px]" src="@/assets/img/ErrorLoad.svg" alt="" />
|
|
</template>
|
|
<template v-else>
|
|
<VueUiXy :dataset="chartData" :config="chartConfig" />
|
|
</template>
|
|
</div>
|
|
</a-spin>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import commonApi from "@/api/common"
|
|
import { VueUiXy } from "vue-data-ui"
|
|
import useVueDataUI from "@/views/dashboard/workplace/components/cpns/hooks/vueDataUI"
|
|
import { useQuery } from "@tanstack/vue-query"
|
|
// vue-query请求图表接口
|
|
const { isPending, data, isError } = useQuery({
|
|
queryKey: ["chart"],
|
|
queryFn: commonApi.getChartData,
|
|
refetchOnWindowFocus: false
|
|
})
|
|
// vue-data-ui图表
|
|
const { chartData, chartConfig } = useVueDataUI(data)
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.chartContainer {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
</style>
|