vue全家桶+Echarts+百度地图，搭建数据可视化系统

本文章篇幅略长，内容有点多大佬可根据目录选择性查阅新人可一步步来阅读

新增文章：vue全家桶+Echarts+百度地图，搭建数据可视化系统（【续】接口篇）

1 前言

1.1 业务场景

突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的方式。

本人之前从未接触过Echarts，然后需要2周拿出成果，有点慌??

1.2 业务分析

拿到需求看了一下

支持用户名、密码登录，默认显示一个维度数据，然后点击可钻取进入第二维度数据，再点击进入第三维度数据展示。

大致估摸着。。。

系统搭建vue-cli

vuex记录登录信息

vue-router路由跳转

3个维度的页面，提取出共用的组件

各个组件开发

调节样式，增加UI

加入后台接口数据

优化显示

测试

上线

当然这不是要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，其他可根据需要添加。

方法一

vue create hello-world

这里参照官方网站，有很详细的介绍。参照：vue create

方法二

使用图形化界面

vue ui

界面含中文，很好操作。参照：vue ui

2.2.4 安装插件

方法一

最直接也是推荐的 npm i xxx

这里介绍一下 -S -D -g 的区别

npm i -S xxx 文件写入dependencies，用于工程中开发时使用到的插件，会发布到生产环境如UI，JS等。

npm i -D xxx 文件写入devDependencies，用于工程支持类插件，不会发布到生产环境，如gulp等压缩打包工具。

npm i -g xxx 全局安装，如vue、ncu等。安装目录为：C:\Users\用户\AppData\Roaming\npm

方法二

vue ui图像化界面中包含了若干插件，可点击安装，但不一定是最新版本。

同时会在hello中引入。其他和方法一没区别。

2.3 安装Echarts

这里我们为了方便，使用了npm全量引用，后期为了精简项目可单个引用。

npm i echarts -S

然后在main.js中添加

这里建议提前自定义echarts的样式，并引入到项目中。官方自定义地址：theme-builder

在页面中我们可以如下引用： var myChart = this.$echarts.init(document.getElementById("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中来引用。