vue项目中引用Antv G2,饼图为例

npm install @antv/g2 --save

template内容： 

<template>
  <div id="pieChart"></div>
</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: 载入数据源
      _this.chart.source(sourceData, {
        percent: {
          formatter: function formatter(val) {
            val = val + "%";
            return val;
          }
        }
      });
      _this.chart.coord("theta", {
        radius: 0.75,
        innerRadius: 0.6
      });
      //消息提示
      _this.chart.tooltip({
        showTitle: false,
        itemTpl:
          '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      // 辅助文本
      _this.chart.guide().html({
        position: ["50%", "50%"],
        html:
          '<div style="color:#8c8c8c;font-size: 10px;text-align: center;width: 6em;">目标总数<br><span style="color:#8c8c8c;font-size:14px">' +
          sumCount +
          "</span></div>",
        alignX: "middle",
        alignY: "middle"
      });
      // Step 3：创建图形语法，绘制饼图
      var interval = _this.chart
        .intervalStack()
        .position("percent")
        .color("item")
        .label("percent", {
          formatter: function formatter(val, item) {
            return item.point.item + ": " + val;
          }
        })
        .tooltip("item*percent", function(item, percent) {
          //数据显示为百分比形式
          percent = percent + "%";
          return {
            name: item,
            value: percent
          };
        })
        .style({
          lineWidth: 1,
          stroke: "#fff"
        });
      // Step 4：最后一步渲染至画布
      _this.chart.render();
      //初始加载图片后默认显示第一个条目突起，点击后进行变更
      interval.setSelected(sourceData[0]);
    },
    //因为父级页面用的事Tab调用，会有显示不全的现象发生，所以销毁所有对象后重新加载
    reloadDrawing() {
      //销毁画布对象
      this.chart.destroy();
      //重新调用数据进行加载
      this.initStrateGoal();
    }
  }

}

*父级页面时tab调用，并且是一个页面多次引用，有两个坑

1.tab点击时，有的页面显示不全，样式也有问题，需要销毁重构（只是我的个人方案，有其他方案的话可以推荐）

2.一个页面有多个图表，id是不能重复的，必须动态生成