From 46b5a4a88d3cb0224e68ca726c8f73ebeca1c6cc Mon Sep 17 00:00:00 2001 From: zengyue ye Date: Fri, 29 Apr 2022 20:52:28 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E4=B8=80=E5=A4=84=E7=90=86?= =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E6=9B=B4=E6=96=B0=E7=9A=84=E9=80=BB?= =?UTF-8?q?=E8=BE=91=20(#1463)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../my/examples/test/pages/index/_index.js | 29 --------- .../my/examples/test/pages/index/_index.jsx | 18 ----- .../my/examples/test/pages/index/index.axml | 2 +- .../my/examples/test/pages/index/index.js | 65 +++++++++++++++---- .../my/examples/test/pages/index/index.jsx | 45 +++++++++++++ packages/my/src/index.tsx | 6 +- .../wx/examples/test/pages/index/index.js | 55 +++++++++++++--- .../wx/examples/test/pages/index/index.jsx | 42 +++++++++--- packages/wx/src/index.ts | 14 +++- 9 files changed, 193 insertions(+), 83 deletions(-) delete mode 100644 packages/my/examples/test/pages/index/_index.js delete mode 100644 packages/my/examples/test/pages/index/_index.jsx create mode 100644 packages/my/examples/test/pages/index/index.jsx diff --git a/packages/my/examples/test/pages/index/_index.js b/packages/my/examples/test/pages/index/_index.js deleted file mode 100644 index fc54b6370..000000000 --- a/packages/my/examples/test/pages/index/_index.js +++ /dev/null @@ -1,29 +0,0 @@ -// 直接通过 jsx 声明式使用 -import Chart from './chart'; -import { jsx as _jsx } from "@antv/f2/jsx-runtime"; -const data = [{ - genre: 'Sports', - sold: 275 -}, { - genre: 'Strategy', - sold: 115 -}, { - genre: 'Action', - sold: 120 -}, { - genre: 'Shooter', - sold: 350 -}, { - genre: 'Other', - sold: 150 -}]; -Page({ - data: {}, - - onRenderChart() { - return _jsx(Chart, { - data: data - }); - } - -}); \ No newline at end of file diff --git a/packages/my/examples/test/pages/index/_index.jsx b/packages/my/examples/test/pages/index/_index.jsx deleted file mode 100644 index 34abc292c..000000000 --- a/packages/my/examples/test/pages/index/_index.jsx +++ /dev/null @@ -1,18 +0,0 @@ -// 直接通过 jsx 声明式使用 -import Chart from './chart'; - -const data = [ - { genre: 'Sports', sold: 275 }, - { genre: 'Strategy', sold: 115 }, - { genre: 'Action', sold: 120 }, - { genre: 'Shooter', sold: 350 }, - { genre: 'Other', sold: 150 } -]; - -Page({ - data: { - }, - onRenderChart() { - return - } -}); diff --git a/packages/my/examples/test/pages/index/index.axml b/packages/my/examples/test/pages/index/index.axml index 5fa0b7129..31eb304f8 100644 --- a/packages/my/examples/test/pages/index/index.axml +++ b/packages/my/examples/test/pages/index/index.axml @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/packages/my/examples/test/pages/index/index.js b/packages/my/examples/test/pages/index/index.js index 0d3f30909..0ffa21948 100644 --- a/packages/my/examples/test/pages/index/index.js +++ b/packages/my/examples/test/pages/index/index.js @@ -1,21 +1,62 @@ // 通过 createElement 方式创建 import { createElement } from '@antv/f2'; import Chart from './chart'; +import { jsx as _jsx } from "@antv/f2/jsx-runtime"; +const data1 = [{ + genre: 'Sports', + sold: 275 +}, { + genre: 'Strategy', + sold: 115 +}, { + genre: 'Action', + sold: 120 +}, { + genre: 'Shooter', + sold: 350 +}, { + genre: 'Other', + sold: 150 +}]; +const data2 = [{ + genre: 'Sports', + sold: 275 +}, { + genre: 'Strategy', + sold: 115 +}, { + genre: 'Action', + sold: 20 +}, { + genre: 'Shooter', + sold: 50 +}, { + genre: 'Other', + sold: 50 +}]; +Page({ + data: {// chartData: data1, + }, -const data = [ - { genre: 'Sports', sold: 275 }, - { genre: 'Strategy', sold: 115 }, - { genre: 'Action', sold: 120 }, - { genre: 'Shooter', sold: 350 }, - { genre: 'Other', sold: 150 } -]; + onReady() { + this.setData({ + chartData: data1 + }); // 模拟数据更新 -Page({ - data: { + setTimeout(() => { + this.setData({ + chartData: data2 + }); + }, 2000); }, - onRenderChart() { - return createElement(Chart, { + + onRenderChart(props) { + const { + data + } = props; + return _jsx(Chart, { data: data }); } -}); + +}); \ No newline at end of file diff --git a/packages/my/examples/test/pages/index/index.jsx b/packages/my/examples/test/pages/index/index.jsx new file mode 100644 index 000000000..08af9b18f --- /dev/null +++ b/packages/my/examples/test/pages/index/index.jsx @@ -0,0 +1,45 @@ +// 通过 createElement 方式创建 +import { createElement } from '@antv/f2'; +import Chart from './chart'; + +const data1 = [ + { genre: 'Sports', sold: 275 }, + { genre: 'Strategy', sold: 115 }, + { genre: 'Action', sold: 120 }, + { genre: 'Shooter', sold: 350 }, + { genre: 'Other', sold: 150 }, +]; + +const data2 = [ + { genre: 'Sports', sold: 275 }, + { genre: 'Strategy', sold: 115 }, + { genre: 'Action', sold: 20 }, + { genre: 'Shooter', sold: 50 }, + { genre: 'Other', sold: 50 }, +]; + +Page({ + data: { + // chartData: data1, + }, + onReady() { + this.setData({ + chartData: data1, + }); + // 模拟数据更新 + setTimeout(() => { + this.setData({ + chartData: data2, + }); + }, 2000); + }, + onRenderChart(props) { + const { data } = props; + return ; + + // 如果不使用 jsx, 用下面代码效果也是一样的 + // return createElement(Chart, { + // data: data, + // }); + }, +}); diff --git a/packages/my/src/index.tsx b/packages/my/src/index.tsx index 9670e3ee7..e58195a70 100644 --- a/packages/my/src/index.tsx +++ b/packages/my/src/index.tsx @@ -16,7 +16,7 @@ const isAppX2CanvasEnv = () => Component({ props: { - onRender: () => {}, + onRender: (_props) => {}, // width height 会作为元素兜底的宽高使用 width: null, height: null, @@ -60,7 +60,7 @@ Component({ didUpdate() { const { canvas, props } = this; if (!canvas) return; - const children = props.onRender(); + const children = props.onRender(props); canvas.update({ children, }); @@ -100,7 +100,7 @@ Component({ if (!width || !height) { return; } - const children = this.props.onRender(); + const children = this.props.onRender(this.props); const canvas = new Canvas({ pixelRatio, width, diff --git a/packages/wx/examples/test/pages/index/index.js b/packages/wx/examples/test/pages/index/index.js index a2a667c6d..603cda076 100644 --- a/packages/wx/examples/test/pages/index/index.js +++ b/packages/wx/examples/test/pages/index/index.js @@ -1,8 +1,8 @@ // index.js -// import { createElement } from '@antv/f2'; +import { createElement } from '@antv/f2'; import Chart from './chart'; import { jsx as _jsx } from "@antv/f2/jsx-runtime"; -const data = [{ +const data1 = [{ genre: 'Sports', sold: 275 }, { @@ -18,16 +18,51 @@ const data = [{ genre: 'Other', sold: 150 }]; +const data2 = [{ + genre: 'Sports', + sold: 275 +}, { + genre: 'Strategy', + sold: 115 +}, { + genre: 'Action', + sold: 20 +}, { + genre: 'Shooter', + sold: 50 +}, { + genre: 'Other', + sold: 50 +}]; Page({ data: { - onRenderChart() { - return _jsx(Chart, { - data: data - }); // 如果不使用 jsx, 用下面代码效果也是一样的 - // return createElement(Chart, { - // data: data, - // }); - } + chartData: data1, + onRenderChart: () => {} + }, + onReady() { + this.setData({ + onRenderChart: () => { + return this.renderChart(data1); + } + }); // 模拟数据更新 + + setTimeout(() => { + this.setData({ + onRenderChart: () => { + return this.renderChart(data2); + } + }); + }, 2000); + }, + + renderChart(data) { + return _jsx(Chart, { + data: data + }); // 如果不使用 jsx, 用下面代码效果也是一样的 + // return createElement(Chart, { + // data: data, + // }); } + }); \ No newline at end of file diff --git a/packages/wx/examples/test/pages/index/index.jsx b/packages/wx/examples/test/pages/index/index.jsx index a3a95a772..62f425fef 100644 --- a/packages/wx/examples/test/pages/index/index.jsx +++ b/packages/wx/examples/test/pages/index/index.jsx @@ -2,23 +2,47 @@ import { createElement } from '@antv/f2'; import Chart from './chart'; -const data = [ +const data1 = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, - { genre: 'Other', sold: 150 }, + { genre: 'Other', sold: 150 } +]; + +const data2 = [ + { genre: 'Sports', sold: 275 }, + { genre: 'Strategy', sold: 115 }, + { genre: 'Action', sold: 20 }, + { genre: 'Shooter', sold: 50 }, + { genre: 'Other', sold: 50 } ]; Page({ data: { - onRenderChart() { - return ; + onRenderChart: () => {}, + }, + onReady() { + this.setData({ + onRenderChart: () => { + return this.renderChart(data1); + }, + }) - // 如果不使用 jsx, 用下面代码效果也是一样的 - // return createElement(Chart, { - // data: data, - // }); - }, + // 模拟数据更新 + setTimeout(() => { + this.setData({ + onRenderChart: () => { + return this.renderChart(data2); + }, + }) + }, 2000); + }, + renderChart(data) { + return ; + // 如果不使用 jsx, 用下面代码效果也是一样的 + // return createElement(Chart, { + // data: data, + // }); }, }); diff --git a/packages/wx/src/index.ts b/packages/wx/src/index.ts index 6bb567969..822af4000 100644 --- a/packages/wx/src/index.ts +++ b/packages/wx/src/index.ts @@ -39,7 +39,7 @@ Component({ // 高清设置 node.width = width * pixelRatio; node.height = height * pixelRatio; - const children = this.data.onRender(); + const children = this.data.onRender(this.data); const canvas = new Canvas({ pixelRatio, width, @@ -53,6 +53,18 @@ Component({ }); }, + observers: { + // 处理 update + '**': function() { + const { canvas, data } = this; + if (!canvas) return; + const children = data.onRender(data); + canvas.update({ + children, + }); + }, + }, + lifetimes: { detached() { const { canvas } = this;