vue2.x 实现数据可视化大屏(可交互气泡地图、数字滚动、表格滚动、列表轮播、饼图轮播、圆环图)
关注公众号: 微信搜索 `前端工具人 ; 收货更多的干货
一、效果图
由于屏幕录制的原因吧。有点卡顿,实际项目不卡顿 加载视频可能有点慢, 可放大查看
...
二、开篇
- 个人推荐可视化插件:很强大的阿里开源 antv(G2、G6、F2、L7) 系列,百度图表echarts 和 地图mapv, 大屏装饰 DataV, D3.js、three.js
- 大屏数据可视化需求说难挺简单的,说简单挺难的;我认为
选对可视化插件
可以说成功了一半;不过选型期间往往挺废时间的,因为还要不断的测试看符不符合需求; - 本文分享介绍我使用
vue2.x
开发大屏数据可视化需求的一些套路
及常用插件
- 觉得对各位猿友有用的,
博客点个赞
;github
点个star
;谢谢 - github地址
三、项目功能介绍
- 1)由于真是数据来源于登录过后的后台接口、这里把接口部分去了。数据本地保存了
- 2)可交互气泡地图 (使用的是阿里开源的 antvL7 )
- 3)自定义数字滚动器、数据圆环
- 4)表格、列表滚动(自定义了部分)(DataV)
- 5)饼图、圆环图(使用的是百度 echarts)
四、项目源码
- 在这就没对这些需求功能做代码细分展示 (
说实在的代码没什么亮点、只是作为分享
) - 请移步点击 github 文章 查源码
五、结语
以上为个人实际项目开发总结, 有问题欢迎留言一起交流学习