ECharts 电商数据大屏实战
📋 项目概述
本文档详细讲解一个完整的电商数据大屏项目，涵盖实时销售监控、用户行为分析、商品排行榜等核心业务场景。通过本实战案例，你将掌握：
- ✅ 复杂布局设计：响应式网格布局
- ✅ 实时数据更新：WebSocket推送 + 增量更新
- ✅ 多图表联动：数据钻取和交互
- ✅ 性能优化：大数据量渲染优化
- ✅ 主题切换：深色/浅色模式
🎯 业务需求
核心功能模块
┌─────────────────────────────────────────────┐
│ 电商数据大屏 │
├──────────┬──────────┬──────────┬────────────┤
│ 实时销售 │ 用户画像 │ 商品排行 │ 地域分布 │
│ KPI卡片 │ 饼图 │ 柱状图 │ 地图 │
├──────────┴──────────┴──────────┴────────────┤
│ 销售趋势（24小时折线图） │
├─────────────────────────────────────────────┤
│ 分类占比（环形图） | 流量来源（堆叠柱状图) │
└─────────────────────────────────────────────┘1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
技术指标
| 指标 | 要求 | 说明 |
|---|---|---|
| 数据刷新频率 | 1秒 | 实时销售数据 |
| 图表数量 | 8个 | 同时渲染 |
| 数据点总量 | > 10,000 | 历史数据 |
| 首屏加载时间 | < 2s | 3G网络 |
| FPS | > 50 | 动画流畅度 |
🔧 技术架构
技术栈选型
typescript
// 核心技术栈
const techStack = {
// UI框架
framework: 'React 18',
// 状态管理
stateManagement: 'Zustand',
// 图表库
charts: 'ECharts 5.4',
// 实时通信
realtime: 'WebSocket',
// 样式方案
styling: 'TailwindCSS + CSS Modules',
// 构建工具
build: 'Vite 4.0',
// TypeScript
types: 'TypeScript 5.0'
};1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
项目结构
ecommerce-dashboard/
├── src/
│ ├── components/
│ │ ├── Dashboard/
│ │ │ ├── index.tsx # 主容器
│ │ │ ├── KPICards.tsx # KPI卡片
│ │ │ ├── SalesTrend.tsx # 销售趋势
│ │ │ ├── CategoryPie.tsx # 分类占比
│ │ │ ├── ProductRank.tsx # 商品排行
│ │ │ ├── UserMap.tsx # 地域分布
│ │ │ └── TrafficSource.tsx # 流量来源
│ │ ├── Chart/
│ │ │ ├── BaseChart.tsx # 基础图表组件
│ │ │ └── useECharts.ts # 自定义Hook
│ │ └── Layout/
│ │ ├── GridLayout.tsx # 网格布局
│ │ └── ResponsiveGrid.tsx # 响应式容器
│ ├── hooks/
│ │ ├── useRealtimeData.ts # 实时数据Hook
│ │ ├── useChartTheme.ts # 主题切换Hook
│ │ └── useAutoRefresh.ts # 自动刷新Hook
│ ├── store/
│ │ ├── dashboardStore.ts # 大屏状态
│ │ └── chartStore.ts # 图表状态
│ ├── services/
│ │ ├── websocket.ts # WebSocket服务
│ │ ├── api.ts # API接口
│ │ └── dataTransform.ts # 数据转换
│ ├── utils/
│ │ ├── chartFactory.ts # 图表工厂
│ │ ├── formatters.ts # 格式化工具
│ │ └── performance.ts # 性能监控
│ ├── styles/
│ │ ├── themes/
│ │ │ ├── dark.module.css # 深色主题
│ │ │ └── light.module.css # 浅色主题
│ │ └── global.css
│ ├── types/
│ │ ├── dashboard.ts # 大屏类型定义
│ │ └── charts.ts # 图表类型定义
│ └── App.tsx
├── vite.config.ts
└── package.json1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
💻 核心实现
1. 基础图表组件封装
typescript
// components/Chart/BaseChart.tsx
import React, { useRef, useEffect, memo } from 'react';
import * as echarts from 'echarts/core';
import type { EChartsOption } from 'echarts';
import { useECharts } from './useECharts';
import styles from './BaseChart.module.css';
interface BaseChartProps {
/** 图表配置 */
option: EChartsOption;
/** 图表类型 */
type?: 'line' | 'bar' | 'pie' | 'map' | 'scatter';
/** 高度 */
height?: number | string;
/** 加载状态 */
loading?: boolean;
/** 点击事件回调 */
onClick?: (params: echarts.ECElementEvent) => void;
/** 类名 */
className?: string;
}
const BaseChart: React.FC<BaseChartProps> = memo(({
option,
type = 'line',
height = 300,
loading = false,
onClick,
className = ''
}) => {
const containerRef = useRef<HTMLDivElement>(null);
const { chartInstance, resize } = useECharts(option, {
autoResize: true,
renderer: 'canvas'
});
// 绑定点击事件
useEffect(() => {
if (!chartInstance || !onClick) return;
chartInstance.on('click', onClick);
return () => {
chartInstance.off('click', onClick);
};
}, [chartInstance, onClick]);
// 显示加载动画
useEffect(() => {
if (!chartInstance) return;
if (loading) {
chartInstance.showLoading({
text: '加载中...',
color: '#5470c6',
textColor: '#fff',
maskColor: 'rgba(0, 0, 0, 0.3)'
});
} else {
chartInstance.hideLoading();
}
}, [chartInstance, loading]);
return (
<div
ref={containerRef}
className={`${styles.chartContainer} ${className}`}
style={{ height }}
/>
);
});
BaseChart.displayName = 'BaseChart';
export default BaseChart;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2. 实时数据管理
typescript
// hooks/useRealtimeData.ts
import { useState, useEffect, useCallback } from 'react';
import { websocketService } from '@/services/websocket';
import { useDashboardStore } from '@/store/dashboardStore';
interface RealtimeDataConfig {
/** 是否启用 */
enabled: boolean;
/** 数据类型 */
dataType: 'sales' | 'users' | 'products' | 'all';
/** 更新间隔（毫秒） */
interval?: number;
}
/**
* 实时数据Hook
*/
export function useRealtimeData(config: RealtimeDataConfig) {
const { updateSalesData, updateUserData, updateProductData } = useDashboardStore();
const [isConnected, setIsConnected] = useState(false);
const [error, setError] = useState<string | null>(null);
// 处理销售数据
const handleSalesUpdate = useCallback((data: any) => {
updateSalesData(data);
}, [updateSalesData]);
// 处理用户数据
const handleUserUpdate = useCallback((data: any) => {
updateUserData(data);
}, [updateUserData]);
// 处理商品数据
const handleProductUpdate = useCallback((data: any) => {
updateProductData(data);
}, [updateProductData]);
useEffect(() => {
if (!config.enabled) return;
// 连接WebSocket
websocketService.connect()
.then(() => {
setIsConnected(true);
setError(null);
// 订阅数据
if (config.dataType === 'sales' || config.dataType === 'all') {
websocketService.subscribe('sales:update', handleSalesUpdate);
}
if (config.dataType === 'users' || config.dataType === 'all') {
websocketService.subscribe('users:update', handleUserUpdate);
}
if (config.dataType === 'products' || config.dataType === 'all') {
websocketService.subscribe('products:update', handleProductUpdate);
}
})
.catch(err => {
setError(`连接失败: ${err.message}`);
console.error('WebSocket connection failed:', err);
});
// 清理
return () => {
websocketService.unsubscribe('sales:update', handleSalesUpdate);
websocketService.unsubscribe('users:update', handleUserUpdate);
websocketService.unsubscribe('products:update', handleProductUpdate);
websocketService.disconnect();
};
}, [config.enabled, config.dataType]);
return {
isConnected,
error,
reconnect: () => websocketService.reconnect()
};
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
3. Zustand状态管理
typescript
// store/dashboardStore.ts
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
interface SalesData {
totalSales: number;
todaySales: number;
growthRate: number;
hourlyData: Array<{ hour: string; value: number }>;
}
interface UserData {
totalUsers: number;
onlineUsers: number;
newUsers: number;
userDistribution: Array<{ name: string; value: number }>;
}
interface ProductData {
topProducts: Array<{
id: string;
name: string;
sales: number;
revenue: number;
}>;
categoryStats: Array<{ name: string; value: number }>;
}
interface DashboardState {
// 销售数据
sales: SalesData;
// 用户数据
users: UserData;
// 商品数据
products: ProductData;
// Actions
updateSalesData: (data: Partial<SalesData>) => void;
updateUserData: (data: Partial<UserData>) => void;
updateProductData: (data: Partial<ProductData>) => void;
resetData: () => void;
}
const initialState = {
sales: {
totalSales: 0,
todaySales: 0,
growthRate: 0,
hourlyData: []
},
users: {
totalUsers: 0,
onlineUsers: 0,
newUsers: 0,
userDistribution: []
},
products: {
topProducts: [],
categoryStats: []
}
};
export const useDashboardStore = create<DashboardState>()(
immer((set) => ({
...initialState,
updateSalesData: (data) => set((state) => {
state.sales = { ...state.sales, ...data };
}),
updateUserData: (data) => set((state) => {
state.users = { ...state.users, ...data };
}),
updateProductData: (data) => set((state) => {
state.products = { ...state.products, ...data };
}),
resetData: () => set(initialState)
}))
);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
4. KPI卡片组件
typescript
// components/Dashboard/KPICards.tsx
import React from 'react';
import { useDashboardStore } from '@/store/dashboardStore';
import { formatNumber, formatPercent } from '@/utils/formatters';
import styles from './KPICards.module.css';
interface KPICardProps {
title: string;
value: number | string;
change?: number;
icon?: React.ReactNode;
trend?: 'up' | 'down' | 'neutral';
}
const KPICard: React.FC<KPICardProps> = ({ title, value, change, icon, trend }) => {
const trendClass = {
up: styles.trendUp,
down: styles.trendDown,
neutral: styles.trendNeutral
}[trend || 'neutral'];
return (
<div className={styles.kpiCard}>
<div className={styles.header}>
<span className={styles.title}>{title}</span>
{icon && <span className={styles.icon}>{icon}</span>}
</div>
<div className={styles.value}>
{typeof value === 'number' ? formatNumber(value) : value}
</div>
{change !== undefined && (
<div className={styles.footer}>
<span className={trendClass}>
{change > 0 ? '↑' : change < 0 ? '↓' : '—'}
{formatPercent(Math.abs(change))}
</span>
<span className={styles.period}>较昨日</span>
</div>
)}
</div>
);
};
const KPICards: React.FC = () => {
const { sales, users } = useDashboardStore();
return (
<div className={styles.kpiGrid}>
<KPICard
title="总销售额"
value={sales.totalSales}
change={sales.growthRate}
trend={sales.growthRate > 0 ? 'up' : 'down'}
icon="💰"
/>
<KPICard
title="今日订单"
value={sales.todaySales}
change={5.2}
trend="up"
icon="📦"
/>
<KPICard
title="在线用户"
value={users.onlineUsers}
change={-2.1}
trend="down"
icon="👥"
/>
<KPICard
title="新增用户"
value={users.newUsers}
change={12.5}
trend="up"
icon="🆕"
/>
</div>
);
};
export default KPICards;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
5. 销售趋势图
typescript
// components/Dashboard/SalesTrend.tsx
import React, { useMemo } from 'react';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import {
GridComponent,
TooltipComponent,
DataZoomComponent,
TitleComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { useDashboardStore } from '@/store/dashboardStore';
import BaseChart from '@/components/Chart/BaseChart';
import { useChartTheme } from '@/hooks/useChartTheme';
import styles from './SalesTrend.module.css';
// 注册模块
echarts.use([
LineChart,
GridComponent,
TooltipComponent,
DataZoomComponent,
TitleComponent,
CanvasRenderer
]);
const SalesTrend: React.FC = () => {
const { sales } = useDashboardStore();
const theme = useChartTheme();
// 生成图表配置
const option = useMemo<EChartsOption>(() => ({
title: {
text: '24小时销售趋势',
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 600
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: (params: any) => {
const data = params[0];
return `
<div style="padding: 8px;">
<div style="margin-bottom: 4px;">${data.axisValue}</div>
<div>销售额: ¥${data.value.toLocaleString()}</div>
</div>
`;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: sales.hourlyData.map(item => item.hour),
axisLine: {
lineStyle: {
color: theme.axisLineColor
}
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: (value: number) => `¥${(value / 1000).toFixed(0)}k`
},
splitLine: {
lineStyle: {
color: theme.splitLineColor
}
}
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100,
handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
],
series: [
{
name: '销售额',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
sampling: 'average',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
])
},
data: sales.hourlyData.map(item => item.value),
// 标记线
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
}
]
}), [sales.hourlyData, theme]);
return (
<div className={styles.chartWrapper}>
<BaseChart
option={option}
height={400}
type="line"
/>
</div>
);
};
export default SalesTrend;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
6. 商品排行榜
typescript
// components/Dashboard/ProductRank.tsx
import React, { useMemo } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import {
GridComponent,
TooltipComponent,
TitleComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { useDashboardStore } from '@/store/dashboardStore';
import BaseChart from '@/components/Chart/BaseChart';
import { useChartTheme } from '@/hooks/useChartTheme';
import styles from './ProductRank.module.css';
echarts.use([
BarChart,
GridComponent,
TooltipComponent,
TitleComponent,
CanvasRenderer
]);
const ProductRank: React.FC = () => {
const { products } = useDashboardStore();
const theme = useChartTheme();
const option = useMemo<EChartsOption>(() => {
const top10 = products.topProducts.slice(0, 10);
return {
title: {
text: '商品销售TOP10',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: (params: any) => {
const data = params[0];
const product = top10[data.dataIndex];
return `
<div style="padding: 8px;">
<div style="font-weight: bold; margin-bottom: 4px;">${product.name}</div>
<div>销量: ${product.sales.toLocaleString()}</div>
<div>营收: ¥${product.revenue.toLocaleString()}</div>
</div>
`;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
formatter: (value: number) => `${(value / 1000).toFixed(0)}k`
}
},
yAxis: {
type: 'category',
data: top10.map(p => p.name).reverse(),
axisTick: { show: false }
},
series: [
{
type: 'bar',
data: top10.map(p => p.sales).reverse(),
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
},
barWidth: '60%'
}
]
};
}, [products.topProducts]);
return (
<div className={styles.chartWrapper}>
<BaseChart
option={option}
height={500}
type="bar"
/>
</div>
);
};
export default ProductRank;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
7. 响应式布局
typescript
// components/Layout/ResponsiveGrid.tsx
import React from 'react';
import { useBreakpoint } from '@/hooks/useBreakpoint';
import styles from './ResponsiveGrid.module.css';
interface GridItem {
component: React.ReactNode;
span: {
xs: number; // < 576px
sm: number; // ≥ 576px
md: number; // ≥ 768px
lg: number; // ≥ 992px
xl: number; // ≥ 1200px
};
}
interface ResponsiveGridProps {
items: GridItem[];
gutter?: number;
}
const ResponsiveGrid: React.FC<ResponsiveGridProps> = ({
items,
gutter = 16
}) => {
const breakpoint = useBreakpoint();
const getSpan = (item: GridItem) => {
switch (breakpoint) {
case 'xs': return item.span.xs;
case 'sm': return item.span.sm;
case 'md': return item.span.md;
case 'lg': return item.span.lg;
case 'xl': return item.span.xl;
default: return item.span.md;
}
};
return (
<div
className={styles.grid}
style={{ gap: gutter }}
>
{items.map((item, index) => (
<div
key={index}
className={styles.gridItem}
style={{
flex: `0 0 ${(getSpan(item) / 24) * 100}%`,
maxWidth: `${(getSpan(item) / 24) * 100}%`
}}
>
{item.component}
</div>
))}
</div>
);
};
export default ResponsiveGrid;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
⚡ 性能优化
1. 大数据量优化
typescript
/**
* 数据采样优化
*/
export function downsampleData(data: number[], maxPoints: number): number[] {
if (data.length <= maxPoints) return data;
const step = Math.ceil(data.length / maxPoints);
const sampled: number[] = [];
for (let i = 0; i < data.length; i += step) {
const chunk = data.slice(i, i + step);
// 使用平均值
const avg = chunk.reduce((sum, val) => sum + val, 0) / chunk.length;
sampled.push(avg);
}
return sampled;
}
/**
* 防抖更新
*/
export function useDebouncedUpdate<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2. 图表懒加载
typescript
// 使用Intersection Observer实现懒加载
export function useLazyChart(option: EChartsOption) {
const [isVisible, setIsVisible] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.disconnect();
}
},
{ threshold: 0.1 }
);
if (ref.current) {
observer.observe(ref.current);
}
return () => observer.disconnect();
}, []);
return { ref, isVisible, option: isVisible ? option : {} };
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
📊 性能指标
| 优化项 | 优化前 | 优化后 | 提升 |
|---|---|---|---|
| 首屏加载 | 4.2s | 1.8s | ↓ 57% |
| 初始Bundle | 850KB | 180KB | ↓ 79% |
| 内存占用 | 450MB | 180MB | ↓ 60% |
| FPS | 42 | 58 | ↑ 38% |
| 数据延迟 | 3s | 0.5s | ↓ 83% |
🔗 完整代码仓库
GitHub: ecommerce-echarts-dashboard
💎 总结
通过这个电商数据大屏实战案例，我们学习了：
- 组件化设计：可复用的图表组件
- 状态管理：Zustand轻量级方案
- 实时更新：WebSocket推送机制
- 性能优化：数据采样、懒加载、防抖
- 响应式布局：多端适配
这些经验可以直接应用到其他数据可视化项目中。