update chart
This commit is contained in:
Timi
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<event-record-calendar
|
||||
v-model="monthCursorProxy"
|
||||
v-model:selected-event-id-list="selectedEventIdListProxy"
|
||||
class="calendar-section"
|
||||
:event-list="eventList"
|
||||
:customer-name="customerName"
|
||||
:loading="loading"
|
||||
:records="records"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import EventRecordCalendar from "@/components/EventRecordCalendar.vue";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import type { EventRecord } from "@/types/EventRecord";
|
||||
|
||||
const props = defineProps<{
|
||||
customerName?: string;
|
||||
eventList: EventItem[];
|
||||
loading?: boolean;
|
||||
modelValue: Date;
|
||||
records: EventRecord[];
|
||||
selectedEventIdList: string[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
"update:modelValue": [value: Date];
|
||||
"update:selectedEventIdList": [value: string[]];
|
||||
}>();
|
||||
|
||||
const monthCursorProxy = computed({
|
||||
get: () => props.modelValue,
|
||||
set: value => emit("update:modelValue", value)
|
||||
});
|
||||
|
||||
const selectedEventIdListProxy = computed({
|
||||
get: () => props.selectedEventIdList,
|
||||
set: value => emit("update:selectedEventIdList", value)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.calendar-section {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.calendar-section {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
|
||||
h2 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<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 { buildCustomerBaseChartOption, useCustomerChart } from "@/pages/customer/component/useCustomerChart";
|
||||
|
||||
const props = defineProps<{
|
||||
dateTextList: string[];
|
||||
eventList: EventItem[];
|
||||
selectedEventIdList: string[];
|
||||
statMap: Record<string, StoreEventRecordDailyStatView[]>;
|
||||
}>();
|
||||
|
||||
const selectedEventIdSet = computed(() => new Set(props.selectedEventIdList));
|
||||
const visibleEventList = computed(() => props.eventList.filter(item => item.id && selectedEventIdSet.value.has(item.id)));
|
||||
const chartOption = computed<EChartsOption>(() => ({
|
||||
...buildCustomerBaseChartOption(props.dateTextList),
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: visibleEventList.value.map(item => item.name || "未命名事件"),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#52607a"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "登记次数",
|
||||
type: "bar",
|
||||
data: visibleEventList.value.map(item => ({
|
||||
value: countRecordByEvent(item.id || ""),
|
||||
itemStyle: getEventColor(item) ? {
|
||||
color: getEventColor(item)
|
||||
} : undefined
|
||||
}))
|
||||
}
|
||||
]
|
||||
}));
|
||||
|
||||
const { chartElement } = useCustomerChart(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 {
|
||||
margin: 0 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: .75rem;
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<section class="chart-section">
|
||||
<h2>客户登记趋势</h2>
|
||||
<div ref="chartElement" class="chart" />
|
||||
<chart-range-slider
|
||||
v-if="showSlider"
|
||||
:model-value="sliderValue"
|
||||
:max="maxSliderValue"
|
||||
:min-range="5"
|
||||
:label="rangeText"
|
||||
@change="handleSliderChange"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { EChartsOption } from "echarts";
|
||||
import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
|
||||
import type { StoreEventRecordDailyStatView } from "@/types/Store";
|
||||
import { buildCustomerBaseChartOption, useCustomerChart, useCustomerChartWindow } from "@/pages/customer/component/useCustomerChart";
|
||||
|
||||
const props = defineProps<{
|
||||
dateTextList: string[];
|
||||
selectedEventIdList: string[];
|
||||
statMap: Record<string, StoreEventRecordDailyStatView[]>;
|
||||
}>();
|
||||
|
||||
const dateTextList = computed(() => props.dateTextList);
|
||||
const {
|
||||
rangeText,
|
||||
showSlider,
|
||||
sliderValue,
|
||||
maxSliderValue,
|
||||
visibleDateTextList,
|
||||
handleSliderChange
|
||||
} = useCustomerChartWindow(dateTextList);
|
||||
const chartOption = computed<EChartsOption>(() => ({
|
||||
...buildCustomerBaseChartOption(visibleDateTextList.value),
|
||||
series: [
|
||||
{
|
||||
name: "登记次数",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
data: visibleDateTextList.value.map(dateText => countRecordByDate(dateText))
|
||||
}
|
||||
]
|
||||
}));
|
||||
|
||||
const { chartElement } = useCustomerChart(chartOption);
|
||||
|
||||
function countRecordByDate(dateText: string): number {
|
||||
const dateValue = Number(dateText.replaceAll("-", ""));
|
||||
return props.selectedEventIdList.reduce((sum, eventId) => sum + (props.statMap[eventId]?.find(item => item.dateValue === dateValue)?.dailyCount || 0), 0);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chart-section {
|
||||
margin: 0 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: .75rem;
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,164 @@
|
||||
import type { ECharts, EChartsOption } from "echarts";
|
||||
import { BarChart, LineChart } from "echarts/charts";
|
||||
import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
|
||||
import { init, use } from "echarts/core";
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
import type { ComputedRef, Ref } from "vue";
|
||||
|
||||
use([
|
||||
BarChart,
|
||||
LineChart,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
export function buildCustomerBaseChartOption(dateTextList: string[]): EChartsOption {
|
||||
return {
|
||||
color: ["#2563eb", "#0f766e", "#d97706", "#db2777", "#7c3aed"],
|
||||
grid: {
|
||||
top: 48,
|
||||
left: 12,
|
||||
right: 12,
|
||||
bottom: 12,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
icon: "roundRect",
|
||||
textStyle: {
|
||||
color: "#52607a"
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: dateTextList.map(item => item.slice(5)),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#52607a"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#52607a"
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(148, 163, 184, .2)"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function useCustomerChart(option: ComputedRef<EChartsOption> | Ref<EChartsOption>) {
|
||||
const chartElement = ref<HTMLElement>();
|
||||
let chart: ECharts | undefined;
|
||||
|
||||
watch(option, async () => {
|
||||
await nextTick();
|
||||
renderChart();
|
||||
}, {
|
||||
deep: true
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
renderChart();
|
||||
window.addEventListener("resize", resizeChart);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", resizeChart);
|
||||
chart?.dispose();
|
||||
chart = undefined;
|
||||
});
|
||||
|
||||
function renderChart(): void {
|
||||
if (!chartElement.value) {
|
||||
return;
|
||||
}
|
||||
chart = chart || init(chartElement.value);
|
||||
chart.setOption(option.value, true);
|
||||
}
|
||||
|
||||
function resizeChart(): void {
|
||||
chart?.resize();
|
||||
}
|
||||
|
||||
return {
|
||||
chartElement
|
||||
};
|
||||
}
|
||||
|
||||
export function useCustomerChartWindow(dateTextList: ComputedRef<string[]>) {
|
||||
const sliderValue = ref<number[]>([0, 0]);
|
||||
const viewportWidth = ref(window.innerWidth);
|
||||
let isSliderInitialized = false;
|
||||
const visibleDayCount = computed(() => Math.max(6, Math.floor(viewportWidth.value / 64)));
|
||||
const maxSliderValue = computed(() => Math.max(0, dateTextList.value.length - 1));
|
||||
const visibleDateTextList = computed(() => dateTextList.value.slice(sliderValue.value[0], sliderValue.value[1] + 1));
|
||||
const showSlider = computed(() => visibleDayCount.value < dateTextList.value.length);
|
||||
const rangeText = computed(() => {
|
||||
const list = visibleDateTextList.value;
|
||||
const beginText = list[0]?.slice(5) || "";
|
||||
const endText = list[list.length - 1]?.slice(5) || "";
|
||||
return beginText && endText ? `${beginText} 至 ${endText}` : "";
|
||||
});
|
||||
|
||||
watch(maxSliderValue, value => {
|
||||
if (!isSliderInitialized) {
|
||||
sliderValue.value = getLatestSliderRange();
|
||||
isSliderInitialized = true;
|
||||
return;
|
||||
}
|
||||
const [start, end] = sliderValue.value;
|
||||
if (value < end) {
|
||||
sliderValue.value = [Math.max(0, value - Math.max(0, end - start)), value];
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", updateViewportWidth);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", updateViewportWidth);
|
||||
});
|
||||
|
||||
function handleSliderChange(value: number | number[]): void {
|
||||
if (!Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
const [start = 0, end = start] = value;
|
||||
sliderValue.value = [start, Math.max(start, end)];
|
||||
}
|
||||
|
||||
function updateViewportWidth(): void {
|
||||
viewportWidth.value = window.innerWidth;
|
||||
}
|
||||
|
||||
function getLatestSliderRange(): number[] {
|
||||
const end = maxSliderValue.value;
|
||||
const start = Math.max(0, end - visibleDayCount.value + 1);
|
||||
return [start, end];
|
||||
}
|
||||
|
||||
return {
|
||||
rangeText,
|
||||
showSlider,
|
||||
sliderValue,
|
||||
maxSliderValue,
|
||||
visibleDateTextList,
|
||||
handleSliderChange
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user