📊 数据可视化
数据可视化概述
数据可视化是管理后台的重要组成部分，通过图表直观展示数据趋势、分布和关系，帮助管理者快速做出决策。
常用图表库对比
| 图表库 | 特点 | 适用场景 |
|---|---|---|
| ECharts | 百度出品、功能强大、文档完善 | 复杂图表、大数据量 |
| AntV | 蚂蚁金服、G2/G6 系列、语法优雅 | 统计分析、关系图 |
| Chart.js | 轻量简单、易上手 | 简单图表、快速开发 |
| Recharts | React 专用、声明式 API | React 项目 |
| Vue-ECharts | ECharts 的 Vue 封装 | Vue 项目 |
管理后台常用图表
| 图表类型 | 用途 | 示例场景 |
|---|---|---|
| 折线图 | 展示趋势变化 | 销售趋势、用户增长 |
| 柱状图 | 对比数据大小 | 各区域销售额、产品排名 |
| 饼图 | 展示占比分布 | 用户类型分布、订单状态 |
| 面积图 | 展示趋势和占比 | 多渠道流量占比 |
| 雷达图 | 多维度对比 | 用户画像、能力评估 |
| 漏斗图 | 展示转化流程 | 销售漏斗、转化分析 |
| 仪表盘 | 展示单一指标 | 完成率、进度展示 |
| 热力图 | 展示密度分布 | 用户活跃时间、地域分布 |
数据大屏
数据大屏是管理后台的特殊形式，用于实时监控和展示关键指标。
大屏特点
- 全屏展示、视觉冲击力强
- 实时数据更新
- 多图表组合
- 自适应不同分辨率
- 深色主题为主
大屏适配方案
// scale 缩放方案
const adaptScreen() => {
const targetWidth = 1920;
const targetHeight = 1080;
const scale = Math.min(
window.innerWidth / targetWidth,
window.innerHeight / targetHeight
);
document.body.style.transform = `scale(${scale})`;
document.body.style.transformOrigin = 'left top';
};
性能优化
- ✅ 数据采样：大数据量时进行采样处理
- ✅ 按需加载：图表进入视口再渲染
- ✅ 防抖节流：窗口 resize 时优化
- ✅ 缓存数据：避免重复请求
- ✅ 虚拟滚动：长列表使用虚拟滚动