g2-vue
Factory wrapper for using G2 easier in a Vue Component with dynamic data and size props
Note that g2-vue is just a wrapper, if you want to make a better chart, docs of G2 is HERE
Install
$ npm install g2 --save
$ npm install g2-vue --saveg2-vue works with a peerDependencies of g2, you can specify the version of g2 in your package.json
Usage
<template>
<div>
<LineChart
:data="lineData"
/>
</div>
</template>
<script>
import createG2 from 'g2-vue'
let lineData = [
{'time': '3-21', 'pm25': 10},
{'time': '3-22', 'pm25': 40}
]
const LineChart = createG2(chart => {
chart.line().position('time*pm25').color('pm25').shape('spline').size(2)
chart.render()
})
export default {
components: {
LineChart
},
data () {
return {
lineData: lineData
}
}
}
</script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent