echarts 折线图 设置y轴最小刻度_vue全家桶+Echarts+百度地图，搭建数据可视化系统...

作者 | xrkffgg
来源 | https://www.jianshu.com/p/f4f90d44227f

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，其他可根据需要添加。 方法一

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这里填写自己申请的密钥。在页面中，参照文档，可使用标签 来调用。

2.6 初始化样式

css样式初始化，简单来说就是为了各个浏览器能统一什么的。这里我使用的是 normalize.css下载下来后，在 main.js中添加 基本上的准备工作都做好了，接下来就是具体的代码了。

3、项目搭建

3.1 router、vuex

我这里新建了一个 router.js、 store.js，大致如下： 哦哈，这里路由定义是为了方便看哈，具体还是根据业务来定义。这里的 router.beforeEach 路由卫士用于是否登录校验。然后我们在 main.js中来引用。 更多请参考官方文档：Vue Router Vuex

3.2 、Login页面

登录页面没啥，就是个form提交，由于路由中判断 user.id。所以我们储存一下，然后跳转到Index页面就行。这里只是一种方式，也可以使用 Cookie和 Session

3.3 Index页面

分析页面分成了2个大部分

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

我们将头部当做一个组件进行复用。组件的复用可参考官方文档：https://cn.vuejs.org/v2/guide/components.html

3.4 header页面

头部比较简单，除了一些显示外，还有一个显示当前时间。这里我们使用了 setInterval，每隔1秒去获取一下当前时间赋值给你定义的 v-model就行。同时在离开页面时，我们清理掉定时器。这里需要我们对 Vue的生命周期有一定的了解。获取当前时间的方法可参考：data-module.js

3.5 主体页面

这里分析一下页面，主要分成了3块。

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

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

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

3.5.1 Echarts基本

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