本文介绍了一个基于Vue的电子商务数据可视化项目，涉及6种图表（折线图、柱状图、地图、散点图、饼图、雷达图）的实现。项目初期采用Ajax获取数据，后期计划用WebSocket进行实时推送。使用vue-cli创建Vue项目，配置集成Router和Vuex，以及使用ECharts和axios。在Vue原型上挂载echarts对象，通过axios处理数据请求。项目还包括ECharts的高级显示和数据可视化的相关知识。
项目最终的效果如图所示:
最终效果涉及到6个图表, 5种图表类型,它们分别是折线图,柱状图,地图,散点图,饼图
每个图表的数据都是从后端推送到前端来的, 不过在项目的初期,我们会先使用 ajax 由前端主动获取数据, 后续会使用 WebSocket 进行改造.
整个项目的架构是基于 Vue 的, 所以我们需要创建 Vue 项目, 然后在 Vue 项目中开发各个图表组件.
1.前端项目的准备
1.1. vue-cli 脚手架创建项目
npm install -g @vue/cli1.1.1 脚手架环境的安装
在全局环境中安装 vue-cli 脚手架
1.1.2. 工程的创建
最低0.47元/天 解锁文章
扫一扫
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
