在Vue中使用Antv G2

1.安装依赖

可以通过 npm 添加依赖

npm i @antv/g2@3.5.15 @antv/data-set@0.9.6 vue-g2 --save

2.引入依赖

在 main.js 中写入以下内容：

import Vue from 'vue'
import 'vue-g2'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

以上代码便完成了 vue-g2 的引入。

3.Vue组件中使用

在需要使用可视化图表的vue组件中通过 html 标签的形式使用, 如：

<template>
  <g2-pie type="pie" 
    :axis-name="{ name: '年份', value: 'GDP(亿美元)' }"
    :data="data"
    :label-option="{ show: true, offset: 20 }">
  </g2-pie>
</template>

<script>
export default {
  data () {
    return {
      data: [
        { name: '2016', value: 2 }, 
        { name: '2017', value: 1 }, 
        { name: '2018', value: 3 }
      ]
    }
  }
}
</script>

<style>
</style>