vue2.x 实现数据可视化大屏(可交互气泡地图、数字滚动、表格滚动、列表轮播、饼图轮播、圆环图)

原文: github文章 掘金文章

关注公众号: 微信搜索 `前端工具人 ; 收货更多的干货

一、效果图

由于屏幕录制的原因吧。有点卡顿,实际项目不卡顿 加载视频可能有点慢, 可放大查看...

二、开篇

  • 个人推荐可视化插件:很强大的阿里开源 antv(G2、G6、F2、L7) 系列,百度图表echarts地图mapv, 大屏装饰 DataV, D3.jsthree.js
  • 大屏数据可视化需求说难挺简单的,说简单挺难的;我认为选对可视化插件可以说成功了一半;不过选型期间往往挺废时间的,因为还要不断的测试看符不符合需求;
  • 本文分享介绍我使用vue2.x 开发大屏数据可视化需求的一些套路常用插件
  • 觉得对各位猿友有用的,博客点个赞github点个star;谢谢
  • github地址

三、项目功能介绍

  • 1)由于真是数据来源于登录过后的后台接口、这里把接口部分去了。数据本地保存了
  • 2)可交互气泡地图 (使用的是阿里开源的 antvL7 )
  • 3)自定义数字滚动器、数据圆环
  • 4)表格、列表滚动(自定义了部分)(DataV
  • 5)饼图、圆环图(使用的是百度 echarts

四、项目源码

  • 在这就没对这些需求功能做代码细分展示 (说实在的代码没什么亮点、只是作为分享
  • 请移步点击 github 文章 查源码

五、结语

以上为个人实际项目开发总结, 有问题欢迎留言一起交流学习

posted @ 2020-11-04 16:31  会写代码的赖先生  阅读(5897)  评论(0编辑  收藏  举报