antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解

我就废话不多说了，大家还是直接看代码吧~

npm install @antv/g2 --save

template内容：

js部分：

​//引入G2组件

import G2 from "@antv/g2";

​

export default {

name:"",

//数据部分

data(){

return{

sourceData: [],//声明一个数组

chart: {}, //全局定义chart对象

id: Math.random().toString(36).substr(2), //动态生成ID,便于多次引用

}

},

//初始加载

mounted() {

this.initComponent();

},

methods: {

//初始化获取数据

initStrateGoal() {

debugger;

let _this = this;

_this.$http

.$get("后台接口地址")

.then(function(response) {

if (_this.$util.isBlank(response.data)) {

return;

}

_this.sourceData = response.data;

//调用绘图方法

_this.getDrawing(_this.sourceData);

})

.catch(function(error) {

_this.$message.error(_this, error);

});

},

//绘制图形

getDrawing(sourceData) {

let _this = this;

// Step 1: 创建 Chart 对象

_this.chart = new G2.Chart({

container: _this.id,

forceFit: true,

height: 255,

padding: [30, 0, 35, 0],

animate: false

// margin: [0, 500]

});

let sumCount = 0;

for (let i in sourceData) {

sumCount = sumCount + Number(sourceData[i].count);

}

// Step 2: