seanyangsg / vue-g2

基于 Vue 和 AntV/G2 的可视化组件库

基于 Vue 和 AntV/G2 的可视化组件库

快速开始

安装依赖

---

可以通过 npm 添加依赖

  npm i vue-g2 --save

或者通过 yarn 添加依赖

  yarn add vue-g2 --save

引入

---

在 Vue 项目的 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 的引入。

开始使用

---

开发环境已经搭建完毕，在需要使用可视化图表的页面通过 html 标签的形式使用，如：

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

<script>
export default {
  name: 'app',
  data () {
    return {}
  }
}
</script>

<style lang="less">
</style>

关于自定义图表

目前可以通过<g2-custom></<g2-custom>>标签来实现自定义图表，满足更复杂的业务需求。实现过程可参考如下代码：

<!-- 通过<g2-custom>标签实现简单柱图 -->
<template>
    <g2-custom :option="customOption"></g2-custom>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {}
  },
  methods: {
    customOption (chart, dataset) {
      <!-- chart 为图表实例，dataset为数据集实例 -->
      let data = [{ name: 'test1', value: 123 }, { name: 'test2', value: 246 }]
      let dv = dataset.createView().source(data)
      chart.source(dv)
      chart.interval().position('name*value')
    }
  }
}
</script>

<style lang="less">
</style>