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