前言

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，说不定能解决您的其他问题

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

猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
1. Vue CLI脚手架
1.1 介绍 Vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板,是Vue官方提供的标准化开发工 ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口命令 ...
Vue之脚手架第一个项目
安装参考下面网址:vuecli的官网 https://cli.vuejs.org/zh/guide/installation.html 安装完之后,输入命令: vue init <templat ...
如何查看vue版本号以及vue/cli脚手架版本号
查看vue版本号方法一:直接在项目的package.json文件,找到dependencies就能看到了方法二:输入命令npm ls vue (或者npm list vue) 查看vue/cli脚 ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
Vue使用Echarts实现数据可视化
Vue使用Echarts实现数据可视化一,Echarts 1.1 获取ECharts 1.2 引入 ECharts 二,Vue使用Echarts 2.1 Vue环境 2.2 main.js引入Ech ...
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...

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

前言