echarts不显示，白屏,tooltip闪动后自动消失

echarts白屏问题

 一般出现echarts白屏问题都是使用了<div id='lineBar'></div>这种形式。

可以换成ReactEcharts,但是reactEchart的点击事件不如用div那种形式灵活，有时候还会echarts折线图乱码情况。

div加id 可以用useEffect更好的控制某个变量改变时候才刷新图表。

1.div宽高用了100%画布显示不全

给了宽度100%，echarts不识别当成了100px，不用100%就好了，可以使用rem或者vw.

2.tab栏切换canvas画布不显示。

   1.没有给id或者id不唯一

 在遍历时要给图表传入不同的id

   2可以看看自己的代码逻辑是否有误，

看看调用了几次echarts图表，有可能是tab切换时候哪个值导致了tab里的组件重复执行，导致echarts图表重复渲染后canvas被覆盖。

<div id={id}><div> 

这种的div产生一个echarts-instance才会产生画布，echarts-instance一个页面可以有多个，id最好是保证所有页面保持唯一。

3.数据没加载完，画布就渲染了，也会出现白屏。

解决办法：给setOption 加个定时器

setTimeout(()=>{
    myChart.setOption(option,true)
},200)

 其他：点击tooltip出现后很快消失。

解决办法，去掉window点击事件。

UseEffect(()=>{
setChart()

},[JSON.string(xdata),id])

const setChart = ()=>{
const mychart = echarts.init(document.getElementById(id))
mychart.clear()
mychart.setOption(chartOption,true)

    //去掉这个window点击事件tooltip就不会执行两次了。
    {*window.addEventListener('click',()=>{
            mychart.resize()
        }
    )*}



}