From fdd158306bf6dc3584f5110a385323f4a8dfb463 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期三, 02 九月 2026 14:25:10 +0800
Subject: [PATCH] feat(wms): 重构仓库管理系统并优化图表显示
---
src/views/dashboard/bagCodeHome/chart-options.ts | 72 ++++++++++++++++++++++++++++++++---
1 files changed, 65 insertions(+), 7 deletions(-)
diff --git a/src/views/dashboard/bagCodeHome/chart-options.ts b/src/views/dashboard/bagCodeHome/chart-options.ts
index 045568b..a9c4cf2 100644
--- a/src/views/dashboard/bagCodeHome/chart-options.ts
+++ b/src/views/dashboard/bagCodeHome/chart-options.ts
@@ -1,5 +1,16 @@
import type { EChartsOption } from '@vben/plugins/echarts';
+/** 鍐滀笟涓婚锛氱繝缁夸富鑹诧紙瀵归綈鐧诲綍椤碉紝娴呰壊鐜荤拑鐗堬級 */
+export const AGRI_GREEN = '#10b981';
+export const AGRI_GREEN_LIGHT = '#34d399';
+export const AGRI_GREEN_PALE = '#6ee7b7';
+export const AGRI_TEXT = '#134e4a';
+export const AGRI_TEXT_MUTED = 'rgba(15, 78, 60, 0.62)';
+export const AGRI_SPLIT = 'rgba(16, 185, 129, 0.18)';
+
+/** 娣卞簳閫氱敤鏂囨湰鏍峰紡 */
+const darkText: NonNullable<EChartsOption['textStyle']> = { color: AGRI_TEXT };
+
/** 琚嬬爜鐢熸垚瓒嬪娍鏌辩姸鍥鹃厤缃� */
export function getBagCodeTrendChartOptions(
dates: string[],
@@ -7,19 +18,31 @@
): EChartsOption {
return {
grid: { bottom: 40, left: 50, right: 20, top: 20 },
- legend: { bottom: 0, data: ['琚嬬爜鐢熸垚閲�'] },
+ legend: { bottom: 0, data: ['琚嬬爜鐢熸垚閲�'], textStyle: { color: AGRI_TEXT_MUTED } },
series: [
{
barMaxWidth: 32,
data: counts,
- itemStyle: { borderRadius: 4, color: '#409EFF' },
+ itemStyle: { borderRadius: 4, color: AGRI_GREEN },
name: '琚嬬爜鐢熸垚閲�',
type: 'bar',
},
],
+ textStyle: darkText,
tooltip: { axisPointer: { type: 'shadow' }, trigger: 'axis' },
- xAxis: { axisTick: { show: false }, data: dates, type: 'category' },
- yAxis: { minInterval: 1, type: 'value' },
+ xAxis: {
+ axisLine: { lineStyle: { color: AGRI_SPLIT } },
+ axisLabel: { color: AGRI_TEXT_MUTED },
+ axisTick: { show: false },
+ data: dates,
+ type: 'category',
+ },
+ yAxis: {
+ minInterval: 1,
+ splitLine: { lineStyle: { color: AGRI_SPLIT } },
+ axisLabel: { color: AGRI_TEXT_MUTED },
+ type: 'value',
+ },
};
}
@@ -28,18 +51,53 @@
data: Array<{ itemStyle: { color: string }; name: string; value: number }>,
): EChartsOption {
return {
- legend: { bottom: 0, type: 'scroll' },
+ legend: { bottom: 0, textStyle: { color: AGRI_TEXT_MUTED }, type: 'scroll' },
series: [
{
avoidLabelOverlap: true,
data,
emphasis: { label: { fontSize: 14, fontWeight: 'bold', show: true } },
- itemStyle: { borderColor: '#fff', borderRadius: 6, borderWidth: 2 },
- label: { formatter: '{b}\n{c}', show: true },
+ itemStyle: { borderColor: '#ffffff', borderRadius: 6, borderWidth: 2 },
+ label: { color: AGRI_TEXT, formatter: '{b}\n{c}', show: true },
radius: ['40%', '70%'],
type: 'pie',
},
],
+ textStyle: darkText,
tooltip: { formatter: '{b}: {c} ({d}%)', trigger: 'item' },
};
}
+
+/** 娑堣垂鑰呮壂鐮佸湴鍖哄垎甯冩í鍚戞煴鐘跺浘閰嶇疆 */
+export function getRegionBarChartOptions(
+ data: Array<{ name: string; count: number }>,
+): EChartsOption {
+ const sorted = [...data].sort((a, b) => b.count - a.count);
+ return {
+ grid: { bottom: 20, left: 16, right: 40, top: 20, containLabel: true },
+ series: [
+ {
+ barMaxWidth: 20,
+ data: sorted.map((d) => d.count),
+ itemStyle: { borderRadius: 4, color: AGRI_GREEN },
+ name: '鎵爜娆℃暟',
+ type: 'bar',
+ },
+ ],
+ textStyle: darkText,
+ tooltip: { axisPointer: { type: 'shadow' }, trigger: 'axis' },
+ xAxis: {
+ axisLabel: { color: AGRI_TEXT_MUTED },
+ axisLine: { lineStyle: { color: AGRI_SPLIT } },
+ splitLine: { lineStyle: { color: AGRI_SPLIT } },
+ type: 'value',
+ },
+ yAxis: {
+ axisLabel: { color: AGRI_TEXT },
+ axisLine: { lineStyle: { color: AGRI_SPLIT } },
+ data: sorted.map((d) => d.name),
+ type: 'category',
+ inverse: true,
+ },
+ };
+}
--
Gitblit v1.9.3