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>