在Vue中使用antv

在Vue中使用antv

使用antv/g2（兩種使用方式）

一，在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>