基于JavaScript的开源可视化图表库

# 前言 重学了新版Echarts，一个基于JavaScript的开源可视化图表库，收集参考了很多网上资料，最终选择电商平台作为练手项目。此篇涉及技术知识点有：Vue全家桶、WebSocket前后端数据推送、后端框架Koa2、Echarts新版图表组件（折线图、柱状图、饼图、地图、散点图），还支持主题切换, 展示酷炫的图表效果，同时也能够支持大屏和小屏的切换，保证了图表在不同屏幕上呈现的效果。本项目涵盖功能比较齐全，适合进阶数据可视化大屏前端开发的小伙伴。 # 目录结构 ``` │ 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 # 功能模块 * 折线图 * 饼图 * 柱状图 * 实时数据 * 地图和散点图 * 主题切换 * 全屏显示 * 联动效果 # 下载安装依赖 ``` cd EC-Platform-Monitor npm install 或 yarn ``` ## 开发模式 ``` npm run serve ``` 运行之后，访问地址：http://localhost:8999 ## 生产环境打包 ``` npm run build ```