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

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

首先如果在vue中使用echarts肯定是要下载环境依赖了 npm install echarts --save
由于本人的项目只是需要几个echarts图表,所以我在制作的时候是分开模块导入
分模块导入
如果是还需要用到其他的一些模块,可以去 https://github.com/ecomfe/echarts/blob/master/index.js 看一下

接下来就是先创建一个html标签,让图表在页面中占个位置
width, height 可以设置百分比或者数值
接下来就是在methods中定义图表的方法
在这里插入图片描述
因为官方文档上都有详细介绍,本人英语还算不错,所以我的这段代码没有很多注释
在完成绘制图表的方法之后,现在还少一些数据。之前在做的时候我是自己定义个axios方法,然后有在下面又写了一个新的方法,用来调取请求回来的数据。在调取的过程中,看到了数据但是数据的类型却是observer类型的,

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值