在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~这里以这个图为例右侧就是实现这个图的代码,在这里加上.color即可根据字段名显示不同的颜色这里数据的字段和值可以按需更改在vue中引入antv. 指定一个容器来放图表替换默认的data数据此处需要把默认的container:‘container' 修改为自己指定的容器id,渲染数据时,将data修改为this.xxx,不同的图修改的地方可能会不同在mounted函数中调用绘图方法启动项目即可看到最终效果添加一个获取数据的方法在created函数中调用获取数据的函数在watch函数中监听数据,数据发生变化时重新渲染图表最后得到的图表数据就是数据库中的数据了
下载地址
用户评论