我就廢話不多說了，大家還是直接看程式碼吧~

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,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是不能重複的，必須動態生成

補充知識：vue+antv與資料庫互動實現資料視覺化圖表

一、安裝antv

npm install @antv/g2

二、在官網選擇自己需要的圖表

https://g2.antv.vision/zh/examples/gallery

這裡以這個圖為例

右側就是實現這個圖的程式碼，在這裡加上.color(“type”)即可根據欄位名顯示不同的顏色

這裡資料的欄位和值可以按需更改（更改欄位名稱的話要把下面相關的欄位名全部替換）

三、整合vue antv

在vue中引入antv

import { Chart } from "@antv/g2";

指定一個容器來放圖表

<template>
<div id="roomTypeCheckIn"></div>
</template>

替換預設的data資料

data() {
  return {
   mydata: [
    { roomTypeName: "單人間",checkInValue: 654,checkInPercent: 0.02 },{ roomTypeName: "雙人間",{ roomTypeName: "鐘點房",checkInValue: 4400,checkInPercent: 0.2 },{ roomTypeName: "海景房",checkInValue: 5300,checkInPercent: 0.24 },{ roomTypeName: "主題房",checkInValue: 6200,checkInPercent: 0.28 },{ roomTypeName: "家庭房",checkInValue: 3300,checkInPercent: 0.14 },{ roomTypeName: "總統房",checkInValue: 1500,checkInPercent: 0.06 }
   ]
  };
 },

把繪圖程式碼複製進來

此處需要把預設的container：‘container' 修改為自己指定的容器id，渲染資料時，將data修改為this.xxx（自己定義的資料名稱），不同的圖修改的地方可能會不同

methods: {
  initComponent() {
   const chart = new Chart({
    container: "roomTypeCheckIn",autoFit: true,height: 500,padding: [50,20,50,20]
   });
   chart.data(this.mydata);
   chart.scale("checkInValue",{
    alias: "銷售額"
   });

   chart.axis("roomTypeName",{
    tickLine: {
     alignTick: false
    }
   });
   chart.axis("checkInValue",false);

   chart.tooltip({
    showMarkers: false
   });
   chart
    .interval()
    .position("roomTypeName*checkInValue")
    .color("roomTypeName");
   chart.interaction("element-active");

   // 新增文字標註
   this.mydata.forEach(item => {
    chart
     .annotation()
     .text({
      position: [item.roomTypeName,item.checkInValue],content: item.checkInValue,style: {
       textAlign: "center"
      },offsetY: -30
     })
     .text({
      position: [item.roomTypeName,content: (item.checkInPercent * 100).toFixed(0) + "%",offsetY: -12
     });
   });
   chart.render();
  }
 }

在mounted函式中呼叫繪圖方法

 mounted() {
  this.initComponent();
 },

啟動專案即可看到最終效果

三、與資料庫互動

新增一個獲取資料的方法（按自己的介面進行相應的替換）

getData() {
   roomTypeApi.getRoomTypeStatistics().then(res => {
    this.mydata = res.data.data
   })
  },

在created函式中呼叫獲取資料的函式

 created() {
   this.getData()
 },

在watch函式中監聽資料，資料發生變化時重新渲染圖表

 watch: {
  mydata(b,a) {
    this.chart.changeData(b)
    this.chart.render()
  }
 },

最後得到的圖表資料就是資料庫中的資料了

以上這篇在vue專案中引用Antv G2,以餅圖為例講解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。