docs(demo): update demo

qiuweikangdev · Dec 7, 2022 · d7e5b1f · d7e5b1f
1 parent 8920fe1
commit d7e5b1f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -52,10 +52,12 @@ import Echarts from 'taro-react-echarts'
 # 使用
 
 ```js
-import Echarts, { EChartOption } from 'taro-react-echarts';
+import { useRef } from 'react'
+import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
 import echarts from '@/assets/js/echarts.js'
 
 export default function Demo() {
+ const echartsRef = useRef<EchartsHandle>(null)
  const option: EChartOption = {
     legend: {
       top: 50,
@@ -86,6 +88,7 @@ export default function Demo() {
       <Echarts
         echarts={echarts}
         option={option}
+        ref={echartsRef}
       ></Echarts>
   );
 }

diff --git a/packages/demo/src/pages/index/index.tsx b/packages/demo/src/pages/index/index.tsx
@@ -1,8 +1,10 @@
-import Echarts, { EChartOption } from 'taro-react-echarts'
+import { useRef } from 'react'
+import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
 import echarts from '../../assets/js/echarts'
 import './index.less'
 
 export default function Demo() {
+  const echartsRef = useRef<EchartsHandle>(null)
   const option: EChartOption = {
     legend: {
       top: 50,
@@ -29,5 +31,5 @@ export default function Demo() {
     ],
   }
 
-  return <Echarts echarts={echarts} option={option} />
+  return <Echarts echarts={echarts} option={option} ref={echartsRef} />
 }
diff --git a/packages/echarts/README.md b/packages/echarts/README.md
@@ -45,17 +45,19 @@ import Echarts from 'taro-react-echarts'
 
 ## Events
 
-| 事件名            | 描述                             | 类型       | 必传  | 默认值 |
-| -------------- | ------------------------------ | -------- | --- | --- |
-| `onChartReady` | 当图表准备好时，将使用 echarts 对象作为参数回调函数 | Function | 否   |     |
+| 事件名         | 描述                                                | 类型     | 必传 | 默认值 |
+| -------------- | --------------------------------------------------- | -------- | ---- | ------ |
+| `onChartReady` | 当图表准备好时，将使用 echarts 对象作为参数回调函数 | Function | 否   |        |
 
 # 使用
 
 ```js
-import Echarts, { EChartOption } from 'taro-react-echarts';
+import { useRef } from 'react'
+import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
 import echarts from '@/assets/js/echarts.js'
 
 export default function Demo() {
+ const echartsRef = useRef<EchartsHandle>(null)
  const option: EChartOption = {
     legend: {
       top: 50,
@@ -86,6 +88,7 @@ export default function Demo() {
       <Echarts
         echarts={echarts}
         option={option}
+        ref={echartsRef}
       ></Echarts>
   );
 }
@@ -96,3 +99,4 @@ export default function Demo() {
 | 项目                                                         | 描述                                             |
 | ------------------------------------------------------------ | ------------------------------------------------ |
 | [taro-react-table](https://github.com/qiuweikangdev/taro-react-table) | 基于 taro3、react 的 H5 和微信小程序多端表格组件 |
+