vue3 echarts5.4.1 项目重构问题记录，右上角工具栏异常，tooltip异常等

前情提要

最近在重构公司vue2的项目，到了图表这块，我本以为没什么太大的幺蛾子了，没想到解决了近三小时无果，我在排除所有可能性的情况下，怀疑到了响应式代理上，没想到问题真的在这里，分享到这儿，如果有同遇者或有更好的解决方案，欢迎讨论

---

应用场景

公司项目的图表近130几个，以前的写法都是export default 来导出组件，为了节约时间，我打算保留组件的export 写法，没想到遇到了一些问题，一个是右上角还原无效，再有就是图表切换异常，我看了好几遍的配置，发现没有大问题，最终问题出现在了响应式代理上；

原来的写法

export default {
  props: {},
  data () {
    return {
      chart:{}
      }
  }
  mounted () {
        this.chart = window.echarts.init(this.$el.querySelector('.ym-chart'))
  },
}

解决后写法

let chart；
export default {
  props: {},
  data () {
    return {
    }
  }
  mounted () {
        chart = window.echarts.init(this.$el.querySelector('.ym-chart'))
  },
}

---

实战解析

是的有时候解决问题就是这么简单，大多数人在echarts出现问题后就将问题focus到了echarts上，却忘乎了运行环境；当然这个问题是发生在echart5以上，低版本没问题。

我也试过了nextTick,但是他们之间并无联系，我们setOption的时候不会触发响应式，所以合理的解决问题才是重要的，当然因为时间原因，我无法抛析这种组件中的合理写法，欢迎各路大咖讨论；

---

最后

📚 echart专栏
☃️ 个人简介：一个喜爱技术的人。
🌞 励志格言: 脚踏实地，虚心学习。
❗如果文章还可以，记得用你可爱的小手点赞👍关注✅，我会在第一时间回、回访，欢迎进一步交流。