From 62add33884c2ae20cb85a94d8dd834e3d24bafd5 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Fri, 11 Sep 2026 17:33:28 +0800
Subject: [PATCH] update customer chart

---
 package.json                                  |  3 +-
 pnpm-lock.yaml                                | 12 +++
 src/api/CustomerChartAPI.ts                   | 15 +++-
 .../DateRangeChartCard.vue}                   | 42 ++++-----
 src/pages/customer/CustomerDataCharts.vue     | 88 ++++++++++++-------
 .../CustomerConsumptionDailyChart.vue         |  7 +-
 .../component/CustomerOrderCalendarChart.vue  |  7 +-
 .../component/CustomerOrderCharts.vue         |  7 --
 .../CustomerOrderProductRankChart.vue         |  9 +-
 .../component/CustomerOrderSkuRankChart.vue   |  9 +-
 .../component/CustomerRepeatDailyChart.vue    |  7 +-
 .../component/CustomerRepeatIntervalChart.vue |  7 +-
 .../component/CustomerOrderRankChart.vue      |  5 +-
 .../product/component/OrderDailyChart.vue     |  8 +-
 .../product/component/OrderPaymentChart.vue   |  5 +-
 .../product/component/OrderStatusChart.vue    |  5 +-
 .../product/component/OrderTypeChart.vue      |  5 +-
 .../component/ProductFulfillmentRankChart.vue |  5 +-
 .../ProductFulfillmentTrendChart.vue          |  5 +-
 .../component/ProductSalesRankChart.vue       |  5 +-
 .../component/ProductSalesTrendChart.vue      |  5 +-
 .../component/ProductStockMovementChart.vue   |  5 +-
 src/pages/product/component/chartUtils.ts     |  8 +-
 src/pages/store/StoreDataCharts.vue           |  6 +-
 src/types/Customer.ts                         |  5 ++
 25 files changed, 150 insertions(+), 135 deletions(-)
 rename src/{pages/product/component/GaoChartCard.vue => components/DateRangeChartCard.vue} (78%)

diff --git a/package.json b/package.json
index 01eb2f5..2642157 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,13 @@
 		"@zxing/library": "^0.21.3",
 		"browser-image-compression": "^2.0.2",
 		"echarts": "^6.0.0",
+		"echarts-wordcloud": "^2.1.0",
 		"less": "^4.3.0",
 		"pinia": "^3.0.2",
 		"tdesign-mobile-vue": "^1.16.0",
 		"timi-tdesign-mobile": "link:E:/WebProject/timi-tdesign-mobile",
-		"timi-web-api": "link:E:/WebProject/timi-web-api",
 		"timi-web": "link:E:/WebProject/timi-web",
+		"timi-web-api": "link:E:/WebProject/timi-web-api",
 		"ts-node": "^10.9.2",
 		"vue": "^3.5.16",
 		"vue-draggable-next": "^2.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6e77b6c..e8bda09 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,9 @@ importers:
       echarts:
         specifier: ^6.0.0
         version: 6.1.0
+      echarts-wordcloud:
+        specifier: ^2.1.0
+        version: 2.1.0(echarts@6.1.0)
       less:
         specifier: ^4.3.0
         version: 4.8.0
@@ -971,6 +974,11 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  echarts-wordcloud@2.1.0:
+    resolution: {integrity: sha512-Kt1JmbcROgb+3IMI48KZECK2AP5lG6bSsOEs+AsuwaWJxQom31RTNd6NFYI01E/YaI1PFZeueaupjlmzSQasjQ==}
+    peerDependencies:
+      echarts: ^5.0.1
+
   echarts@6.1.0:
     resolution: {integrity: sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==}
 
@@ -2807,6 +2815,10 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  echarts-wordcloud@2.1.0(echarts@6.1.0):
+    dependencies:
+      echarts: 6.1.0
+
   echarts@6.1.0:
     dependencies:
       tslib: 2.3.0
diff --git a/src/api/CustomerChartAPI.ts b/src/api/CustomerChartAPI.ts
index db8c238..94f5b38 100644
--- a/src/api/CustomerChartAPI.ts
+++ b/src/api/CustomerChartAPI.ts
@@ -1,9 +1,14 @@
 import { axios } from "timi-web-api";
-import type { CustomerChartReq } from "@/types/Customer";
+import type { CustomerChartReq, CustomerDiseaseWordView } from "@/types/Customer";
 import type { StoreEventRecordCalendarView, StoreEventRecordDailyStatView } from "@/types/Store";
+import { getStoreChartCache } from "@/utils/storeChartCache";
 import { withCurrentStoreId } from "@/utils/store";
 
 const BASE_URI = "/gao/customer/chart";
+type CustomerDiseaseWordReq = {
+	storeId?: string;
+	topN: number;
+};
 
 async function eventRecordDailyStat(req: CustomerChartReq): Promise<StoreEventRecordDailyStatView[]> {
 	return await axios.post(`${BASE_URI}/event/record/daily`, withCurrentStoreId(req));
@@ -13,7 +18,13 @@ async function eventRecordCalendar(req: CustomerChartReq): Promise<StoreEventRec
 	return await axios.post(`${BASE_URI}/event/record/calendar`, withCurrentStoreId(req));
 }
 
+async function diseaseWord(topN = 60): Promise<CustomerDiseaseWordView[]> {
+	const request = withCurrentStoreId<CustomerDiseaseWordReq>({ topN });
+	return await getStoreChartCache(`customer-disease-word:${JSON.stringify(request)}`, async () => await axios.post(`${BASE_URI}/customer/disease/word`, request));
+}
+
 export default {
 	eventRecordDailyStat,
-	eventRecordCalendar
+	eventRecordCalendar,
+	diseaseWord
 };
diff --git a/src/pages/product/component/GaoChartCard.vue b/src/components/DateRangeChartCard.vue
similarity index 78%
rename from src/pages/product/component/GaoChartCard.vue
rename to src/components/DateRangeChartCard.vue
index d7f9b6e..248c058 100644
--- a/src/pages/product/component/GaoChartCard.vue
+++ b/src/components/DateRangeChartCard.vue
@@ -1,16 +1,13 @@
 <template>
-	<section class="chart-section">
-		<div class="title-row">
+	<section class="date-range-chart-card">
+		<div class="title">
 			<h2 v-text="title" />
 			<span v-if="caption" class="caption" v-text="caption" />
 		</div>
 		<div ref="chartElement" class="chart" :style="{ height }" />
-		<div v-if="loading" class="state">
+		<div v-if="loading" class="center-tips">
 			<t-loading size="1.5rem" text="加载中" />
 		</div>
-		<div v-else-if="!hasData" class="state">
-			<t-empty description="暂无数据" />
-		</div>
 		<chart-range-slider
 			v-if="chartShowSlider"
 			:model-value="sliderValue"
@@ -41,7 +38,6 @@ const props = withDefaults(defineProps<{
 	caption: "",
 	dateTextList: () => [],
 	height: "16rem",
-	hasData: true,
 	loading: false
 });
 
@@ -61,43 +57,35 @@ const { chartElement } = useStoreChart(option);
 </script>
 
 <style scoped lang="less">
-.chart-section {
+.date-range-chart-card {
 	padding: 1rem;
 	position: relative;
 	background: rgba(255, 255, 255, .92);
 	box-shadow: var(--td-shadow-1);
 	border-radius: 1.25rem;
 
-	.title-row {
+	.title {
 		gap: .5rem;
 		display: flex;
 		align-items: baseline;
 		justify-content: space-between;
-	}
 
-	h2 {
-		color: #0f172a;
-		margin: 0 0 .875rem 0;
-		font-size: 1rem;
-		font-weight: 700;
-	}
+		h2 {
+			color: #0f172a;
+			margin: 0 0 .875rem 0;
+			font-size: 1rem;
+			font-weight: 700;
+		}
 
-	.caption {
-		color: #94a3b8;
-		font-size: .6875rem;
+		.caption {
+			color: #94a3b8;
+			font-size: .6875rem;
+		}
 	}
 
 	.chart {
 		width: 100%;
 	}
-
-	.state {
-		inset: 3.5rem 0 0 0;
-		display: flex;
-		position: absolute;
-		align-items: center;
-		justify-content: center;
-	}
 }
 
 :global(html.theme-dark) {
diff --git a/src/pages/customer/CustomerDataCharts.vue b/src/pages/customer/CustomerDataCharts.vue
index 1aa6217..83664b6 100644
--- a/src/pages/customer/CustomerDataCharts.vue
+++ b/src/pages/customer/CustomerDataCharts.vue
@@ -2,10 +2,10 @@
 	<div v-can="permissionCodes.stat.read" class="customer-data-charts-page">
 		<div class="header bg-white">
 			<t-input
-				v-model.trim="customerCode"
+				v-model="customerCode"
 				class="customer-search"
+				type="search"
 				borderless
-				clearable
 				placeholder="输入客户编码或姓名"
 				@clear="applyCustomerSearch"
 				@enter="applyCustomerSearch"
@@ -23,44 +23,50 @@
 		</div>
 		<customer-profile-card v-entrance-transition class="customer" :customer="selectedCustomer" />
 		<div class="charts">
+			<t-segmented
+				v-if="selectedCustomer"
+				v-model="chartMode"
+				class="chart-mode"
+				block
+				:options="chartModeOptions"
+				v-entrance-transition="20"
+			/>
 			<customer-order-charts
 				v-entrance-transition="35"
-				v-if="selectedCustomer"
+				v-if="selectedCustomer && chartMode === 'order'"
 				:customer-id="selectedCustomer.id || ''"
 				:date-text-list="chartDateTextList"
 				:store-id="selectedCustomer.storeId"
 			/>
-			<customer-chart-summary
-				v-entrance-transition="70"
-				v-if="selectedCustomer"
-				:customer="selectedCustomer"
-				:month-cursor="monthCursor"
-				:selected-event-id-list="selectedEventIdList"
-			/>
-			<customer-event-record-calendar-section
-				v-entrance-transition="140"
-				v-if="selectedCustomer"
-				v-model="monthCursor"
-				v-model:selected-event-id-list="selectedEventIdList"
-				:customer-id="selectedCustomer.id || ''"
-				:customer-name="selectedCustomer.name"
-				:store-id="selectedCustomer.storeId"
-				@list="toEventRecordList"
-			/>
-			<customer-record-trend-chart
-				v-entrance-transition="210"
-				v-if="selectedCustomer"
-				:customer-id="selectedCustomer.id || ''"
-				:date-text-list="chartDateTextList"
-				:selected-event-id-list="selectedEventIdList"
-			/>
-			<customer-event-structure-chart
-				v-entrance-transition="280"
-				v-if="selectedCustomer"
-				:customer-id="selectedCustomer.id || ''"
-				:date-text-list="monthDateTextList"
-				:selected-event-id-list="selectedEventIdList"
-			/>
+			<template v-else-if="selectedCustomer">
+				<customer-chart-summary
+					v-entrance-transition="70"
+					:customer="selectedCustomer"
+					:month-cursor="monthCursor"
+					:selected-event-id-list="selectedEventIdList"
+				/>
+				<customer-event-record-calendar-section
+					v-entrance-transition="140"
+					v-model="monthCursor"
+					v-model:selected-event-id-list="selectedEventIdList"
+					:customer-id="selectedCustomer.id || ''"
+					:customer-name="selectedCustomer.name"
+					:store-id="selectedCustomer.storeId"
+					@list="toEventRecordList"
+				/>
+				<customer-record-trend-chart
+					v-entrance-transition="210"
+					:customer-id="selectedCustomer.id || ''"
+					:date-text-list="chartDateTextList"
+					:selected-event-id-list="selectedEventIdList"
+				/>
+				<customer-event-structure-chart
+					v-entrance-transition="280"
+					:customer-id="selectedCustomer.id || ''"
+					:date-text-list="monthDateTextList"
+					:selected-event-id-list="selectedEventIdList"
+				/>
+			</template>
 			<customer-selector
 				v-entrance-transition="350"
 				v-model="selectedCustomerId"
@@ -123,6 +129,16 @@ const selectorVisible = ref(false);
 const selectedCustomer = ref<Customer>();
 const selectedEventIdList = ref<string[]>([]);
 
+// ---------- 图表切换 ----------
+
+type ChartMode = "order" | "customer";
+
+const chartMode = ref<ChartMode>("customer");
+const chartModeOptions = [
+	{ value: "customer" as ChartMode, label: "客户分析" },
+	{ value: "order" as ChartMode, label: "订单分析" }
+];
+
 async function loadCustomer(code: string): Promise<void> {
 	const keyword = code.trim();
 	if (!keyword) {
@@ -284,6 +300,10 @@ function getDateEnd(date: Date): Date {
 		padding: 0 1rem;
 		display: flex;
 		flex-direction: column;
+
+		.chart-mode {
+			width: 100%;
+		}
 	}
 }
 
diff --git a/src/pages/customer/component/CustomerConsumptionDailyChart.vue b/src/pages/customer/component/CustomerConsumptionDailyChart.vue
index 188d25a..cd0dac9 100644
--- a/src/pages/customer/component/CustomerConsumptionDailyChart.vue
+++ b/src/pages/customer/component/CustomerConsumptionDailyChart.vue
@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="有效消费趋势"
 		caption="金额已换算为元"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="18rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderConsumptionDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, formatChartYuan, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/customer/component/CustomerOrderCalendarChart.vue b/src/pages/customer/component/CustomerOrderCalendarChart.vue
index 7442a84..04d9aad 100644
--- a/src/pages/customer/component/CustomerOrderCalendarChart.vue
+++ b/src/pages/customer/component/CustomerOrderCalendarChart.vue
@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="订单日历"
 		caption="按下单日期统计"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="18rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderCalendarStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, formatChartYuan, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/customer/component/CustomerOrderCharts.vue b/src/pages/customer/component/CustomerOrderCharts.vue
index 4db0af2..b47e5fe 100644
--- a/src/pages/customer/component/CustomerOrderCharts.vue
+++ b/src/pages/customer/component/CustomerOrderCharts.vue
@@ -1,12 +1,5 @@
 <template>
 	<section class="order-charts">
-		<div class="section-heading">
-			<div>
-				<div class="eyebrow" v-text="'订单经营分析'" />
-				<h2 v-text="'客户订单看板'" />
-			</div>
-			<span v-text="'金额单位：元，数量单位：基础单位'" />
-		</div>
 		<order-daily-chart
 			:date-text-list="dateTextList"
 			:list="dailyList"
diff --git a/src/pages/customer/component/CustomerOrderProductRankChart.vue b/src/pages/customer/component/CustomerOrderProductRankChart.vue
index ee0f7d4..2ca2f90 100644
--- a/src/pages/customer/component/CustomerOrderProductRankChart.vue
+++ b/src/pages/customer/component/CustomerOrderProductRankChart.vue
@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
-		title="客户产品购买排行"
+	<date-range-chart-card
+		title="产品购买排行"
 		caption="基础单位购买及履约进度，前 10"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="20rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoCustomerOrderProductRankView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/customer/component/CustomerOrderSkuRankChart.vue b/src/pages/customer/component/CustomerOrderSkuRankChart.vue
index 1bdce8c..aa655c2 100644
--- a/src/pages/customer/component/CustomerOrderSkuRankChart.vue
+++ b/src/pages/customer/component/CustomerOrderSkuRankChart.vue
@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
-		title="客户 SKU 购买排行"
+	<date-range-chart-card
+		title="SKU 购买排行"
 		caption="基础单位购买及履约进度，前 10"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="20rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoCustomerOrderSkuRankView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/customer/component/CustomerRepeatDailyChart.vue b/src/pages/customer/component/CustomerRepeatDailyChart.vue
index 9469500..209bcc5 100644
--- a/src/pages/customer/component/CustomerRepeatDailyChart.vue
+++ b/src/pages/customer/component/CustomerRepeatDailyChart.vue
@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="复购趋势"
 		caption="缺失日期按 0 展示"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="18rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoCustomerRepeatDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/customer/component/CustomerRepeatIntervalChart.vue b/src/pages/customer/component/CustomerRepeatIntervalChart.vue
index 96be3ff..f9c80cd 100644
--- a/src/pages/customer/component/CustomerRepeatIntervalChart.vue
+++ b/src/pages/customer/component/CustomerRepeatIntervalChart.vue
@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="复购间隔"
 		caption="按间隔天数统计订单数"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="18rem"
+		height="14rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoCustomerRepeatIntervalStatView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/CustomerOrderRankChart.vue b/src/pages/product/component/CustomerOrderRankChart.vue
index c9cae09..648326b 100644
--- a/src/pages/product/component/CustomerOrderRankChart.vue
+++ b/src/pages/product/component/CustomerOrderRankChart.vue
@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="客户净收款排行"
 		caption="排除已取消订单，前 10"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
 		height="17rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoCustomerOrderRankView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, formatChartYuan, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/OrderDailyChart.vue b/src/pages/product/component/OrderDailyChart.vue
index 919c0af..90462d9 100644
--- a/src/pages/product/component/OrderDailyChart.vue
+++ b/src/pages/product/component/OrderDailyChart.vue
@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="订单每日趋势"
 		caption="金额已换算为元"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
-		height="18rem"
+		height="12rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, formatChartYuan, formatQuantity, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 
@@ -80,5 +79,4 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 		]
 	};
 }
-
 </script>
diff --git a/src/pages/product/component/OrderPaymentChart.vue b/src/pages/product/component/OrderPaymentChart.vue
index 67f8b74..cd76f61 100644
--- a/src/pages/product/component/OrderPaymentChart.vue
+++ b/src/pages/product/component/OrderPaymentChart.vue
@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="付款状态分布"
 		caption="当前订单快照"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
 		height="17rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderPaymentStatView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/OrderStatusChart.vue b/src/pages/product/component/OrderStatusChart.vue
index 9829fbc..1a37fec 100644
--- a/src/pages/product/component/OrderStatusChart.vue
+++ b/src/pages/product/component/OrderStatusChart.vue
@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="订单状态分布"
 		caption="当前订单快照"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
 		height="17rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderStatusStatView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/OrderTypeChart.vue b/src/pages/product/component/OrderTypeChart.vue
index 546d74e..cf36ee4 100644
--- a/src/pages/product/component/OrderTypeChart.vue
+++ b/src/pages/product/component/OrderTypeChart.vue
@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="订单类型分布"
 		caption="按订单数量"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
 		height="17rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderTypeStatView } from "@/types/GaoChart";
 import { buildPieChartOption, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/ProductFulfillmentRankChart.vue b/src/pages/product/component/ProductFulfillmentRankChart.vue
index 5e40a0a..5cd5ff0 100644
--- a/src/pages/product/component/ProductFulfillmentRankChart.vue
+++ b/src/pages/product/component/ProductFulfillmentRankChart.vue
@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="履约进度排行"
 		caption="基础单位购买数量的当前履约快照"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
 		height="20rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductFulfillmentRankView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/ProductFulfillmentTrendChart.vue b/src/pages/product/component/ProductFulfillmentTrendChart.vue
index 44d7c62..a7f7bdd 100644
--- a/src/pages/product/component/ProductFulfillmentTrendChart.vue
+++ b/src/pages/product/component/ProductFulfillmentTrendChart.vue
@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="每日履约趋势"
 		caption="基础单位，冲正数量允许为负值"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
 		height="17rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductFulfillmentDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/ProductSalesRankChart.vue b/src/pages/product/component/ProductSalesRankChart.vue
index 057b7ae..3ac301b 100644
--- a/src/pages/product/component/ProductSalesRankChart.vue
+++ b/src/pages/product/component/ProductSalesRankChart.vue
@@ -1,17 +1,16 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="产品销售排行"
 		caption="按基础单位销量取前 10"
 		:option="chartOption"
 		:loading="loading"
-		:has-data="list.length > 0"
 		height="20rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductSalesRankView } from "@/types/GaoChart";
 import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/ProductSalesTrendChart.vue b/src/pages/product/component/ProductSalesTrendChart.vue
index a5b30ca..7d91e5f 100644
--- a/src/pages/product/component/ProductSalesTrendChart.vue
+++ b/src/pages/product/component/ProductSalesTrendChart.vue
@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="产品销售趋势"
 			caption="基础单位，直接产品与套餐权益分开展示"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
 		height="17rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductSalesDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/ProductStockMovementChart.vue b/src/pages/product/component/ProductStockMovementChart.vue
index 3324070..da3c708 100644
--- a/src/pages/product/component/ProductStockMovementChart.vue
+++ b/src/pages/product/component/ProductStockMovementChart.vue
@@ -1,18 +1,17 @@
 <template>
-	<gao-chart-card
+	<date-range-chart-card
 		title="库存变动"
 		caption="预占与释放不计入实际出入库"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
-		:has-data="list.length > 0"
 		height="17rem"
 	/>
 </template>
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
-import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductStockMovementDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
 
diff --git a/src/pages/product/component/chartUtils.ts b/src/pages/product/component/chartUtils.ts
index acdae5b..6aa1994 100644
--- a/src/pages/product/component/chartUtils.ts
+++ b/src/pages/product/component/chartUtils.ts
@@ -7,10 +7,10 @@ export function buildAxisChartOption(labelList: string[]): EChartsOption {
 	return {
 		color: chartColorList,
 		grid: {
-			top: 48,
-			left: 12,
-			right: 12,
-			bottom: 12,
+			top: 58,
+			left: 0,
+			right: 0,
+			bottom: 0,
 			containLabel: true
 		},
 		legend: {
diff --git a/src/pages/store/StoreDataCharts.vue b/src/pages/store/StoreDataCharts.vue
index e0fe640..c5c1721 100644
--- a/src/pages/store/StoreDataCharts.vue
+++ b/src/pages/store/StoreDataCharts.vue
@@ -5,8 +5,9 @@
 		<store-event-record-trend-chart v-entrance-transition="140" :date-text-list="dateTextList" />
 		<store-event-record-number-value-chart v-entrance-transition="210" :date-text-list="dateTextList" />
 		<store-event-structure-chart v-entrance-transition="280" :date-text-list="dateTextList" />
-		<store-customer-growth-chart v-entrance-transition="350" :date-text-list="dateTextList" />
-		<store-customer-gender-chart v-entrance-transition="420" />
+		<store-customer-disease-word-cloud-chart v-entrance-transition="350" />
+		<store-customer-growth-chart v-entrance-transition="420" :date-text-list="dateTextList" />
+		<store-customer-gender-chart v-entrance-transition="490" />
 	</div>
 </template>
 
@@ -15,6 +16,7 @@ import { Time } from "timi-web";
 import StoreChartSummary from "@/pages/store/component/StoreChartSummary.vue";
 import StoreCustomerGenderChart from "@/pages/store/component/StoreCustomerGenderChart.vue";
 import StoreCustomerGrowthChart from "@/pages/store/component/StoreCustomerGrowthChart.vue";
+import StoreCustomerDiseaseWordCloudChart from "@/pages/store/component/StoreCustomerDiseaseWordCloudChart.vue";
 import StoreEventRecordCalendarSection from "@/pages/store/component/StoreEventRecordCalendarSection.vue";
 import StoreEventRecordTrendChart from "@/pages/store/component/StoreEventRecordTrendChart.vue";
 import StoreEventRecordNumberValueChart from "@/pages/store/component/StoreEventRecordNumberValueChart.vue";
diff --git a/src/types/Customer.ts b/src/types/Customer.ts
index 8b13858..1066479 100644
--- a/src/types/Customer.ts
+++ b/src/types/Customer.ts
@@ -64,6 +64,11 @@ export type CustomerGenderStatView = {
 	count?: number;
 };
 
+export type CustomerDiseaseWordView = {
+	word?: string;
+	value?: number;
+};
+
 export type CustomerChartReq = {
 	storeId?: string;
 	customerId: string;