Vue2绘制图表（echarts）

一.普通网页

1.在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件

2.创建简单html文件，在头部中用

<script src="echarts.js"></script>

来引入使用

3.绘图步骤

1.准备一个定义了宽高的DOM容器，用作图表的容器

<div id="main" style="width: 600px;height:400px;"></div>

2.从echarts官网中引入echarts实例，并使用echarts.init方法来初始化实例

3.如何使用echarts.init方法来初始化实例

这里我就用一个图片来进行说明

document.getElementById('main'): 获取页面上 ID 为 'main' 的元素

       

二.项目使用

1.npm安装

在终端项目目录下输入

npm install echarts --save

2.引入echarts

安装好后，就可以引入echarts了，引入可以全局引入，也可以局部引入，我一般选择全局引入。当然也可以按需导入，不过我觉得步骤比较多，我一般选择全局引入所有的

全局引入，在main.js文件中加入

import * as echarts from 'echarts';

3.绘制图表

1.准备一个定义了宽高的DOM容器，用作图表的容器

<div id="main" style="width: 600px;height:400px;"></div>

2.从echarts官网中引入echarts实例，并使用echarts.init方法来初始化实例，和普通网页操作一样这里又多了一个问题。项目中的内容其实很多是动态的，这里我们就要考虑到生命周期的问题了。我们要求的是一进页面就有这个元素。放到created（）{}里面就不能最早获得Dom元素了，我们需要放到mounted(){}里面，因为它是可以最早获取DOM元素的生命周期函数

三.修改图表

想要修改图表，我们首先需要知道各部分所代表的内容

题目这一部分一般自己写，自己调整字体大小。y轴内容会自动创建数据,和x轴有关。图表内容(series)中的type即指的是图表的类型，其中type:'X',x可为bar（柱状图）,line（折线图）,pie（饼图）,map（地图），bar和line可以相互转换

想要修改每一部分具体的属性，可以在官网配置项手册里面找对应的内容进行配置