在vue中使用echarts制作折线图和饼图

最近公司在做一个公司内用的后台管理系统，其中有一些报表的页面，在经历过一番百度之后还是顺利的把这几个报表的页面完成了，下面就大概说一下，这个在vue中使用echarts制作折线图和饼图，其中大部分是代码，还是要给自己留个记忆

首先如果在vue中使用echarts肯定是要下载环境依赖了 npm install echarts --save
由于本人的项目只是需要几个echarts图表，所以我在制作的时候是分开模块导入

如果是还需要用到其他的一些模块，可以去 https://github.com/ecomfe/echarts/blob/master/index.js 看一下

接下来就是先创建一个html标签，让图表在页面中占个位置

接下来就是在methods中定义图表的方法

因为官方文档上都有详细介绍，本人英语还算不错，所以我的这段代码没有很多注释
在完成绘制图表的方法之后，现在还少一些数据。之前在做的时候我是自己定义个axios方法，然后有在下面又写了一个新的方法，用来调取请求回来的数据。在调取的过程中，看到了数据但是数据的类型却是observer类型的，是观察者的模式，后来才想到axios是异步执行，其他的方法都是在mounted里面，页面在挂载完成之后会自己执行，如果在这时候获取数据肯定是请求不到的，所以我把绘图的方法写在了axios请求里面，在请求完成之后，直接绘制图表

在传递数据的时候还遇到一个问题，就是在函数中以数组作为参数进行传递，如果直接传的话，后面会报错，所以我也是请教了一些朋友，用了一个特别巧妙的方法 JSON.stringify 和JSON.parse 进行转换

JSON.stringify(this.legenddata.data1)

let legendata = JSON.parse(legenddata);

最后
在这次项目的经历之后，对echarts使用有了一定的了解，如果以后再遇到这种图标的项目，相信自己应该不会太过惊慌失措，以后的日子，再接再厉
Ti10再见