基于Vue+Echarts+koa的数据可视化项目

前言

这个项目是跟着b站视频一步步理解消化最后复现出来的,学着做这个项目本意是为了熟悉Vue在实际生产的使用,但学习过程中也顺带了解了一点Echarts


整体效果:


这个项目分了六大板块(每个板块对应一个组件),每个板块都是独立从后台(后台用的node下的koa)获取数据,并且都可以放大至全屏,每个板块及项目整体页面都适配了两种主题


左边的图标可以一键切换主题,右边的时间是真实时间

地区销量曲线图的全屏效果:


点击箭头并切换展示不同的数据:


可以点击选择指定数据展示与否(灰色代表未选中):


鼠标悬停以查看详细数据:


商家分布地图全屏效果:


可以点击选择雷达图展示与否(灰色代表未选中):


雷达图细节:


点击某个省份放大(双击返回):


热销饼图全屏效果:


可点击选择数据展示与否(灰色代表未选中):


一共三组数据,点击左右箭头切换: 


鼠标悬停查看详细数据:


商家销售排行柱形图全屏效果:


随时间自动切换排行数据


鼠标悬停停止切换并查看详细数据:


地区销售排行全屏效果:


随时间自动切换展示数据:


鼠标悬停查看详细数据并暂停自动切换:


销售库存图全屏效果:


随时间自动切换(悬停暂停):


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容