关于ref 引发 echarts 问题

由于图表要在数据更新时重新渲染图表所以使用了watch，同时两处都要渲染图表就把echarts实例赋值给了ref

const refDiv = ref<HTMLDivElement>();
const refChart = ref<echarts.ECharts>()
onMounted(() => {
  if (refDiv.value === undefined) return;
  refChart.value = echarts.init(refDiv.value);
  refChart.value.setOption({
    ...echartsOption,//解构配置项
    series: [{
        data: props.data,
        type: "line",
      }],
  });
});
watch(()=>props.data,()=>{
  refChart.value?.setOption({
    series:[{
      data:props.data
    }]
  })
})
return () => <div class={s.warpper} ref={refDiv}></div>;
},

但是这时候就发现图表的tooltip无法显示，这就很奇怪为什么会造成这个问题呢？

首先排查了图表配置项没有任何问题，然后仔细检查代码也没发现任何问题，同时控制台也没有任何报错

最后在对比commit log时后发现在上一次提交并未出现这个问题，于是在仔细排查后确定下来是使用了ref后造成了tooltip无法显示的问题

我在使用ref时让refChart.value = echarts.init(refDiv.value)，这时候refChart.value里是一个普通的对象，然后去调用它的setOption，理论上来说是没有问题

但是我在查找资料后，发现了具体问题所在，可能是因为echarts实例赋值给 ref响应式Proxy对象，导致tooltip不显示。

解决方法是不要将 echart实例包装成响应式对象，也就是避免使用ref和 reactive。使用普通变量保存echarts实例，即可解决！

例如使用let

  const refDiv = ref<HTMLDivElement>();
  let chart:echarts.ECharts | undefined=undefined

  onMounted(() => {
    if (refDiv.value === undefined) return;
    chart = echarts.init(refDiv.value);
    chart.setOption({
      ...echartsOption,
      series: [{
          data: props.data,
          type: "line",
        }],
    });
  });
  watch(()=>props.data,()=>{
    chart?.setOption({
      series:[{
        data:props.data
      }]
    })
  })
  return () => <div class={s.warpper} ref={refDiv}></div>;
},