Vue3使用echarts

最近在学Vue3，闲来无事随便找了个界面画画，有时候太自信也是问题，本觉得Vue3除了一些写法和原理变更以外其他都差不多，真正动手做的时候才发现原来有挺多坑。
这篇文章针对echarts用法做个简单记录，同时提醒一下自己，要多看更要多动手。

框架：vue3 + TypeScript+vite
echarts版本：5.4.0

遇到的问题：
逻辑：全局定义一个属性接收视图，在onMounted生命周期初始化echarts，方便在指定位置或者数据请求之后进行更新。
按照Vue2的写法

var someEcharts = null

onMounted(()=>{
    someEcharts = echarts.init(document.getElementById('chart-view'))
})

const doSomething = () => {
  let options = {……}
  someEcharts.setOptions(options)
}

看上去很正常，初次加载options时也是正常渲染。但是当切换options或者点击图例的时候，页面就会报错

Cannot read property ‘type‘ of undefined
// 无法读取未定义的属性“type”

我蒙了，Vue2和Vue3难道不通用？还是是Ts语法导致的问题？或者是Ts类型推断导致的刷新异常？
之后各种尝试在初始化时定义属性，echarts.EchartsType或as HTMLElement，结果都无效。
两小时无果，没办法只能去echarts官网和Vue3官网看文档了。
结果：echarts没有任何说明
正在我头疼时，突然发现Api文档中有几个不明所以的东西，unref、toRef、toRaw、markRow。
别的懒得讲了，这里直接讲一下用到的吧：

// markRow
// 作用:标记一个对象,使其永远不会再成为响应式对象（界面不会更新）
// 应用场景:
// 1.有些值不应被设置成响应式时,例如复杂的第三方类库等
// 2.当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能
// 3.在动态渲染组件的时候我们就可以使用 markRaw 包裹。
// 实际上并不是真不变，当markRow修饰的内容和需要相应的内容一起改变时，仍然会作为响应式对象

// toRaw，将响应式对象（由 reactive定义的响应式）转换为普通对象。不再被proxy代理

中间过程也比较麻烦，懒得讲了，直接附代码(毕竟不是教程文档)

import {markRaw, onMounted} from 'vue'
import * as echarts from 'echarts'

<script setup lang="ts">
  const someEcharts = ref<any>();
  onMounted(() => {
    someEcharts.value = markRaw(
      echarts.init(
        document.getElementById("chart-view") as HTMLElement
      )
    );
    loadCharts()
    window.onresize = function () {
      someEcharts.value.resize();
    };
  });
  const loadCharts = () => {
    type EChartsOption = echarts.EChartsOption;
    someEcharts.value.setOption(options() as EChartsOption);
  };
</script>

至此，echarts功能全部正常。有需要或者遇到同样问题的兄弟可以参照上面写法去调整。
再次提醒自己，不要眼高手低，看文档的时候脑子说“我会了”，做的时候手抓脑袋“怎么不行”，要多看多做多尝试