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
The component is exposed as window.G2VChart
.
// register component to useVue
Use npm(Recommended)
npm install g2-for-vue
Register Component
// register component to useVue
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
{ const g2VChart = this$refs'g2-vchart'; const width = g2VChartwidth; const height = g2VChartheight; console}
Methods
-
downloadImage
(name: string)图表导出功能,通过传入 name 来指定下载图片的文件名。
-
getDataURL
-
changeVisible
-
resize
-
clear
-
repaint
-
destroy
-
dispatchAction
(name: string, ...args: any[]) To see more actions support: G2.Chart Methodsexample
thisvchart
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:
{ // 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 modules manually to reduce bundle size,such as Geoms,Facets, Interaction// geoms;;;;;;;;;; // facets; // interaction;
- use
resize-detector
- add more examples
-
run lint
beforegit push