【轉】vue 引入 g2plot

原文地址：https://www.itshutong.com/articles/499/vue-introduces-g2-plot

首先安裝擴展

$ npm install @antv/g2plot

接下來並不需要在 main.js 入口文件去引入，直接在需要使用 g2plot 的 vue 文件中引用相應的組件即可。如：

<template>
    <div id="c1"></div>
</template>
<script>
import { Bar } from '@antv/g2plot'
export default {
    // ...
    mounted () {
    const data = [
      { year: '1951 年', sales: 38 },
      { year: '1952 年', sales: 52 },
      { year: '1956 年', sales: 61 },
      { year: '1957 年', sales: 145 },
      { year: '1958 年', sales: 48 }
    ]

    const barPlot = new Bar('c1', {
      data,
      xField: 'sales',
      yField: 'year',
      colorField: 'year'
    })

    barPlot.render()
  }
}
</script>

效果如下：