重学了新版Echarts，一个基于JavaScript的开源可视化图表库，收集参考了很多网上资料，最终选择电商平台作为练手项目。此篇涉及技术知识点有：Vue全家桶、WebSocket前后端数据推送、后端框架Koa2、Echarts新版图表组件（折线图、柱状图、饼图、地图、散点图），还支持主题切换, 展示酷炫的图表效果，同时也能够支持大屏和小屏的切换，保证了图表在不同屏幕上呈现的效果。本项目涵盖功能比较齐全，适合进阶数据可视化大屏前端开发的小伙伴。如果觉得不错的话，请大大们给个:heart:star，也欢迎大家一起交流学习。
│ package.json // npm包管理所需模块及配置信息
│ vue.config.js // webpack配置
├─public
│ favicon.ico // 图标
│ index.html // 入口html文件
│ static // 静态资源文件夹
└─src
│ App.vue // 根组件
│ main.js // 程序入口文件
├─assets // 存放公共样式、字体、图片文件夹
├─components
│ Hot.vue // 热销商品组件
│ Map.vue // 商家分布组件
│ Rank.vue // 销量排行组件
│ Seller.vue // 商家销售组件
│ Stock.vue // 库存销量组件
│ Trend.vue // 销量趋势组件
├─router
│ index.js // 单页面路由注册组件
├─store
│ index.js // 状态管理仓库入口文件
├─utils
│ map_utils.js // 地图省份中英转换工具方法
│ socket_service.js // 定义全局socket类实例化单例模式
│ theme_utils.js // 主题工具方法
└─views
hotPage.vue // 热销商品界面
mapPage.vue // 商家分布界面
rankPage.vue // 销量排行界面
screenPage.vue // 组件合并界面
sellerPage.vue // 商家销售界面
stockPage.vue // 库存销量界面
trendPage.vue // 销量趋势界面
- vue-cli 4.x
- echarts 5
- axios
- webpack
- less
- WebSocket
- 折线图
- 饼图
- 柱状图
- 实时数据
- 地图和散点图
- 主题切换
- 全屏显示
- 联动效果
整理汇总一系列数据可视化大屏项目资源从入门、实战、进阶到全栈
git clone https://github.com/jackchen0120/EC-Platform-Monitor.git
cd EC-Platform-Monitor
npm install 或 yarn
npm run serve
运行之后，访问地址：http://localhost:8999
npm run build
欢迎关注个人公众号：懒人码农，后台回复“大屏”即可获取更多资源及思维导图
