<ReactEcharts
ref={echartsInstance}
onEvents={onEvents}
option={myOptions}
/>
// 获取到echarts实例
const echartsInstance = React.useRef();
// 引入数据区域缩放组件后
const myOptions = { ... };
// 事件处理
const onEvents = {
// 点击重置触发
restore: () => {
const { dispatchAction } = echartsInstance?.current?.getEchartsInstance()?._api;
dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
dataZoomSelectActive: false // true-状态高亮 false-状态取消高亮
})
}
};
echarts有不少得行为可以通过这种方式来进行控制,更多看文档地址。