# 可视化分析 **Repository Path**: xiang-qian/visual-analysis ## Basic Information - **Project Name**: 可视化分析 - **Description**: 该项目基于Vue3框架编写，使用hooks写法抽离了部分逻辑，使得代码结构更加清晰；同时使用TypeScript进行类型约束，减少未知错误发生，可以大胆对代码逻辑进行修改；并使用页面懒加载、动态组件注册，来提升页面响应速度；考虑到代码复用性和可读性，对工具类进行封装，包括由路由、存储、文件处理、主题和各种组件等。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2023-02-22 - **Last Updated**: 2023-02-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ![Demo](https://s31.aconvert.com/convert/p3r68-cdx67/bziky-e9rtf.gif) #### 技术总结 - 框架：基于Vue3框架编写，使用hooks写法抽离部分逻辑，使得代码结构更清晰 - 类型：使用TypeScript进行类型约束，减少未知错误发生概率，可以放心修改逻辑内容 - 性能：使用页面懒加载、组件动态注册、数据滚动方式，提升页面渲染速度。 - 存储：拥有本地记忆，部分配置采用storage存储本地，提升使用体验。 - 封装：进行了详细的工具类封装，比如有：路由、存储、加解密、文件处理、主题和组件等 #### 主要技术栈 - Vue3 - Vite（2.9.x) - ECharts（5.3.x) - TypeScript4（4.6.x) - NaiveUI（2.27.x) - Pinia（2.0.x) ![image-20220708031221524](C:\Users\wangy\AppData\Roaming\Typora\typora-user-images\image-20220708031221524.png) 红框内容是项目代码目录，就以src目录下内容以及实际功能进行划分。 - - API、路由、工具的设计，编写（也就是包api和router和utils) - 项目中枚举类型以及项目组件的设计、编写（也就是包enum和components） - 项目中存储部分的设计、编写，使得具有存储记忆功能，部分采用storage存储（也就是包store） - 项目中视图的编写，包括表格、异常、登录这三部分（也就是包views（其中的chart和exception和login)） - 项目中视图的编写，包括预览、项目、重定向（也就是包views（其中的preview、project和redirect）） 全局介绍： 该项目基于Vue3框架编写，使用hooks写法抽离了部分逻辑，使得代码结构更加清晰；同时使用TypeScript进行类型约束，减少未知错误发生，可以大胆对代码逻辑进行修改；并使用页面懒加载、动态组件注册，来提升页面响应速度；考虑到代码复用性和可读性，对工具类进行封装，包括由路由、存储、文件处理、主题和各种组件等。 页面功能介绍： - 新建项目 - 查阅所有已建项目 - 模板设置 image-20220729124728771 对于一个项目具备以下功能： - 发布 - 预览 - 取消发布 - 删除 - 编辑修改 - 导入/导出 最主要的就是项目的编辑修改（也可以新建项目，进行编辑）： - 组件包括有：图表（柱状图、饼图、折线图、地图）、信息（文本、标题）、列表（轮播列表、表格、滚动排名列表）和其他小组件（边框和装饰） - 选定上述组件后，拖拽到中间面板，然后可以，打开详细设置，对所添加的组件进行详细设置，包括定制化、动画效果以及数据操作。（内容很多，答辩时可以进行演示操作，更直观） 此外，还包括如下（系统设置部分）： - 对系统语言的设置（中文/英文切换） - 系统主题颜色的选择 - 主题的选择