Vue3大数据大屏可视化TS+Echarts

项目地址：大数据可视化面板 ，有需要的可以点个星星~

页面效果：

一、项目描述

• 基于Vue3+TypeScript+Eachrts+vue3-seamless-scroll完成，使用setup组合API+TS写法。
• 屏幕尺寸比例：1920*1080，其他大小比例缩放
• 本项目安装的ecahrts版本为5.3.3，引入时为组件引入，使用方法请参考官方文档和前几篇文章。
• 项目环境：Vite、Node、Less、Echarts

友情连接：

1. Vite官方文档
2. Vue3官方文档
3. Echart 官方文档
4. vue3-seamless-scroll项目地址

二、目录介绍

只包括src目录下：

文件	说明
assets	项目静态资源文件目录
components	封装的公共组件
pages	页面组件，按照主区域命名
router	路由配置
main.ts	主目录文件，引入注册、自定义组件
vite-env.d.ts	全局类型声明文件

三、项目介绍

项目安装

npm install

项目运行

npm run dev

浏览器全屏查看请按F11

屏幕适配

本项目使用css3：scale缩放方案，缩放比例为1920px*1080px，适配代码在App.vue中。

修改图表样式

可按照官方工具自行适配：ECharts 官方示例。

后续优化

• 图表组件复用封装
• 动态数据封装
• mock.js数据模拟

四、说明

此项目为以Vue3+Echarts的一个个人作品，如要作为基础模板，可按自需更改，欢迎评论交流！