Update

Author: hugocxl

src/echart.tsx

@@ -2,19 +2,15 @@
 import { useECharts } from './use-echarts'
 
 // Types
+import type { EChartsEventProp } from './events'
 import type { UseEChartsOptions } from './use-echarts'
 import type { FC, HTMLAttributes } from 'react'
 
-type ContainerProps = Omit<
-	HTMLAttributes<HTMLDivElement>,
-	| 'onClick'
-	| 'onDoubleClick'
-	| 'onMouseDown'
-	| 'onMouseMove'
-	| 'onMouseOut'
-	| 'onMouseOver'
->
-export type EChartProps = ContainerProps & UseEChartsOptions
+export type EChartProps = UseEChartsOptions &
+	Omit<
+		HTMLAttributes<HTMLDivElement>,
+		keyof UseEChartsOptions | EChartsEventProp
+	>
 
 export const EChart: FC<EChartProps> = ({
 	// Init

src/use-echarts.ts

@@ -318,105 +318,139 @@ export function useECharts<T extends HTMLElement>({
 		if (!echartsInstance) return
 
 		if (onAxisAreaSelected) {
+			echartsInstance.off(ev.onAxisAreaSelected)
 			echartsInstance.on(ev.onAxisAreaSelected, onAxisAreaSelected)
 		}
 		if (onBrush) {
+			echartsInstance.off(ev.onBrush)
 			echartsInstance.on(ev.onBrush, onBrush)
 		}
 		if (onBrushEnd) {
+			echartsInstance.off(ev.onBrushEnd)
 			echartsInstance.on(ev.onBrushEnd, onBrushEnd)
 		}
 		if (onBrushSelected) {
+			echartsInstance.off(ev.onBrushSelected)
 			echartsInstance.on(ev.onBrushSelected, onBrushSelected)
 		}
 		if (onClick) {
+			echartsInstance.off(ev.onClick)
 			echartsInstance.on(ev.onClick, onClick)
 		}
 		if (onContextMenu) {
+			echartsInstance.off(ev.onContextMenu)
 			echartsInstance.on(ev.onContextMenu, onContextMenu)
 		}
 		if (onDataRangeSelected) {
+			echartsInstance.off(ev.onDataRangeSelected)
 			echartsInstance.on(ev.onDataRangeSelected, onDataRangeSelected)
 		}
 		if (onDataViewChanged) {
+			echartsInstance.off(ev.onDataViewChanged)
 			echartsInstance.on(ev.onDataViewChanged, onDataViewChanged)
 		}
 		if (onDataZoom) {
+			echartsInstance.off(ev.onDataZoom)
 			echartsInstance.on(ev.onDataZoom, onDataZoom)
 		}
 		if (onDoubleClick) {
+			echartsInstance.off(ev.onDoubleClick)
 			echartsInstance.on(ev.onDoubleClick, onDoubleClick)
 		}
 		if (onDownplay) {
+			echartsInstance.off(ev.onDownplay)
 			echartsInstance.on(ev.onDownplay, onDownplay)
 		}
 		if (onFinished) {
+			echartsInstance.off(ev.onFinished)
 			echartsInstance.on(ev.onFinished, onFinished)
 		}
 		if (onGeoSelectChanged) {
+			echartsInstance.off(ev.onGeoSelectChanged)
 			echartsInstance.on(ev.onGeoSelectChanged, onGeoSelectChanged)
 		}
 		if (onGeoSelected) {
+			echartsInstance.off(ev.onGeoSelected)
 			echartsInstance.on(ev.onGeoSelected, onGeoSelected)
 		}
 		if (onGeoUnselected) {
+			echartsInstance.off(ev.onGeoUnselected)
 			echartsInstance.on(ev.onGeoUnselected, onGeoUnselected)
 		}
 		if (onGlobalCursorTaken) {
+			echartsInstance.off(ev.onGlobalCursorTaken)
 			echartsInstance.on(ev.onGlobalCursorTaken, onGlobalCursorTaken)
 		}
 		if (onGlobalOut) {
+			echartsInstance.off(ev.onGlobalOut)
 			echartsInstance.on(ev.onGlobalOut, onGlobalOut)
 		}
 		if (onHighlight) {
+			echartsInstance.off(ev.onHighlight)
 			echartsInstance.on(ev.onHighlight, onHighlight)
 		}
 		if (onLegendInverseSelect) {
+			echartsInstance.off(ev.onLegendInverseSelect)
 			echartsInstance.on(ev.onLegendInverseSelect, onLegendInverseSelect)
 		}
 		if (onLegendScroll) {
+			echartsInstance.off(ev.onLegendScroll)
 			echartsInstance.on(ev.onLegendScroll, onLegendScroll)
 		}
 		if (onLegendScroll) {
+			echartsInstance.off(ev.onLegendScroll)
 			echartsInstance.on(ev.onLegendScroll, onLegendScroll)
 		}
 		if (onLegendSelectChanged) {
+			echartsInstance.off(ev.onLegendSelectChanged)
 			echartsInstance.on(ev.onLegendSelectChanged, onLegendSelectChanged)
 		}
 		if (onLegendSelected) {
+			echartsInstance.off(ev.onLegendSelected)
 			echartsInstance.on(ev.onLegendSelected, onLegendSelected)
 		}
 		if (onLegendUnselected) {
+			echartsInstance.off(ev.onLegendUnselected)
 			echartsInstance.on(ev.onLegendUnselected, onLegendUnselected)
 		}
 		if (onMagicTypeChanged) {
+			echartsInstance.off(ev.onMagicTypeChanged)
 			echartsInstance.on(ev.onMagicTypeChanged, onMagicTypeChanged)
 		}
 		if (onMouseDown) {
+			echartsInstance.off(ev.onMouseDown)
 			echartsInstance.on(ev.onMouseDown, onMouseDown)
 		}
 		if (onMouseMove) {
+			echartsInstance.off(ev.onMouseMove)
 			echartsInstance.on(ev.onMouseMove, onMouseMove)
 		}
 		if (onMouseOut) {
+			echartsInstance.off(ev.onMouseOut)
 			echartsInstance.on(ev.onMouseOut, onMouseOut)
 		}
 		if (onMouseOver) {
+			echartsInstance.off(ev.onMouseOver)
 			echartsInstance.on(ev.onMouseOver, onMouseOver)
 		}
 		if (onRendered) {
+			echartsInstance.off(ev.onRendered)
 			echartsInstance.on(ev.onRendered, onRendered)
 		}
 		if (onRestore) {
+			echartsInstance.off(ev.onRestore)
 			echartsInstance.on(ev.onRestore, onRestore)
 		}
 		if (onSelectChanged) {
+			echartsInstance.off(ev.onSelectChanged)
 			echartsInstance.on(ev.onSelectChanged, onSelectChanged)
 		}
 		if (onTimelineChanged) {
+			echartsInstance.off(ev.onTimelineChanged)
 			echartsInstance.on(ev.onTimelineChanged, onTimelineChanged)
 		}
 		if (onTimelinePlayChanged) {
+			echartsInstance.off(ev.onTimelinePlayChanged)
 			echartsInstance.on(ev.onTimelinePlayChanged, onTimelinePlayChanged)
 		}
 	}, [