Vue3 中使用 Echart 折线图，tooltip.trigger:"aisx" 时，提示框不生效问题解决

问题描述：

vue3中使用Echart图表时，采用鼠标横轴悬浮弹出提示框，即tooltip.trigger采用"aisx"时无效。 问题代码片段：

// 缓存echart实例
const state = reactive({
    chart: null
 });
 
// 定义ref变量指向dom
const chartRef =ref(null);

// 初始化Echart
state.chart = echarts.init(chartRef.value, null, {  renderer: 'canvas' });

 // echart option只截取问题部分
 let option = {
   //...
     tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 39, 86, 1)',
            textStyle: {
                    color: '#fff',
            },
            borderWidth: 0,
    }
    // ...
 }
 // 更新echart配置
 state.chart.setOption(option, { replaceMerge: 'series' });

期望结果：

解决方法：

// 缓存echart实例
const state = reactive({
    chart: null
 });

缓存chart实例，改为用普通变量而不采用vue3的reactive变量即可

// 缓存echart实例
let chart = null

原因分析：

目前没有深入研究，初步估计是因为Vue3采用Proxy, Echart还没有兼容Proxy。