Vue-cli 脚手架构建的项目使用echarts进行数据可视化

前言

Echarts官方网站
echarts:是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求,在项目中涉及到可视化都可以使用该库来实现。

以往在项目中需要使用echarts的话，直接使用script标签，引用cdn地址，或者本地下载好的地址。

但是在vue工程化的项目中，依赖都是由npm来管理的，所以有了本文，在vue工程化项目中使用echarts，下图是我实现之后的效果，只使用了简单的面积折线图和柱形图

一、npm install echarts

直接使用官方给的命令即可：npm install echarts --save
我是在2/28，下载的，当时版本为5.0.2,测试成功的。

二、引入echarts

使用时分为两种方式

• 按需引入：体积比完整引入要小的多。
• 完整引入：完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验

2.1、完整引入

使用vue全家桶的插件时可以使用Vue.use()来安装插件，但是echarts 不可以使用这种方式，
但是我们之后的组件中或其他的位置也会经常使用echarts，那么就应该把该插件配置到Vue的原型中去。
main.js

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

如果您的版本与我不一致那么请注意查看from echarts处echarts的源码，是否导出了*，如下图所示

如果导出的不是*，那么正常情况下替换为import echarts from 'echarts'语句即可解决引入问题。

2.2、按需引入

这里的“需”是指你所需要的可视化图表，在官方示例中进行挑选：
https://echarts.apache.org/examples/zh/index.html。
这里我选第一个折线图作为演示，点进到在线运行页面。

如图上勾选所示，官方已经将该演示所依赖的文件来列出来了。

// 不同的演示图表 所依赖也不一样。
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/grid');
require('echarts/lib/chart/line');
//注：这里用 require 不用 import 引入是因为 import 需要详细的路径

那么这些语句应该放哪里？

建议呢，若有多个不同的图表那么就放在main.js中，最后将echarts 如完整引入那般 配置到Vue的原型中去，如果担心main.js内容混乱，也可以把内容放到组件Component中。

三、项目中使用

这里我先举一种方式，也是我现在使用的，以后或许会补充。。

3.1、抽离图表组件

我将项目中的柱形图折线图抽出了drawBar、drawLine两个组件。
组件内部在monted这个钩子函数执行时会绘图。
如果将echarts对象放在原型中那么像我一样写就可以，如果是在组件内部 可以直接使用echarts。

四、问题记录

4.1、去除图像周围空白

其实刚做完的时候效果就是图上这样，就是留白过多，上下都有很多的空白，整体上看就与同一行的其他组件高度上不统一。
解决方案：

我们可以通过 grid 属性来控制直角坐标系内绘图网格四周边框位置，具体有如下配置项：

名称	默认值	描述
{number} zlevel	0	一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
{number} z	0	二级层叠控制，同一个canvas（相同zlevel）上z越高约靠顶层。
{number | string} x	80	直角坐标系内绘图网格与左侧距离，数值单位 px，支持百分比（字符串），如：50%
{number | string} y	60	直角坐标系内绘图网格与顶部距离，数值单位 px，支持百分比（字符串），如：50%
{number | string} x2	80	直角坐标系内绘图网格与右侧距离，数值单位 px，支持百分比（字符串），如：50%
{number | string} y2	60	直角坐标系内绘图网格与底部距离，数值单位 px，支持百分比（字符串），如：50%
{number} width	自适应	直角坐标系内绘图网格（不含坐标轴）宽度，默认为总宽度 - x - x2，数值单位px，指定width后将忽略x2 ，支持百分比（字符串），如’50%’(显示区域一半的宽度)
{number} height	自适应	直角坐标系内绘图网格（不含坐标轴）高度，默认为总高度 - y - y2，数值单位px，指定height后将忽略y2，支持百分比（字符串），如’50%’(显示区域一半的高度)
{color}backgroundColor	‘rgba(0,0,0,0)’	背景颜色，默认透明。
{number}borderWidth	1	边框线宽
{color}borderColor	#ccc	边框颜色。

对大家有用的话可以看一下我的blog，说不定能解决您的其他问题