89 lines
1.9 KiB
Vue
89 lines
1.9 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 type { EventItem } from "@/types/EventItem";
|
|
import type { StoreEventRecordDailyStatView } from "@/types/Store";
|
|
import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
|
|
|
|
const props = defineProps<{
|
|
dateTextList: string[];
|
|
eventList: EventItem[];
|
|
statMap: Record<string, StoreEventRecordDailyStatView[]>;
|
|
}>();
|
|
|
|
const chartOption = computed<EChartsOption>(() => ({
|
|
...buildStoreBaseChartOption(props.dateTextList),
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: props.eventList.map(item => item.name || "未命名事件"),
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: "#52607a"
|
|
}
|
|
},
|
|
series: [{
|
|
name: "登记次数",
|
|
type: "bar",
|
|
data: props.eventList.map(item => ({
|
|
value: countRecordByEvent(item.id || ""),
|
|
itemStyle: getEventColor(item) ? {
|
|
color: getEventColor(item)
|
|
} : undefined
|
|
}))
|
|
}]
|
|
}));
|
|
|
|
const { chartElement } = useStoreChart(chartOption);
|
|
|
|
function countRecordByEvent(eventId: string): number {
|
|
return (props.statMap[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
|
|
}
|
|
|
|
function getEventColor(event: EventItem): string | undefined {
|
|
return event.color || undefined;
|
|
}
|
|
</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>
|