G2Plot for
Vue, see documentation for more
npm install @opd/g2plot-vue 
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 () => <LineChart {...config} chartRef={chartRef} /> })<template> <line-chart v-bind="config" /> </template> <script> import Vue from 'vue' import { LineChart } from '@opd/g2plot-vue' Vue.use(LineChart) export default { data() { return { config: { 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 }, ], }, } }, } </script>All config defined in G2Plot document can be used as props or attrs
Notable API in g2plot-vue
chartRef:refof renderedplot, available afterplotmounted, NOT component mountedonReady:callbackafterplotmounted, NOT component mounted
-
g2plot-vueusebabelto build output files, and transform@babel/runtimewith dependencies, so@babel/runtimeis required.
npm install npm run build 