@opd/g2plot-vue

> G2Plot for Vue, see documentation for more


Install

``
npm install @opd/g2plot-vue
`

Usage

![Edit g2plot-vue-basic-example](https://codesandbox.io/s/g2plot-vue-basic-example-uxde9?fontsize=14&hidenavigation=1&theme=dark)

$3

`tsx
import { defineComponent, ref } from 'vue'
import { LineChart, LineChartProps } from '@opd/g2plot-vue'

const config: LineChartProps = {
height: 350,
autoFit: true,
xField: 'year',
yField: 'value',
smooth: true,
meta: {
value: {
max: 15,
},
},
data: [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 11 },
],
}

export default defineComponent(() => {
const chartRef = ref(null)
return () =>
})
`

$3

`vue


`

DEMO

- Vue 3
- github
- online

API

All config defined in G2Plot document can be used as props or attrs

Notable API in g2plot-vue

- chartRef: ref of rendered plot, available after plot mounted, NOT component mounted
- onReady: callback after plot mounted, NOT component mounted

FYI

- Build failed with vite

g2plot-vue use babel to build output files, and transform @babel/runtime with dependencies, so @babel/runtime is required.

Develop

`
npm install
npm run build
``

License