突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的方式。本人之前从未接触过 ，然后需要2周拿出成果，有点慌

拿到需求看了一下支持用户名、密码登录，默认显示一个维度数据，然后点击可钻取进入第二维度数据，再点击进入第三维度数据展示。大致估摸着。。。

1. 系统搭建
2. 记录登录信息
3. 路由跳转
4. 3个维度的页面，提取出共用的组件
5. 各个组件开发
6. 调节样式，增加UI
7. 加入后台接口数据
8. 优化显示
9. 测试
10. 上线

当然这不是要2周内，全做完。应该是完成步骤6。相对于公司就我一个前端，没接触过 ，有问题都没人讨论的情况下。。。心里还是忍不住想吐槽一下 这里列出了第一维度页面的样式。文字请无视，哈哈。

吐槽归吐槽，活还是要干的。😎

因为本人最熟悉的还是vue，所以还是选择了用vue全家桶来做。这部分可参考 vue build

• 下载安装环境，直接去官网下载即可 node.js

安装完后可在命令行运行  查看是否安装成功以及版本

2.2.1 安装vue

官方文档：vuejs这里我们使用 的方式

2.2.2 安装Vue CLI

官方文档：vue CLI

安装之后，你就可以在命令行中访问 vue 命令。你可以用这个命令来查看其版本。

2.2.3 创建项目

这里安装的时候，注意将我们要使用的安装上。 、 ，其他可根据需要添加。 方法一

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

方法二使用图形化界面

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

2.2.4 安装插件

方法一最直接也是推荐的  这里介绍一下   的区别

• npm i -S xxx 文件写入dependencies，用于工程中开发时使用到的插件，会发布到生产环境如UI，JS等。
• npm i -D xxx 文件写入devDependencies，用于工程支持类插件，不会发布到生产环境，如gulp等压缩打包工具。
• npm i -g xxx 全局安装，如vue、ncu等。安装目录为：C:Users用户AppDataRoaming pm

方法二 图像化界面中包含了若干插件，可点击安装，但不一定是最新版本。同时会在hello中引入。其他和方法一没区别。

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

然后在 中添加 这里建议提前自定义 的样式，并引入到项目中。官方自定义地址：theme-builder在页面中我们可以如下引用：

是我们要展示的 的 。 是我们的自定义的样式，同时官方提供了几个样式例子，可以 中找到。

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

然后在 中添加 一般vue使用百度地图有2种方式，

• 一种是像官网那样去应用。如：BMap
• 第二种是使用 

不管是哪一种都要去申请账号和密钥。申请地址为：百度地图密钥(ak)这里我使用了第二种。vue-baidu-map文档

然后在 中添加 这里填写自己申请的密钥。在页面中，参照文档，可使用标签 来调用。 样式初始化，简单来说就是为了各个浏览器能统一什么的。这里我使用的是 normalize.css下载下来后，在 中添加 基本上的准备工作都做好了，接下来就是具体的代码了。 我这里新建了一个 、 ，大致如下： 哦哈，这里路由定义是为了方便看哈，具体还是根据业务来定义。这里的  路由卫士用于是否登录校验。然后我们在 中来引用。 更多请参考官方文档：Vue Router Vuex 登录页面没啥，就是个form提交，由于路由中判断 。所以我们储存一下，然后跳转到Index页面就行。这里只是一种方式，也可以使用 和 分析页面分成了2个大部分

• 第一部分是 头部
• 第二部门是 主体

我们将头部当做一个组件进行复用。组件的复用可参考官方文档：https://cn.vuejs.org/v2/guide/components.html 头部比较简单，除了一些显示外，还有一个显示当前时间。这里我们使用了 ，每隔1秒去获取一下当前时间赋值给你定义的 就行。同时在离开页面时，我们清理掉定时器。这里需要我们对 的生命周期有一定的了解。获取当前时间的方法可参考：data-module.js 这里分析一下页面，主要分成了3块。

1. 左边，包含了2个折线图。
2. 中间，包含了数字和地图。
3. 右边，包含了柱状图和表格。

接下来主要介绍一下，自己这2周摸索出来的一些 配置，适合新手，大佬轻喷。

这里需要经常翻阅  Echarts配置项 和  API 了

3.5.1 Echarts基本

这里列出基本的渲染写法，具体的图形和数据只要修改 就可以了。

3.5.2 线形图

多多实践，就会发现每个配置和其参数的作用了。

预览：

3.5.3 柱状图

这里我们直接用双柱状图来演示。因为名字和数字需要提示和点击的功能，所以没有使用 的 轴。不然 又要写一堆，虽然用了自定义的，但最开始是用的 。可以实现相同展示，但无法操作，如鼠标提示和鼠标点击。