g2-for-vue v0.3.6
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
readonlyUsed to retrieve the current width of the G2Chart instance.
height
readonlyUsed 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 Methodsexample
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
!
- use G2 as
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');
- use
resize-detector
- add more examples
run lint
beforegit push