一，在vue原型中使用

1.首先安裝antv/g2

yarn add @antv/g2 --save

2.在main.js中掛在到vue原型例項中

const G2 = require('@antv/g2')
Vue.prototype.$G2 = G2

3.在vue檔案中可以直接在mounted生命週期中直接使用

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

<script>
export default {
 mounted() {
  this.initComponent();
 },data() {
  return {
   msg: "",chart: null,data: [
    { genre: "Sports",sold: 275 },{ genre: "Strategy",sold: 115 },{ genre: "Action",sold: 120 },{ genre: "Shooter",sold: 350 },{ genre: "Other",sold: 150 }
   ]
  };
 },methods: {
  initComponent() {
   const chart = new this.$G2.Chart({
    container: "c1",width: 600,height: 300
   });
   chart.source(this.data);
   chart
    .interval()
    .position("genre*sold")
    .color("genre");
   this.chart = chart;
   this.chart.render();
  }
 }
};
</script>

二，按需引用

1.還是安裝atv/g2

yarn add @antv/g2 --save

2.直接在元件中按需引入

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

<script>
import { Chart } from "@antv/g2";
export default {
 data() {
  return {
   year: [
    { year: "1991",value: 3 },{ year: "1992",value: 4 },{ year: "1993",value: 3.5 },{ year: "1994",value: 5 },{ year: "1995",value: 4.9 },{ year: "1996",value: 6 },{ year: "1997",value: 7 },{ year: "1998",value: 9 },{ year: "1999",value: 13 }
   ]
  };
 },mounted() {
  this.initLineChart()
 },methods: {
  initLineChart() {
   const chart = new Chart({
    container: "l1",autoFit: true,height: 500
   });
   chart.data(this.year);
   chart.scale({
    year: {
     range: [0,1]
    },value: {
     min: 0,nice: true
    }
   });
   chart.tooltip({
    showCrosshairs: true,// 展示 Tooltip 輔助線
    shared: true
   });
   chart
    .line()
    .position("year*value")
    .label("value");
   chart.point().position("year*value");
   chart.render();
  }
 }
};
</script>
<style scoped>
</style>

示例程式碼

<template>
 <div>
  <div><h1 style="color: white">{{title}}</h1></div>
  <span>
   <div id="c1"></div>
   <div id="mountNode"></div>
  </span>
 </div>
</template>

<script>
  import G2 from '@antv/g2';
  export default {
    name: "spectaculars",data(){
      return{
        title:'地區貨品跟進看板',basicColumnChartProp:{
          data:[{ genre: 'Sports',{ genre: 'Strategy',{ genre: 'Action',{ genre: 'Shooter',{ genre: 'Other',sold: 150 }],container:'c1',width:600,height:300
        },basicBarChartProp:{
          container:'mountNode',size:{'width':500,'height':300},data:[
            {
              country: '巴西',population: 18203
            },{
              country: '印尼',population: 23489
            },{
              country: '美國',population: 29034
            },{
              country: '印度',population: 104970
            },{
              country: '中國',population: 131744
            }
          ]
        }
      }
    },methods:{
      test:function () {
        const data = this.basicColumnChartProp.data;
        // Step 1: 建立 Chart 物件
        const chart = new G2.Chart({
          container: this.basicColumnChartProp.container,// 指定圖表容器 ID
          width : this.basicColumnChartProp.width,// 指定圖表寬度
          height : this.basicColumnChartProp.height // 指定圖表高度
        });
        // Step 2: 載入資料來源
        chart.source(data);
        // Step 3：建立圖形語法，繪製柱狀圖，由 genre 和 sold 兩個屬性決定圖形位置，genre 對映至 x 軸，sold 對映至 y 軸
        chart.interval().position('genre*sold').color('genre')
        // Step 4: 渲染圖表
        chart.render();
      },basicBarChart:function () {
        let data = this.basicBarChartProp.data;
        let chart = new G2.Chart({
          container: this.basicBarChartProp.container,width:this.basicBarChartProp.size.width,height:this.basicBarChartProp.size.height
        });
        chart.source(data);
        chart.axis('country',{
          label: {
            offset: 12
          }
        });
        chart.coord().transpose();
        chart.interval().position('country*population');
        chart.render();
      }
    },mounted() {
      this.test();
      this.basicBarChart();
    },beforeCreate () {
      document.querySelector('body').setAttribute('style','background:#000000')
    },beforeDestroy () {
      document.querySelector('body').removeAttribute('style')
    }
  }
</script>

<style scoped>

</style>

到此這篇關於在Vue中使用antv的示例程式碼的文章就介紹到這了,更多相關Vue中使用antv內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！