最近公司在做一个公司内用的后台管理系统,其中有一些报表的页面,在经历过一番百度之后还是顺利的把这几个报表的页面完成了,下面就大概说一下,这个在vue中使用echarts制作折线图和饼图,其中大部分是代码,还是要给自己留个记忆
首先如果在vue中使用echarts肯定是要下载环境依赖了 npm install echarts --save
由于本人的项目只是需要几个echarts图表,所以我在制作的时候是分开模块导入
如果是还需要用到其他的一些模块,可以去 https://github.com/ecomfe/echarts/blob/master/index.js 看一下
接下来就是先创建一个html标签,让图表在页面中占个位置
接下来就是在methods中定义图表的方法
因为官方文档上都有详细介绍,本人英语还算不错,所以我的这段代码没有很多注释
在完成绘制图表的方法之后,现在还少一些数据。之前在做的时候我是自己定义个axios方法,然后有在下面又写了一个新的方法,用来调取请求回来的数据。在调取的过程中,看到了数据但是数据的类型却是observer类型的,