前言
这个项目是跟着b站视频一步步理解消化最后复现出来的,学着做这个项目本意是为了熟悉Vue在实际生产的使用,但学习过程中也顺带了解了一点Echarts
整体效果:
这个项目分了六大板块(每个板块对应一个组件),每个板块都是独立从后台(后台用的node下的koa)获取数据,并且都可以放大至全屏,每个板块及项目整体页面都适配了两种主题
左边的图标可以一键切换主题,右边的时间是真实时间
地区销量曲线图的全屏效果:
点击箭头并切换展示不同的数据:
可以点击选择指定数据展示与否(灰色代表未选中):
鼠标悬停以查看详细数据:
商家分布地图全屏效果:
可以点击选择雷达图展示与否(灰色代表未选中):
雷达图细节:
点击某个省份放大(双击返回):
热销饼图全屏效果:
可点击选择数据展示与否(灰色代表未选中):
一共三组数据,点击左右箭头切换:
鼠标悬停查看详细数据:
商家销售排行柱形图全屏效果:
随时间自动切换排行数据
鼠标悬停停止切换并查看详细数据:
地区销售排行全屏效果:
随时间自动切换展示数据:
鼠标悬停查看详细数据并暂停自动切换:
销售库存图全屏效果:
随时间自动切换(悬停暂停):