Error: `resize` should not be called during main process.

使用echarts根据屏幕变化重新绘制图,一直报这个错,找个了半天也没有发现是哪里的问题

watch: {
    option: {
      handler() {
        this.myEchart = echarts.init(this.$refs.echartsRef)
        this.myEchart.setOption(this.option)
        // this.mountedEchart()
      },
      immediate: false
    }
  },
  mounted() {
    // this.mountedEchart()
    // this.myEchart = echarts.init(this.$refs.echartsRef)
    // this.myEchart.setOption(this.option)

    //当屏幕大小发生改变时,重新画图
    window.addEventListener('resize', () => {
      this.myEchart.resize()
    })
  },

因为这个是我封装的组件要监听option的变化来重新绘制图,所以在watch中init图表

后来我在watch中和mounted中都初始化echarts.init(),这个报错才解决。

watch: {
    option: {
      handler() {
        // this.myEchart = echarts.init(this.$refs.echartsRef)
        // this.myEchart.setOption(this.option)
        this.mountedEchart()
      },
      immediate: false
    }
  },
  mounted() {
    this.mountedEchart()
    // this.myEchart = echarts.init(this.$refs.echartsRef)
    // this.myEchart.setOption(this.option)

    //当屏幕大小发生改变时,重新画图
    window.addEventListener('resize', () => {
      this.myEchart.resize()
    })
  },
  methods: {
    mountedEchart() {
      this.myEchart = echarts.init(this.$refs.echartsRef)
      this.myEchart.setOption(this.option)
    }
  },

但是又出现一个警告echarts.js?1be7:2178 There is a chart instance already initialized on the dom.

又经过不懈的努力终于找到问题的所在了,还是对这个语法没有好好理解,也没有关注警告本身的问题,其实问题就和警告一样,echarts实例已经存在

我是在实例存在的情况下又重新注册了一遍

echarts.init(this.$refs.echartsRef)运行了两遍,所有出现了警告

其实只要重新绘制图标,只要重新setOption就好了,没必要再次注册

watch: {
    option: {
      handler() {
        this.mountedEchart()
      }
    }
  },
  mounted() {
    this.myEchart = echarts.init(this.$refs.echartsRef)
    this.mountedEchart()
    // this.myEchart.setOption(this.option)

    //当屏幕大小发生改变时,重新画图
    window.addEventListener('resize', () => {
      this.myEchart.resize()
    })
  },
  methods: {
    mountedEchart() {
      // this.myEchart = echarts.init(this.$refs.echartsRef)
      //重新绘图只要setOption就好了,不用再init了,再次init就会出现警告但是又出现一个警告
      //`echarts.js?1be7:2178 There is a chart instance already initialized on the dom.`
      this.myEchart.setOption(this.option)
    }
  },

image

posted @   嘿!那个姑娘  阅读(3583)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示