【记录38】[ECharts] Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.

警告或报错

[ECharts] Can’t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

解说

就是获取不到dom 的宽高导致无法动态渲染dom实例，实际就一定写过了，但是还是没有获取到，为什么呢？是因为

应用环境

实际dom已经初始化并加载出来了，点击对应的事件，无法渲染图型

写法

错误写法：

正确写法：

这里说明下，有些伙伴理解“不是需要根据id去css中设定DOM 的宽高”，这里就有比较说下样式的优先级 style高于class,， class高于id但echarts的加载是需要id 的；
结果排查了半天是因为一个符号写错，服了，写代码的时候还是得注意点。

动态加载echarts图

// 
let operationList = [{label:'第一个echarts', prop:'one'},{label:'第二个echarts', prop:'two'},{label:'第三个echarts', prop:'three'},];
for (let index = 0; index < operationList.length; index++) {
    const element = operationList[index];

        this.$nextTick(() => {
            //  echarts图型的加载渲染
            //  element.prop+'kl'是为了标识DOM的唯一
            this.SixEchartsLine(element.prop+'kl');  
        })

}