diff --git a/.babelignore b/.babelignore new file mode 100644 index 00000000..20ebae44 --- /dev/null +++ b/.babelignore @@ -0,0 +1 @@ +.umi diff --git a/docs/guide/get-started.md b/docs/guide/get-started.md index 321ad54a..5e370d80 100644 --- a/docs/guide/get-started.md +++ b/docs/guide/get-started.md @@ -116,3 +116,161 @@ export default () => { return } ``` + +## Update Data + +```tsx +import React, { useCallback, useState } from 'react' +import { LineChart } from '@opd/g2plot-react' + +const config = { + height: 400, + title: { + visible: true, + text: 'LineChart', + }, + description: { + visible: true, + text: 'This is Description', + }, + padding: 'auto', + forceFit: true, + xField: 'year', + yField: 'value', + label: { + visible: true, + type: 'point', + }, + point: { + visible: true, + size: 5, + }, + xAxis: { + tickCount: 10, + }, +} + +export default () => { + const getChart = useCallback((chart) => { + console.log(chart) + }, []) + const getContainer = useCallback((container) => { + console.log(container) + }, []) + + const [data, setData] = useState([ + { 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 }, + ]) + + const handleBtnClick = useCallback(() => { + setData([ + { 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 }, + { year: '2000', value: 14 }, + ]) + }, []) + + return ( +
+ + +
+ ) +} +``` + +## Update Config + +```tsx +import React, { useCallback, useState } from 'react' +import { LineChart } from '@opd/g2plot-react' + +const config = { + height: 400, + title: { + visible: true, + text: 'LineChart', + }, + description: { + visible: true, + text: 'This is Description', + }, + padding: 'auto', + forceFit: true, + xField: 'year', + yField: 'value', + label: { + visible: true, + type: 'point', + }, + point: { + visible: true, + size: 5, + }, + xAxis: { + tickCount: 10, + }, + 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 () => { + const getChart = useCallback((chart) => { + console.log(chart) + }, []) + const getContainer = useCallback((container) => { + console.log(container) + }, []) + + const [restConfig, setConfig] = useState({}) + + const handleBtnClick = useCallback(() => { + setConfig({ + point: { + visible: false, + }, + }) + }, []) + + return ( +
+ + +
+ ) +} +``` diff --git a/src/components/base/index.tsx b/src/components/base/index.tsx index d48c844e..aecab505 100644 --- a/src/components/base/index.tsx +++ b/src/components/base/index.tsx @@ -134,6 +134,7 @@ const BaseChart = ( if (!isEqual(config, configRef.current)) { configRef.current = cloneDeep(config) chart.updateConfig(config as RecursivePartial) + chart.render() } else { if (data) { chart.changeData(data)