<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
import { onMounted, ref } from 'vue';
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { Card } from 'ant-design-vue';
|
|
import { getTraceConsumerScanDistribution } from '#/api/mes/trace-consumer-scan';
|
|
import { getRegionBarChartOptions } from '../chart-options';
|
|
defineOptions({ name: 'BagCodeHomeScanRegionChart' });
|
|
const chartRef = ref<EchartsUIType>();
|
const { renderEcharts } = useEcharts(chartRef);
|
|
/** 加载消费者扫码地区（省份）分布 */
|
async function loadData() {
|
const data = await getTraceConsumerScanDistribution('province');
|
// 取 Top 10 省份，避免横向过长
|
const top = data.slice(0, 10).map((d) => ({ count: d.count, name: d.name }));
|
await renderEcharts(getRegionBarChartOptions(top));
|
}
|
|
onMounted(() => {
|
loadData();
|
});
|
</script>
|
|
<template>
|
<Card title="消费者扫码地区分布" class="h-full">
|
<EchartsUI ref="chartRef" class="h-[320px] w-full" />
|
</Card>
|
</template>
|
