G2-for-vue NPM

G2-for-Vue

G2 Charts for Vue.js.

Built upon G2 v3.2.7+ and depends on Vue.js v2.5.17+.

Install

Manual

download lib/G2VChart.js and include it in your HTML file

<script src="path/to/g2-for-vue/lib/index.js"></script>

The component is exposed as window.G2VChart.

// register component to use
Vue.component('g2-vchart', G2VChart)

Use npm（Recommended)

npm install g2-for-vue

Register Component

import Vue from 'vue'
import G2VChart from 'g2-for-vue/components/G2VChart'

// register component to use
Vue.component('g2-vchart', G2VChart)

Using the Component

<template>
  <div class='bar-chart'>
    <G2VChart
      ref="bar"
      :height="chartHeight"
      :plotCfg="barPlotCfg"
      :chartData="barData"
      :createChart="createBarChart"
      :addGuide="addBarGuide"
    />
    <div class='btn' @click="refresh">refresh</div>
  </div>
</template>
<script>
import G2VChart from 'g2-for-vue'
// or import G2VChart from 'g2-for-vue/components/G2VChart'

export default {
  components: {
    G2VChart
  },
  data () {
    return {
      chartHeight: 220,
      selectedMonth: '9月',
      barData: [
        {month: '4月', value: 10},
        {month: '5月', value: 310},
        {month: '6月', value: 450},
        {month: '7月', value: 60},
        {month: '8月', value: 110},
        {month: '9月', value: 100}
      ],
      barPlotCfg: {},
      typeMap: {
        OUT: '支出',
        IN: '收入'
      }
    }
  },
  methods: {
   createBarChart(chart) {
    const self = this;
    chart.interval().position('month*value').size(20).color('month', month => {
      if (month === self.selectedMonth) {
        return '#108ee9';
      }
      return '#108ee969';
    });
    chart.legend(false);
    chart.tooltip(false);
    return chart;
  },

  addBarGuide(chart, barData) {
    if (!chart || !barData) { return; }
    // 辅助文本
    let diffVal = 0;
    barData.map(item => {
      chart.guide().text({
        position: item,
        content: item.value,
        offsetX: -9,
        offsetY: -8
      });
    });
  },
    refresh () {
      this.barData = [
        {month: '4月', value: Math.floor(Math.random() * 100) + 30},
        {month: '5月', value: Math.floor(Math.random() * 100) + 110},
        {month: '6月', value: Math.floor(Math.random() * 100) + 450},
        {month: '7月', value: Math.floor(Math.random() * 100) + 340},
        {month: '8月', value: Math.floor(Math.random() * 100) + 210},
        {month: '9月', value: Math.floor(Math.random() * 100) + 680}
      ]
    }
  }
}
</script>
<style>
.bar-chart {
  width: 100%;
  height: 100%;
  min-width: 200px;
}
</style>

See more examples here

Props

autoResize (default: false)
This prop indicates G2 Chart instance should be resized automatically whenever its root is resized
plotCfg
chartData
createChart
addGuide

Computed

width readonly
Used to retrieve the current width of the G2Chart instance.
height readonly
Used to retrieve the current height of the G2Chart instance.

Usages

<g2-vchart
  ref="g2-vchart"
  autoResize
  @resize="onResize"
/>

onResize() {
  const g2VChart = this.$refs['g2-vchart'];
  const width = g2VChart.width;
  const height = g2VChart.height;
  console.log('onResize:width:%d, height:%d',  width, height)
}

Methods

downloadImage (name: string)
图表导出功能，通过传入 name 来指定下载图片的文件名。
getDataURL
changeVisible
resize
clear
repaint
destroy
dispatchAction (name: string, ...args: any[]) To see more actions support: G2.Chart Methods
example
```
this.vchart.dispatchAction('getXScale')
```

Events

G2VChart support the following events:

basic canvas events

mousedown
mousemove
mouseleave
mouseup
click
dblclick
touchstart
touchmove
touchend

basic plot events

plotenter
plotmove
plotleave
plotclick
plotdblclick

resize event

resize

tooltip events

tooltip:show
tooltip:hide
tooltip:change

Usages:

<g2-vchart
  ref="g2-vchart"
  @click="onClick"
  @tooltip:change="onTooltipChange"
/>

onTooltipChange(evt) {
  // handle evt
}

For more details, see G2's API - Events

any other events,like shape*basic, components*basic will be added soon~

Local development

npm i
npm run demo

浏览器打开http://localhost:8080/demo.html

Plan

分包引入G2,目前会将整个G2引入,打包后的common.js大小为1542.79 kb,压缩后的大小为327.42 kb
- use G2 as exterval！

import G2 from '@antv/g2/src/core.js'

// import G2 modules manually to reduce bundle size,such as Geoms,Facets, Interaction
// geoms
require('./geom/area');
require('./geom/edge');
require('./geom/heatmap');
require('./geom/interval');
require('./geom/line');
require('./geom/path');
require('./geom/point');
require('./geom/polygon');
require('./geom/schema');
require('./geom/venn');

// facets
require('./facet/index');

// interaction
require('./interaction/index');