在vue3中发现无法出现tooltip，点击顶部示例无法更新问题

问题描述

最近在Vue3项目中使用ECharts5.0制作统计图表，发现配置一切正常，但是tooltip无论如何就是无法显示，所以排查了下原因，发现是ECharts与Vue的响应性特性存在兼容性问题。

问题原因

ECharts在Vue3环境下，使用ECharts5.0+版本会出现该问题。原因是echarts实例不能由Vue来维护（Vue的响应性特性）。
原因： 因vue3中使用了Proxy对象代理，但echarts中使用了大量的===造成对比失败。

处理办法：对Proxy对象进行拆箱。
此时在代码中添加

const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);

在setOption时

unwarp(this.chartObj).setOption(optionData, true);

全部代码如下

<template>
  <div class="basicCharts" ref="_chart"></div>
</template>

<script>

const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
export default {
  name: "basicCharts",
  props: {

  },
  data() {
    return {
      chartObj: null,
    };
  },
  mounted() {
    this.initChart();
  },
  destroyed() {
    this.chartObj && this.chartObj.dispose();
    window.removeEventListener("resize", this.resizeChart);
  },
  methods: {
    initChart() {
      this.chartObj = this.$echarts.init(this.$refs._chart);
      window.addEventListener("resize", this.resizeChart);
    },
    updateChart(optionData) {
      console.log(optionData)
      unwarp(this.chartObj).setOption(optionData, true);
    },
    resizeChart() {
      this.chartObj && this.chartObj.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
.basicCharts {
  width: 750px;
  height: 400px;
  // width: 100%;
  // height: 100%;
  
}
</style>