From c7de3e2966f6235a9726c55c21565c9edda95d56 Mon Sep 17 00:00:00 2001 From: Wang Sen <13710729@qq.com> Date: Thu, 5 Aug 2021 01:07:51 +0800 Subject: [PATCH 1/3] =?UTF-8?q?1.=20=E4=BB=85=E4=BA=8B=E4=BB=B6=E5=8F=98?= =?UTF-8?q?=E5=8C=96=E6=97=B6=E5=8F=AA=E5=88=B7=E6=96=B0echart=E7=BB=91?= =?UTF-8?q?=E5=AE=9A=E7=9A=84=E4=BA=8B=E4=BB=B6=EF=BC=9B2.=20=E5=A6=82?= =?UTF-8?q?=E6=9E=9Cstyle=E6=88=96=E8=80=85className=E5=8F=98=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=E5=85=88=E8=BF=9B=E8=A1=8Cecharts.resize=E5=86=8D?= =?UTF-8?q?=E5=88=B7=E6=96=B0=E6=95=B0=E6=8D=AE=E6=9B=B4=E5=90=88=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core.tsx | 35 ++++++++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/src/core.tsx b/src/core.tsx index b7082a3..869dc86 100644 --- a/src/core.tsx +++ b/src/core.tsx @@ -45,11 +45,9 @@ export default class EChartsReactCore extends PureComponent { // 以下属性修改的时候，需要 dispose 之后再新建 // 1. 切换 theme 的时候 // 2. 修改 opts 的时候 - // 3. 修改 onEvents 的时候，这样可以取消所有之前绑定的事件 issue #151 if ( !isEqual(prevProps.theme, this.props.theme) || - !isEqual(prevProps.opts, this.props.opts) || - !isEqual(prevProps.onEvents, this.props.onEvents) + !isEqual(prevProps.opts, this.props.opts) ) { this.dispose(); @@ -57,23 +55,31 @@ export default class EChartsReactCore extends PureComponent { return; } - // when thoes props isEqual, do not update echarts - const pickKeys = ['option', 'notMerge', 'lazyUpdate', 'showLoading', 'loadingOption']; - if (isEqual(pick(this.props, pickKeys), pick(prevProps, pickKeys))) { - return; + // 修改 onEvent 的时候先移除历史事件再添加 + const echartInstance = this.getEchartsInstance(); + if (!isEqual(prevProps.onEvents, this.props.onEvents)) { + this.offEvents(echartInstance, prevProps.onEvents); + this.bindEvents(echartInstance, this.props.onEvents || {}); } - const echartsInstance = this.updateEChartsOption(); /** * when style or class name updated, change size. */ if (!isEqual(prevProps.style, this.props.style) || !isEqual(prevProps.className, this.props.className)) { try { - echartsInstance.resize(); + echartInstance.resize(); } catch (e) { console.warn(e); } } + + // when thoes props isEqual, do not update echarts + const pickKeys = ['option', 'notMerge', 'lazyUpdate', 'showLoading', 'loadingOption']; + if (isEqual(pick(this.props, pickKeys), pick(prevProps, pickKeys))) { + return; + } + + this.updateEChartsOption(); } componentWillUnmount() { @@ -151,6 +157,17 @@ export default class EChartsReactCore extends PureComponent { } } + // off the events + private offEvents(instance, events: EChartsReactProps['onEvents']) { + if (!events) return; + // loop and off + for (const eventName in events) { + if (isString(eventName)) { + instance.off(eventName); + } + } + } + /** * render the echarts */ From 110cf0c17e14a53a2b46c55f7255f8a611eaa8ba Mon Sep 17 00:00:00 2001 From: Wang Sen <13710729@qq.com> Date: Thu, 4 Nov 2021 23:23:06 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=A3=80=E8=A7=86=E6=84=8F=E8=A7=81?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/core.tsx b/src/core.tsx index 869dc86..76518f4 100644 --- a/src/core.tsx +++ b/src/core.tsx @@ -56,10 +56,10 @@ export default class EChartsReactCore extends PureComponent { } // 修改 onEvent 的时候先移除历史事件再添加 - const echartInstance = this.getEchartsInstance(); + const echartsInstance = this.getEchartsInstance(); if (!isEqual(prevProps.onEvents, this.props.onEvents)) { - this.offEvents(echartInstance, prevProps.onEvents); - this.bindEvents(echartInstance, this.props.onEvents || {}); + this.offEvents(echartsInstance, prevProps.onEvents); + this.bindEvents(echartsInstance, this.props.onEvents); } /** @@ -67,7 +67,7 @@ export default class EChartsReactCore extends PureComponent { */ if (!isEqual(prevProps.style, this.props.style) || !isEqual(prevProps.className, this.props.className)) { try { - echartInstance.resize(); + echartsInstance.resize(); } catch (e) { console.warn(e); } From 5e04f2675fb26a3dccbb4726a23a7f7f3436a0cd Mon Sep 17 00:00:00 2001 From: Wang Sen <13710729@qq.com> Date: Fri, 5 Nov 2021 03:42:54 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E7=94=A8=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/charts/event-spec.tsx | 89 +++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 __tests__/charts/event-spec.tsx diff --git a/__tests__/charts/event-spec.tsx b/__tests__/charts/event-spec.tsx new file mode 100644 index 0000000..80a4e57 --- /dev/null +++ b/__tests__/charts/event-spec.tsx @@ -0,0 +1,89 @@ +import React, { useState, useEffect } from 'react'; +import { act } from 'react-dom/test-utils'; +import ReactECharts from '../../src'; +import { render, destroy, createDiv, removeDom } from '../utils'; + +describe('chart', () => { + it('event change', async () => { + let echartsInstance; + const div = createDiv(); + let eventParam = null; + const ChartEventChange: React.FC = (props) => { + const option = { + title : { + text: '某站点用户访问来源', + subtext: '纯属虚构', + x:'center' + }, + tooltip : { + trigger: 'item', + formatter: "{a}
{b} : {c} ({d}%)" + }, + legend: { + orient: 'vertical', + left: 'left', + data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] + }, + series : [ + { + name: '访问来源', + type: 'pie', + radius : '55%', + center: ['50%', '60%'], + data:[ + {value:335, name:'直接访问'}, + {value:310, name:'邮件营销'}, + {value:234, name:'联盟广告'}, + {value:135, name:'视频广告'}, + {value:1548, name:'搜索引擎'} + ], + itemStyle: { + emphasis: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }; + + const [onEvents, setOnEvents] = useState(null); + + useEffect(() => { + setTimeout(() => { + setOnEvents({ + mousedown: param => eventParam = param + }); + }, 500) + }, []); + + return ( + + ); + }; + const Comp = (echartsInstance = echarts)} />; + render(Comp, div); + + expect(echartsInstance).toBeDefined(); + + let e = new MouseEvent('mousedown', { + clientX: div.offsetLeft + div.offsetWidth / 2, + clientY: div.offsetTop + div.offsetHeight / 2, + bubbles: true, + cancelable: false + }); + div.querySelector('canvas').dispatchEvent(e); + expect(eventParam).toBe(null); + + await act(async () => { + await new Promise(resolve => setTimeout(resolve, 600)); + div.querySelector('canvas').dispatchEvent(e); + expect(eventParam).toBeDefined(); + expect(eventParam.type).toEqual('mousedown'); + }); + + destroy(div); + removeDom(div); + }); +});