echarts-for-react使用问题

138 阅读1分钟

 切换图表的时候图标的动画丢失

原因

经过排查发现是在使用的时候添加的事件引起的,如果去除图表就能正常的展示动画效果

<ReactEchart 
    onEvents={{click: () => {
        console.log('click charts')
    }}}
>

解决办法

通过ref绑定来监听click事件

useEffect(() => {
  const chartInstance = chartRef.current?.getEchartsInstance()
    chartInstance.on('click',(data) => {
      console.log('data---->', data);
    })
    return () => {
      if(chartInstance) {
        chartInstance.off('click')
      }
    }
},[])


<ReactCharts ref={chartRef}>