修复bug：echart中dataZoom报错

前提条件：Vue3、echart5.x

配置项

let option = ref({
  dataZoom: [
    {
      show: true,
    },
  ],
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
});

其他代码：

<template>
<div class="echarts-box"> 
    <div ref="myEcharts" :style="{ width: '900px', height: '300px' }"></div> 
</div>
</template>

<script setup>
import * as echarts from "echarts";
import {ref} from 'vue'

let myEcharts = ref(null)
let chart = ref(null)

chart.value = echarts.init(myEcharts.value, null, {
  renderer: 'svg'
});
chart.setOption(option.value)

</script>

然后报错的场景：

解决方法：用markRaw包裹一层

markRaw(
  echarts.init(this.$refs.chartRef, null, { renderer: 'canvas' })
)

原因，原理是什么？我就不清楚了。如果有知道的，麻烦说一下。