vue中使用echarts

vue中使用echarts

第一步

在vue中下载echarts cnpm i echarts@4.9.0 -S

第二步

在src目录中创建一个文件夹用于存放echarts相关js文件,在文件中配置好需要的数据

第三步

在需要展示数据的文件下面引入echarts和相关配置文件

//引入echarts对象
import echarts from "echarts";
//引入配置对象
import supplier from "../../echarts/supplier.js";
//创建一个函数在函数中初始化echarts，在init中传入一个节点对象，节点必须设置宽高
 this.char1 = echarts.init(this.$refs.echar1);
 //调用配置文件的函数
 option = customer(d.data);
 //将配置对象放在setOption函数中
 this.char2.setOption(option);
 //可以监听window.resize事件，使图表和窗口始终一样大小
 window.addEventListener("resize", this.resize.bind(this));
 //在事件处理函数中调用echarts对象的resize方法重置图形大小
this.char3.resize();