乐趣区

关于vue.js:解决Echartseltabpane的警告Cant-get-DOM-width-or-height

1 问题形容

环境:

  • Chrome 87
  • Element-Plus
  • Vue3.0.5
  • <el-tab>+<el-tab-pane>中应用Echarts

正告如下:

2 代码

<el-tabs type="border-card">
    <el-tab-pane label="xxx">
        <div id="main" style="width: 500px;height: 500px;">
        </div>
    </el-tab-pane>
</el-tabs>
export default {mounted() {var category = echarts.init(document.getElementById('main'))
        //...
    }
}

3 起因剖析

起因是<el-tab-pane>,具体能够查看这里的issue

Echarts正告的要害是 clientWidthclienHeight,间接在代码中固定高宽时:

<div id="main" style="width: 500px;height: 500px;"></div>

控制台打印为clientHeight/clientWidth

console.log(document.getElementById('main').clientWidth)
console.log(document.getElementById('main').clientHeight)

两者均为0,起因在于<el-tab-pane>,将图表放到里面时并没有正告:

<el-tabs type="border-card">
    <div id="main" style="width: 500px;height: 500px;">
    </div>
    <el-tab-pane label="xxx">
    </el-tab-pane>
</el-tabs>

初始化 Echarts 时,<el-tab-pane>并没有让 Echarts 获取正确的 clientHeight 以及clientWidth,尝试过的解决办法是监听tab-click

<el-tabs type="border-card" @tab-click="xxx">
    <el-tab-pane label="xxx">
        <div id="main" style="width: 500px;height: 500px;">
        </div>
    </el-tab-pane>
</el-tabs>

然而这须要手动点击 tab 能力监听到,也就是如果设置了默认 tab 这是无奈监听到的。

另一个尝试过的计划是手动设置width/height

<el-tabs type="border-card">
    <el-tab-pane label="xxx">
        <div id="main" ref="main" style="width: 500px;height: 500px;">
        </div>
    </el-tab-pane>
</el-tabs>
mounted(){
    this.$refs.main.style.width=500
    this.$refs.main.style.height=500
    var chart = echarts.init(document.getElementById('main'))
}

也是不行。

4 解决方案

应用 Object.defineProperty 设置clientWidth/clientHeight

mounted(){Object.defineProperty(document.getElementById('main'),'clientWidth',{get:function(){return 500;}})
    Object.defineProperty(document.getElementById('main'),'clientHeight',{get:function(){return 500;}})
    var chart = echarts.init(document.getElementById('main'))
}

同时也能够把 div 上的 style 去掉:

<div id="main"></div>

这样就不会呈现正告了。

退出移动版