项目地址:大数据可视化面板 ,有需要的可以点个星星~
页面效果:
一、项目描述
- 基于
Vue3
+TypeScript
+Eachrts
+vue3-seamless-scroll
完成,使用setup组合API+TS写法。 - 屏幕尺寸比例:1920*1080,其他大小比例缩放
- 本项目安装的ecahrts版本为5.3.3,引入时为组件引入,使用方法请参考官方文档和前几篇文章。
- 项目环境:Vite、Node、Less、Echarts
友情连接:
二、目录介绍
只包括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的一个个人作品,如要作为基础模板,可按自需更改,欢迎评论交流!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。