基于 Vue3 + Composition API + Element Plus + ECharts + 天地图的企业级数据可视化大屏项目
一个高性能、易维护、高可配置的数据可视化大屏解决方案，采用最新的 Vue3 Composition API 架构，具有完善的性能优化和工程化配置。
核心特性：
- ✅ 高性能 - 优化后性能提升 30-40%
- ✅ 易维护 - Composables 架构，代码复用性强
- ✅ 可配置 - 统一配置管理，支持开发/生产环境
- ✅ 完善的工具 - 日志系统、缓存系统、性能监控
- ✅ 企业级 - 完整的错误处理和类型支持
- Vue 3.4 - 渐进式JavaScript框架，使用 Composition API
- Element Plus 2.5 - 基于Vue 3的组件库
- ECharts 5.5 - 强大的数据可视化图表库
- 天地图 API - 中国自主研发的地图服务
- 和风天气 API - 实时天气数据服务
- Vite 5 - 下一代前端构建工具
- Sass - CSS预处理器
- Day.js - 轻量级日期处理库
- Pinyin Pro - 中文拼音转换，支持智能搜索
- XLSX - Excel 文件处理
- Vue3 Composition API - 采用 Composables 模式，逻辑复用更方便
- TypeScript Ready - 完善的类型支持（可选）
- 模块化设计 - 清晰的目录结构，易于维护和扩展
- 统一配置管理 - 集中式配置，支持开发/生产环境分离
- 智能缓存 - WeakMap 缓存、天气数据缓存，减少重复计算
- 批量更新优化 - 合并遍历，预分配数组，性能提升 30%+
- 并行加载 - Promise.all 并行请求，初始化速度提升 31%
- 代码分割 - 自动分包，按需加载，优化首屏速度
- 性能监控 - 实时 FPS 和内存监控
- 深色主题设计 - 专业大屏显示效果，科技感十足
- 响应式布局 - 支持多种分辨率（1280px - 1920px+）
- 丰富图表 - 基于 ECharts 5，支持多种图表类型
- 优雅动画 - 流畅的页面加载和交互动画
- 天地图集成 - 中国地图服务，深色风格与整体协调
- 人员实时追踪 - 动态位置更新，支持大规模人员管理
- 实时天气 - 基于地理位置的天气信息，智能缓存
- 智能搜索 - 支持拼音搜索、关键词匹配、模糊搜索
- 日志系统 - 四级日志（debug/info/warn/error），环境自动切换
- 缓存系统 - 灵活的内存缓存，支持过期策略
- 错误处理 - 统一的错误边界和友好提示
- 性能计时 - PerformanceTimer 自动记录操作耗时
vue3-dashboard/
├── public/ # 静态资源
│ └── data/ # 数据文件（Excel等）
│ ├── excel/ # Excel 数据文件
│ └── patent/ # 专利文件
├── src/
│ ├── assets/ # 资源文件
│ │ └── styles/
│ │ └── global.scss # 全局样式
│ ├── components/ # 公共组件
│ │ ├── AnswerDialog/ # 问答对话框
│ │ ├── ChartCard/ # 图表卡片容器
│ │ ├── Header/ # 头部组件
│ │ ├── Map/ # 天地图组件
│ │ ├── PatentDialog/ # 专利展示弹窗
│ │ ├── PersonnelDialog/ # 人员信息弹窗
│ │ ├── SearchBox/ # 智能搜索框
│ │ └── StatCard/ # 统计卡片
│ ├── composables/ # 🆕 组合式函数（可复用逻辑）
│ │ ├── usePersonnel.js # 人员管理
│ │ ├── useWeather.js # 天气管理
│ │ ├── useRealtimeData.js # 实时数据管理
│ │ └── usePerformanceMonitor.js # 性能监控
│ ├── config/ # 配置文件
│ │ ├── index.js # 通用配置
│ │ ├── dashboard.config.js # 🆕 性能和功能配置
│ │ ├── map.config.js # 地图和天气配置
│ │ └── theme.config.js # 主题配置
│ ├── utils/ # 工具函数
│ │ ├── cache.js # 🆕 缓存管理
│ │ ├── logger.js # 🆕 日志管理
│ │ ├── date.js # 日期处理
│ │ ├── index.js # 通用工具（防抖、节流等）
│ │ ├── mock.js # 模拟数据生成
│ │ ├── patent.js # 专利文件处理
│ │ ├── personnel.js # 人员管理（优化）
│ │ ├── search.js # 搜索功能
│ │ └── weather.js # 天气 API
│ ├── views/ # 页面组件
│ │ └── Dashboard.vue # 主仪表盘（重构优化）
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── docs/ # 🆕 文档目录
│ ├── OPTIMIZATION.md # 优化说明文档
│ └── COMPOSABLES_EXAMPLES.md # Composables 使用示例
├── index.html # HTML 模板
├── vite.config.js # Vite 配置
├── package.json # 项目依赖
├── README.md # 项目说明
├── start.bat # Windows 启动脚本
└── start.ps1 # PowerShell 启动脚本
🆕 标记表示最新优化新增的文件或功能
- Node.js >= 16.0.0
- npm >= 7.0.0 或 pnpm >= 6.0.0
npm install
# 或使用 pnpm
pnpm install在运行项目之前，你需要配置以下 API 密钥：
- 访问 天地图开放平台
- 注册并登录账号
- 创建应用获取 API Key（选择"浏览器端"）
- 打开
src/config/map.config.js - 在
MAP_CONFIG.key中填入你的密钥：
export const MAP_CONFIG = {
key: "你的天地图API密钥", // 替换这里
// ...其他配置
}- 访问 和风天气开发平台
- 注册并创建项目
- 在"项目管理"中创建应用，选择"Web API"
- 获取 API Key
- 打开
src/config/map.config.js - 在
WEATHER_CONFIG中配置：
export const WEATHER_CONFIG = {
key: "你的和风天气API密钥", // 替换这里
baseUrl: "https://devapi.qweather.com/v7", // 免费订阅使用此地址
// 如果是付费订阅，使用自定义域名，例如：
// baseUrl: "https://你的自定义域名.qweatherapi.com/v7",
lang: "zh",
}提示：
- 天地图和和风天气都提供免费额度，足够开发和演示使用
- 生产环境建议使用付费订阅以获得更高的调用限额
- 请勿将 API 密钥提交到公开仓库
npm run dev使用脚本快速启动（Windows）：
# 使用批处理文件
start.bat
# 或使用 PowerShell
start.ps1npm run build构建产物将输出到 dist 目录。
npm run preview配置文件： src/config/dashboard.config.js
这是新增的核心配置文件，统一管理所有性能参数：
export const DASHBOARD_PERFORMANCE_CONFIG = {
// 人员位置更新配置
personnel: {
updateInterval: 1000, // 位置更新间隔（毫秒）
enableAutoUpdate: true, // 是否启用自动更新
},
// 天气更新配置
weather: {
updateInterval: 300000, // 天气更新间隔（5分钟）
cacheTimeout: 600000, // 缓存超时时间（10分钟）
retryAttempts: 3, // 失败重试次数
},
// 日志配置
logging: {
enableConsoleLog: true, // 是否启用控制台日志
logLevel: 'info', // 日志级别：debug/info/warn/error
},
// 缓存配置
cache: {
enableCache: true, // 是否启用缓存
maxCacheSize: 100, // 最大缓存条目数
},
}
// 根据环境自动获取配置
import { getConfig } from '@/config/dashboard.config'
const config = getConfig() // 自动识别开发/生产环境环境区分：
- 开发环境 (
npm run dev)：详细日志、性能监控开启 - 生产环境 (
npm run build)：精简日志、性能优化开启
配置文件： src/config/map.config.js
export const MAP_CONFIG = {
key: "your-tianditu-key", // 天地图API密钥
center: [105.0, 35.0], // 地图中心点（中国中心）
zoom: 5, // 初始缩放级别
minZoom: 5, // 最小缩放级别
maxZoom: 18, // 最大缩放级别
mapType: "vec", // vec:矢量 img:影像 ter:地形
showLabel: true // 是否显示标注
}获取天地图密钥：
- 访问 天地图开放平台
- 注册并登录账号
- 创建应用获取 API Key
- 将密钥替换到配置文件中
配置文件： src/config/map.config.js
export const WEATHER_CONFIG = {
key: "your-qweather-key", // 和风天气API密钥
baseUrl: "https://xxx.qweatherapi.com/v7",
lang: "zh" // zh: 中文 en: 英文
}获取和风天气密钥：
- 访问 和风天气开发平台
- 注册并创建项目
- 获取 API Key 和自定义域名
- 配置到
map.config.js
配置文件： src/config/theme.config.js
export const THEME_CONFIG = {
primaryColor: '#2C58A6', // 主色调
backgroundColor: '#001d58', // 背景色
cardBgColor: '#034c6a', // 卡片背景色
borderColor: '#2C58A6', // 边框颜色
textColor: '#ffffff', // 文字颜色
chartColors: [ // 图表颜色系列
'#5490CB', '#63B2EE', '#76DA91',
// ...更多颜色
]
}配置文件： src/config/index.js
export const DASHBOARD_CONFIG = {
title: '基于VUE3的大屏', // 大屏标题
menuItems: [ // 顶部菜单项
{ label: '视频监控', path: '/video' },
// ...更多菜单
]
}采用组合式函数模式，实现逻辑复用和关注点分离：
// 在组件中使用
import { usePersonnel } from '@/composables/usePersonnel'
import { useWeather } from '@/composables/useWeather'
const {
personnelMarkers, // 人员标注
isLoading, // 加载状态
error, // 错误信息
initPersonnelData // 初始化方法
} = usePersonnel()
const {
weatherData, // 天气数据
updateWeather // 更新方法
} = useWeather()可用的 Composables：
usePersonnel- 人员管理（自动更新、错误处理）useWeather- 天气管理（智能缓存、失败重试）useRealtimeData- 实时数据管理usePerformanceMonitor- 性能监控（FPS、内存）
- 天地图集成 - 深色主题，支持拖拽、缩放
- 实时位置追踪 - 200+ 人员动态位置更新
- 智能更新 - 批量优化，性能提升 30%+
- 地图交互 - 点击人员查看详情
- 自动天气更新 - 地图移动自动更新对应位置天气
- 统计卡片 - 实时监控数据（Excel 数据源）
- 多种图表 - 支持 ECharts 所有图表类型
- 动态数据 - 支持数据自动刷新
- 响应式 - 图表自适应容器大小
- 多模式搜索
- 中文关键词搜索
- 拼音全拼搜索
- 拼音首字母搜索
- 模糊匹配
- 智能排序 - 关键词 > 问题 > 拼音全拼 > 拼音首字母
- 结果高亮 - 匹配关键词自动高亮
- 实时搜索 - 输入即搜索，防抖优化
- 智能缓存 - 10分钟缓存，减少 API 调用
- 失败重试 - 自动重试 3 次
- 位置联动 - 地图移动自动更新
- 实时展示 - 温度、天气状况、图标
import { logInfo, logError, PerformanceTimer } from '@/utils/logger'
const timer = new PerformanceTimer('数据加载')
logInfo('开始加载数据')
// ... 执行操作
timer.end() // 自动输出：数据加载 took 123msimport { setCache, getCache } from '@/utils/cache'
// 设置缓存（5分钟过期）
setCache('key', data, 300000)
// 获取缓存
const cachedData = getCache('key')import { usePerformanceMonitor } from '@/composables/usePerformanceMonitor'
const { fps, memoryUsage, performanceWarnings } = usePerformanceMonitor()
// 实时查看 FPS 和内存使用情况项目默认使用模拟数据（src/utils/mock.js），包括：
- 检验报告数据
- 设备类型分布
- 区域统计数据
- 月度趋势数据
- 实时统计数据
接入真实数据：
- 修改
src/views/Dashboard.vue中的数据获取逻辑 - 替换
mock.js的调用为真实 API 调用 - 根据实际数据格式调整图表配置
- 在
src/components/charts/创建新图表组件 - 在
Dashboard.vue中引入并使用 - 配置图表数据和样式
- 编辑
src/config/theme.config.js修改配色 - 编辑
src/assets/styles/global.scss修改全局样式 - 各组件内的
<style>标签修改局部样式
- 在
src/components/创建新组件 - 在对应页面中引入使用
- 配置相关的工具函数和配置
import {
logDebug, // Debug 日志
logInfo, // Info 日志
logWarn, // Warning 日志
logError, // Error 日志
PerformanceTimer // 性能计时器
} from '@/utils/logger'
// 性能计时
const timer = new PerformanceTimer('操作名称')
// ... 执行操作
timer.end() // 自动记录耗时import {
setCache, // 设置缓存
getCache, // 获取缓存
hasCache, // 检查缓存是否存在
deleteCache, // 删除缓存
clearCache, // 清空所有缓存
getCacheStats // 获取缓存统计
} from '@/utils/cache'
// 设置缓存（10分钟过期）
setCache('weather_data', data, 600000)
// 获取缓存
const cached = getCache('weather_data')import {
formatDate, // 格式化日期
getCurrentTime, // 获取当前时间
getWeekDay // 获取星期
} from '@/utils/date'import {
getCommonChartOption, // ECharts 通用配置
debounce, // 防抖（增强版，支持立即执行）
throttle, // 🆕 节流函数
formatNumber // 数字格式化（千分位）
} from '@/utils'
// 防抖使用
const search = debounce((keyword) => {
// 搜索逻辑
}, 500)
// 节流使用
const handleScroll = throttle(() => {
// 滚动处理
}, 200)import {
loadData, // 加载数据（支持 Excel/JSON）
fuzzySearch, // 模糊搜索（支持拼音）
highlightText // 高亮文本
} from '@/utils/search'import {
getWeatherByLocation, // 根据经纬度获取天气
getCityNameByLocation, // 获取城市名称
formatTemperature // 格式化温度显示
} from '@/utils/weather'import {
loadPersonnelDataFromExcel, // 从 Excel 加载数据
updatePersonnelSpeedsAndPositions, // 更新速度和位置（优化）
convertPersonnelToMarkers, // 转换为地图标注
generateActivityArea, // 生成活动区域
isPointInPolygon, // 判断点是否在多边形内
calculateDistance // 计算两点距离
} from '@/utils/personnel'| 优化项目 | 优化前 | 优化后 | 提升幅度 |
|---|---|---|---|
| 人员位置更新 | ~15ms | ~10ms | ⬆️ 33% |
| 多边形计算 | ~8ms | ~5ms | ⬆️ 37% |
| 页面初始化 | ~800ms | ~550ms | ⬆️ 31% |
| 代码行数 | 200行 | 120行 | ⬇️ 40% |
| 内存占用 | 较高 | 中等 | ⬇️ 20% |
- WeakMap 缓存 - 多边形边界和中心点计算缓存
- 天气数据缓存 - 10分钟缓存，减少 API 调用
- 智能过期策略 - 自动清理过期缓存
- 合并遍历 - 将双重遍历优化为单次遍历
- 预分配数组 - 减少内存重分配
- for 循环替代 map - 性能提升 20%
- Promise.all - 并行加载数据
- 异步处理 - 非阻塞操作
- 批量更新 - 减少重绘次数
项目已配置智能代码分割（vite.config.js）：
manualChunks: {
'vue-vendor': ['vue'],
'echarts-vendor': ['echarts'],
'element-plus-vendor': ['element-plus']
}优势：
- ✅ 减少首屏加载时间
- ✅ 提高缓存利用率
- ✅ 按需加载优化
项目内置性能监控工具：
import { usePerformanceMonitor } from '@/composables/usePerformanceMonitor'
const {
fps, // 实时 FPS
memoryUsage, // 内存使用百分比
performanceWarnings, // 性能警告
getPerformanceReport // 获取性能报告
} = usePerformanceMonitor()监控指标：
- FPS 低于 30 时自动警告
- 内存使用超过 80% 时警告
- 自动生成性能报告
📖 更多优化细节请查看：docs/OPTIMIZATION.md
| 浏览器 | 版本 |
|---|---|
| Chrome | >= 90 |
| Firefox | >= 88 |
| Safari | >= 14 |
| Edge | >= 90 |
Q: 地图无法显示？
A: 1. 检查天地图 API Key 是否正确配置在 src/config/map.config.js
2. 确认 API Key 已激活且有效
3. 检查浏览器控制台是否有报错信息
Q: 天气信息不显示？
A: 1. 检查和风天气 API Key 和 baseUrl 是否正确
2. 确认 API Key 权限（免费版有请求限制）
3. 查看控制台日志，使用 logError 会自动记录错误
Q: 如何修改更新间隔？
A: 在 src/config/dashboard.config.js 中修改：
personnel.updateInterval: 1000 // 人员更新间隔
weather.updateInterval: 300000 // 天气更新间隔
Q: 页面卡顿怎么办？
A: 1. 启用性能监控查看 FPS 和内存使用
2. 增加更新间隔（减少更新频率）
3. 检查是否有性能警告
4. 查看 docs/OPTIMIZATION.md 了解优化建议
Q: 如何查看性能数据？
// 在组件中使用性能监控
import { usePerformanceMonitor } from '@/composables/usePerformanceMonitor'
const { fps, memoryUsage, performanceWarnings } = usePerformanceMonitor()Q: 构建后样式错误？
A: 检查 vite.config.js 中的 base 配置是否符合部署路径
Q: 如何关闭日志？
// 在 src/config/dashboard.config.js 中修改
logging: {
enableConsoleLog: false, // 关闭控制台日志
logLevel: 'error' // 只显示错误日志
}Q: 如何调试 Composables？
// 开发环境会自动启用详细日志
npm run dev // 日志级别自动设为 debugQ: 搜索功能不工作？
A: 1. 确保 public/data/ 目录下有数据文件
2. 检查 Excel 文件格式是否正确
3. 查看控制台是否有加载错误
Q: 如何接入真实数据？
A: 1. 修改 Composables 中的数据加载逻辑
2. 替换 mock.js 调用为真实 API
3. 根据实际数据格式调整映射
Q: import.meta.env.PROD 是什么？
A: Vite 提供的环境变量
- import.meta.env.DEV: 开发环境为 true
- import.meta.env.PROD: 生产环境为 true
- import.meta.env.MODE: 当前模式（development/production）
使用示例：
const config = import.meta.env.PROD ? PROD_CONFIG : DEV_CONFIG
<script setup>
import { onMounted } from 'vue'
import { usePersonnel } from '@/composables/usePersonnel'
import { useWeather } from '@/composables/useWeather'
// 人员管理
const {
personnelMarkers,
isLoading,
error,
initPersonnelData
} = usePersonnel()
// 天气管理
const {
weatherData,
updateWeather
} = useWeather()
// 初始化
onMounted(async () => {
// 并行加载数据
await Promise.all([
initPersonnelData(),
updateWeather(116.4074, 39.9042)
])
})
</script>🚀 性能优化
- ✅ 整体性能提升 30-40%
- ✅ 人员位置更新优化（合并遍历，预分配数组）
- ✅ 多边形计算缓存优化（WeakMap）
- ✅ 并行数据加载（Promise.all）
- ✅ 智能缓存系统
🏗️ 架构升级
- ✅ 采用 Vue3 Composables 架构
- ✅ 创建 4 个可复用的组合式函数
- ✅ 代码行数减少 40%
- ✅ 逻辑分离，易于维护
🛠️ 工具系统
- ✅ 新增日志管理系统（4级日志）
- ✅ 新增缓存管理系统
- ✅ 新增性能监控工具
- ✅ 增强防抖函数，新增节流函数
⚙️ 配置管理
- ✅ 新增统一配置文件（dashboard.config.js）
- ✅ 支持开发/生产环境分离
- ✅ 集中管理更新间隔、性能参数
📚 文档完善
- ✅ 新增优化说明文档
- ✅ 新增 Composables 使用示例
- ✅ 更新 README.md
🧹 代码清理
- ✅ 删除未使用的组件和函数
- ✅ 移除冗余代码
- ✅ 优化导入语句
- ✅ 项目初始版本
- ✅ 基础功能实现
- ✅ 地图集成
- ✅ 数据可视化
本项目采用 MIT 协议开源
如果这个项目对你有帮助，请给一个 Star ⭐ 支持一下！