zoukankan      html  css  js  c++  java
  • vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')

    错误说明

    vue3中,使用data的方式初始化echart图表

    export default {
      data() {
        return {
          chart: null,
          ...
        }
      },
      mounted() {
        this.chart = echarts.init(document.getElementById(this.id))
        this.chart.setOption({...})
      },
      ...
    }
    

    在窗口大小发生变化时,需要执行this.chart.resize()动态调整图表的大小,发生错误:

    错误原因

    vue3中使用proxy的方式监听响应式,this.chart会被在vue内部转换成响应式对象,从而在resize 的时候获取不到

    coordSys.type

    解决方案

    参考官方:

    你可以有选择地退出默认的深度响应式/只读转换模式,并将原始的,未被代理的对象嵌入状态图中。它们可以根据情况灵活运用:

    • 有些值不应该是响应式的,例如复杂的第三方类实例或 Vue 组件对象。
    • 当渲染具有不可变数据源的大列表时,跳过 proxy 转换可以提高性能。

    所以在实例化echart时,将其指定为非响应式的即可。

    import { markRaw } from 'vue'
    this.chart = markRaw(echarts.init(document.getElementById(this.id)))
    

    本文来自博客园,作者:Bin_x,转载请注明原文链接:https://www.cnblogs.com/Bin-x/p/15342949.html

  • 相关阅读:
    [Usaco2008 Nov]mixup2 混乱的奶牛
    [Poi2004] 旅行问题
    [洛谷P1278]单词游戏
    redis20
    redis19
    redis18
    OHC Java堆外缓存详解与应用
    SQL优化
    Mysql安装、字符、引擎设置
    大文件下载
  • 原文地址:https://www.cnblogs.com/Bin-x/p/15342949.html
Copyright © 2011-2022 走看看