怪奇笔记：Echarts在VUE3(setup)下失控问题

Echarts5.X系列在Vue3的Setup写法下，会出现一些莫名的问题，例如tooltip没了，动态formatter无效，resize，dispose，以及返回页面还保留上一轮数据等问题；经trace后，发现是由于Vue3的Proxy机制导致，解决方案也就有了，在操作/绑定ref(reactive)之前，脱离响应即可。正点如下：

在绑定前：

<script setup>

.......

const state = reactive({

    echartInstance: null

})

let chart = echarts.init(ele)

.........

const option = {

    ........[series.options]

}

//重点

chart.setOption(option);

state.echartInstance = chart; //此时可以消除echart初始化时候的一怪奇问题。

绑定后：

//操作前需要脱离响应，本人用的toRaw，理论上unRef也有用吧，不过没试

let chartInstance = toRaw(state.echartInstance);

........各种你要做的操作，包括dispose，resize，时点更新数据等等，顶着这个脱离响应的chartInsance操作就行了。

//打完收工

state.echartInstance = chartInstance;

以上，可能还有更科学的解决方案，欢迎指出。