| | |
|---|
| | | <script lang="ts" setup> |
|---|
| | | <script lang="ts" setup> |
|---|
| | | import type { EchartsUIType } from '../../../../packages/effects/plugins/src/echarts'; |
|---|
| | | |
|---|
| | | import { onMounted, ref } from 'vue'; |
|---|
| | |
|---|
| | | const chartRef = ref<EchartsUIType>(); |
|---|
| | | const { renderEcharts } = useEcharts(chartRef); |
|---|
| | | |
|---|
| | | /** 加载工单状态分布数据并渲染饼图 */ |
|---|
| | | /** 加载订单状态分布数据并渲染饼图 */ |
|---|
| | | async function loadData() { |
|---|
| | | const data = await getWorkOrderStatusDistribution(); |
|---|
| | | const chartData = data.map((d) => ({ |
|---|
| | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <Card title="工单状态分布" class="h-full"> |
|---|
| | | <Card title="订单状态分布" class="h-full"> |
|---|
| | | <EchartsUI ref="chartRef" class="h-[280px] w-full" /> |
|---|
| | | </Card> |
|---|
| | | </template> |
|---|
