Echarts中无法还原区域缩放问题处理

最新推荐文章于 2024-07-30 21:13:40 发布

原创最新推荐文章于 2024-07-30 21:13:40 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #react.js

这篇博客介绍了如何在React应用中通过ReactEcharts组件与Echarts实例交互，特别是在事件处理方面。作者展示了如何监听并响应Echarts的`restore`事件，以及如何通过`dispatchAction`方法控制数据区域缩放的状态。文章强调了利用Echarts API进行图表行为控制的重要性，并提供了详细的操作示例。

<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-状态取消高亮
      })
    }
  };