131 lines
2.4 KiB
Vue
131 lines
2.4 KiB
Vue
<template>
|
|
<section class="chart-section">
|
|
<h2>性别统计</h2>
|
|
<div ref="chartElement" class="chart" />
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { EChartsOption } from "echarts";
|
|
import StoreChartAPI from "@/api/StoreChartAPI";
|
|
import type { CustomerGenderStatView } from "@/types/Customer";
|
|
import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
|
|
|
|
const props = defineProps<{
|
|
dateTextList: string[];
|
|
}>();
|
|
|
|
const genderColorMap = {
|
|
MALE: "#2563eb",
|
|
FEMALE: "#db2777",
|
|
UNKNOWN: "#64748b"
|
|
} as const;
|
|
|
|
// ---------- 图表数据 ----------
|
|
|
|
const statList = ref<CustomerGenderStatView[]>([]);
|
|
|
|
const chartOption = computed<EChartsOption>(() => ({
|
|
...buildStoreBaseChartOption(props.dateTextList),
|
|
grid: {
|
|
top: 24,
|
|
left: 12,
|
|
right: 12,
|
|
bottom: 12,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
trigger: "item"
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: ["男", "女", "未知"],
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: "#52607a"
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "客户数",
|
|
type: "bar",
|
|
barWidth: 24,
|
|
data: [
|
|
{
|
|
name: "男",
|
|
value: getGenderCount("MALE"),
|
|
itemStyle: {
|
|
color: genderColorMap.MALE
|
|
}
|
|
},
|
|
{
|
|
name: "女",
|
|
value: getGenderCount("FEMALE"),
|
|
itemStyle: {
|
|
color: genderColorMap.FEMALE
|
|
}
|
|
},
|
|
{
|
|
name: "未知",
|
|
value: getGenderCount("UNKNOWN"),
|
|
itemStyle: {
|
|
color: genderColorMap.UNKNOWN
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}));
|
|
|
|
const { chartElement } = useStoreChart(chartOption);
|
|
|
|
onMounted(async () => {
|
|
await loadCustomerGenderStat();
|
|
});
|
|
|
|
async function loadCustomerGenderStat(): Promise<void> {
|
|
statList.value = await StoreChartAPI.customerGenderStat();
|
|
}
|
|
|
|
function getGenderCount(genderCode: "MALE" | "FEMALE" | "UNKNOWN"): number {
|
|
return statList.value.find(item => item.genderCode === genderCode)?.count || 0;
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.chart-section {
|
|
padding: 1rem;
|
|
background: rgba(255, 255, 255, .92);
|
|
box-shadow: var(--td-shadow-1);
|
|
border-radius: 1.25rem;
|
|
|
|
h2 {
|
|
color: #0f172a;
|
|
margin: 0 0 .875rem 0;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
height: 16rem;
|
|
}
|
|
}
|
|
|
|
:global(html.theme-dark) {
|
|
.chart-section {
|
|
background: rgba(15, 23, 42, .88);
|
|
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
|
|
|
h2 {
|
|
color: #e2e8f0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|