解决Vue3+echarts5页面卡顿问题

在使用Vue3+echarts开发可视化界面时，发现开发完之后页面特别卡顿。

看了一些资料发现原因可能在于页面多次渲染。

调试代码：

原来我是用watchEffect监听传入的options，使其做到响应式的setOption

onMounted(() => {
  echartsInstance.value = echarts.init(echartsEl.value, 'light', { renderer: 'canvas' })
  // 使用watchEffect监听依赖变化。
  watchEffect(() => {
    console.log(123) // 执行次数非常多
    echartsInstance.value.setOption(props.options)
  })
  window.addEventListener('resize', echartsResize)
})

问题点就在于使用watchEffect监听依赖变化，会重复执行非常多次，使得页面一直在重绘，所以造成了页面卡顿。

解决方法：使用watch监听依赖。

onMounted(() => {
  echartsInstance.value = markRaw(echarts.init(echartsEl.value, 'light', { renderer: 'canvas' }))
  watch(props, (newProps) => {
    echartsInstance.value.setOption(newProps.options)
  })
  window.addEventListener('resize', echartsResize)
})

最好在加上markRaw，可以使性能更好。

关于markRaw在这里的作用，可以参考这篇文章：
链接: https://blog.csdn.net/weixin_58042855/article/details/133969704?spm=1001.2014.3001.5502

使用这个API也可以解决这个错误：Cannot read properties of undefined (reading ‘type‘)【vue3+echart5报错】