[GitHub] [echarts] Youmyin commented on issue #15492: react写的echarts组件在同一个页面中如何多次调用？

[GitBox <gi...@apache.org>]

Youmyin commented on issue #15492:
URL: https://github.com/apache/echarts/issues/15492#issuecomment-894914981


   > Please put `echarts.init` inside `useEffect` or `useLayoutEffect`, render function may call multiple times so ur chart init again and again.
   > 
   > ```js
   > // pie.tsx
   > useEffect(() => {
   >     if (pieRef.current) {
   >       waterChart = echarts.init(pieRef.current);
   >       waterChart.setOption(option);
   >     }
   >   }, [])
   > ```
   
   Thank you! I get no warning, but all the data on the pie chart has become 0. If I use data as a dependent parameter of useEffect, the data can be displayed normally, but warning: There is a chart instance already initialized on the dom. If I add dispose function, it's the problem I mentioned above again.
   
   Option is put in useEffect, I put all the operations of generating the chart in useEffect:
   
   useEffect(() => {
       let option = {........};
       if (pieRef.current) {
           pieChart = echarts.init(pieRef.current);
           pieChart.setOption(option);
       }
   },[data])
   
   
   Or can you take a look at my repo link?


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org