前言概述
在当今数据驱动的时代，高效、直观的数据可视化展示已成为企业决策、城市管理、行业分析等领域的核心需求。Avue Data 作为一个基于 Vue 3、Vite、Element Plus 和 Avue 等前沿技术构建的大屏可视化开源项目，应运而生，旨在为用户提供一套功能强大、易于扩展且灵活定制的数据可视化解决方案。
项目介绍
Avue Data 是一个高效、灵活的大屏可视化开源项目，它集成了 Vue 3、Vite、Element Plus 和 Avue 等前沿技术，为用户提供了一站式的数据可视化解决方案。该项目不仅支持大屏列表管理、可视化编辑、页面预览等基础功能，还提供了配置导入导出和本地数据模拟等高级特性，非常适合用于数据可视化页面的快速搭建、二次开发以及前端工程学习。
应用场景
Avue Data 广泛应用于各类需要数据可视化展示的场景，包括但不限于：
企业数据监控中心：实时展示企业运营数据，如销售额、用户活跃度、系统性能指标等。 智慧城市管理：用于城市交通、环境监测、公共安全等领域的实时数据展示与分析。 金融行业分析：展示股票行情、交易数据、风险评估等关键信息，助力决策分析。 教育行业数据看板：呈现学生成绩、课程参与度、教学质量评估等教育数据。
功能模块
大屏项目列表管理
功能描述：支持大屏项目的创建、复制、删除、导入和导出操作，方便用户对多个大屏项目进行集中管理。 特点：提供直观的项目列表视图，支持快速搜索和筛选，提升项目管理效率。
可视化大屏编辑器
功能描述：内置丰富的可视化组件和图表库，用户可以通过拖拽方式轻松构建大屏页面，无需编写复杂代码。 特点：支持实时预览编辑效果，提供灵活的布局调整选项，满足个性化定制需求。
大屏预览页面
功能描述：提供大屏页面的完整预览功能，支持在不同设备和分辨率下查看页面效果。 特点：预览页面与实际展示效果一致，确保用户能够准确评估大屏页面的最终呈现效果。
主题切换和基础布局
功能描述：支持多种主题切换和基础布局调整，用户可以根据实际需求选择合适的主题和布局方案。 特点：提供丰富的主题样式和布局模板，降低用户的设计成本和时间成本。
本地mock数据与浏览器localStorage持久化
功能描述：项目内置本地mock数据模拟功能，支持在无后端接口的情况下进行前端开发和测试。同时，利用浏览器localStorage实现数据的持久化存储。 特点：无需依赖后端服务即可进行前端开发，提高开发效率；数据持久化存储确保用户数据的连续性和稳定性。
项目技术栈
Avue Data 项目采用了以下先进的技术栈：
前端框架：Vue 3，提供了响应式数据绑定和组件化开发能力。 构建工具：Vite，基于 ESModule 的快速构建工具，显著提升开发体验和构建速度。 UI组件库：Element Plus，提供了一套丰富、美观的 UI 组件，加速界面开发。 可视化库：Avue，基于 Vue 的可视化组件库，支持多种图表类型和可视化效果。 状态管理：Vue Router，用于管理前端路由跳转和状态。 数据请求：Axios，用于处理 HTTP 请求，支持请求拦截和响应拦截。 数据模拟：MockJS，用于生成模拟数据，支持在开发阶段模拟后端接口返回的数据。 代码编辑器：Monaco Editor，提供强大的代码编辑和调试功能，支持多种编程语言。 数据处理与导出：ExcelJS / xlsx / jsPDF，用于处理 Excel 和 PDF 等格式的数据导出。
目录结构
src/
api/ 接口请求模块
echart/ 可视化组件与图表能力
icons/ 图标资源
mock/ 本地 mock 数据
option/ 组件配置项
page/ 页面模块
styles/ 全局样式
utils/ 工具函数
axios.js 请求适配封装
main.js 应用入口
router.js 路由配置
public/ 静态资源与运行时配置
vite/ Vite 插件配置
docker/ Docker 相关配置
功能演示
开源地址
https://gitee.com/smallweigit/avue-data
