vue全家桶+Echarts+百度地图，搭建数据可视化系统本⽂章篇幅略长，内容有点多，⼤佬可根据⽬录选择性查阅，新⼈可⼀步步来阅读。
1、前⾔
1.1 业务场景
突然接到产品说要做⼀个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的⽅式。
本⼈之前从未接触过Echarts，然后需要2周拿出成果，有点慌
1.2 业务分析
拿到需求看了⼀下。
⽀持⽤户名、密码登录，默认显⽰⼀个维度数据，然后点击可钻取进⼊第⼆维度数据，再点击进⼊第三维度数据展⽰。
⼤致估摸着。。。
1. 系统搭建vue-cli
2. vuex记录登录信息
3. vue-router路由跳转
4. 3个维度的页⾯，提取出共⽤的组件
5. 各个组件开发
6. 调节样式，增加UI
7. 加⼊后台接⼝数据
8. 优化显⽰
9. 测试
10. 上线
当然这不是要2周内，全做完。应该是完成步骤6。
相对于公司就我⼀个前端，没接触过Echarts，有问题都没⼈讨论的情况下。。。
⼼⾥还是忍不住想吐槽⼀下
1.3 效果展⽰
这⾥列出了第⼀维度页⾯的样式。⽂字请⽆视，哈哈。
2 、系统安装
吐槽归吐槽，活还是要⼲的。
因为本⼈最熟悉的还是vue，所以还是选择了⽤vue全家桶来做。这部分可参考 vue build 2.1 安装node环境
下载安装node环境，直接去官⽹下载即可 node.js
安装完后可在命令⾏运⾏node -v npm -v 查看是否安装成功以及版本
2.2 安装Vue项⽬
2.2.1 安装vue
官⽅⽂档：vuejs
这⾥我们使⽤npm的⽅式
npm i vue
2.2.2 安装Vue CLI
官⽅⽂档：vue CLI
npm i -g @vue/cli
安装之后，你就可以在命令⾏中访问 vue 命令。你可以⽤这个命令来查看其版本。vue -V 2.2.3 创建项⽬
这⾥安装的时候，注意将我们要使⽤的安装上。vuex、vue-router，其他可根据需要添加。
1. ⽅法⼀
vue create hello-world
这⾥参照官⽅⽹站，有很详细的介绍。参照：vue create
1. ⽅法⼆
使⽤图形化界⾯
vue ui
界⾯含中⽂，很好操作。参照：vue ui
2.2.4 安装插件
1. ⽅法⼀
最直接也是推荐的 npm i xxx
这⾥介绍⼀下 -S -D -g 的区别
1. ⽅法⼆
vue ui图像化界⾯中包含了若⼲插件，可点击安装，但不⼀定是最新版本。
同时会在hello中引⼊。其他和⽅法⼀没区别。
2.3 安装Echarts
这⾥我们为了⽅便，使⽤了npm全量引⽤，后期为了精简项⽬可单个引⽤。
npm i echarts -S
然后在main.js中添加
这⾥建议提前⾃定义echarts的样式，并引⼊到项⽬中。官⽅⾃定义地址：theme-builder
在页⾯中我们可以如下引⽤：go2map地图北京
var myChart = this.$echarts.ElementById("myid"),'temp')
myid是我们要展⽰的echarts的id。
temp是我们的⾃定义的样式，同时官⽅提供了⼏个样式例⼦，可以node_modules\echarts\theme中到。
2.4 安装element-ui
这⾥我们为了⽅便，使⽤了npm全量引⽤，后期为了精简项⽬可单个引⽤。
npm i element-ui -S
然后在main.js中添加
2.5 安装百度地图
⼀般vue使⽤百度地图有2种⽅式，
⼀种是像官⽹那样去应⽤。如：BMap
第⼆种是使⽤ vue-baidu-map
不管是哪⼀种都要去申请账号和密钥。申请地址为：百度地图密钥(ak)这⾥我使⽤了第⼆种。vue-baidu-map⽂档
npm i vue-baidu-map -S
然后在main.js中添加。
xxxxxxxx这⾥填写⾃⼰申请的密钥。
在页⾯中，参照⽂档，可使⽤标签<baidu-map/>来调⽤。
2.6 初始化样式
css样式初始化，简单来说就是为了各个浏览器能统⼀什么的。
这⾥我使⽤的是 normalize.css
下载下来后，在main.js中添加
基本上的准备⼯作都做好了，接下来就是具体的代码了。
3 、项⽬搭建
3.1 router、vuex
我这⾥新建了⼀个router.js、store.js，⼤致如下：
哦哈，这⾥路由定义是为了⽅便看哈，具体还是根据业务来定义。这⾥的router.beforeEach 路由卫⼠⽤于是否登录校验。
然后我们在main.js中来引⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。