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