Echarts控制台告警Can't get dom width or height

 

写了一个项目，在jsp页面用echarts画了个饼图，结果只有两个方块的背景色，饼图就是出不来，然后把页面单拉出来，放在一个页签，饼图却正常显示，搞的我很郁闷。

然后打开控制台，发现控制台有告警信息：Can't get dom width or height！

我就更郁闷啦，我明明设置了宽高，怎么就是获取不到呢？而且还发现，我打开控制台，刷新页面后，饼图也能出来，控制台关掉，再刷新，饼图就又出不来了。

后来上网上搜，好多都说让在Js中重新设置宽高，然后用

 $(window).on('resize',function(){//屏幕大小自适应，重置容器高宽
      resizeMainContainer();
      mainChart.resize();
});

我试了，并没有什么用。后来在"一纸笔墨"的简书上才发现：

如果容器的height/width属性设置为百分比的形式，那么echarts就会warning，且不能正常的生成图表。所以div容器的高度宽度必须指定为px。

但是每个屏幕大小都不一样，如果写死的话，这自适应能力就太差了，不用百分比不太好，所以，上面作者就用了一种方法，我就直接用上了，发现还真行了，方法如下（重点关注注释中间的几行）： 

//必须当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，再计算宽和高，不然获取到的只能是百分比数值

<!--------------------------------重点开始-------------------------------->

    //设置style宽度 长度 不然echarts无法获取，
    $('#pic2').width($('#pic2').width());
    $('#pic2').height($('#pic2').height());

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('pic2'),'light');       //此处，初始化时的  'light'  也必须写，我试过不写，但是也还是出不来

<!--------------------------------重点结束------------------------------>
    // 指定图表的配置项和数据         
    var option = {....省略};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

关于echarts.init(dom,'light');   我也去官网搜了init的参数，但是并没有发现‘light’是干嘛的，如果有读者知道的话，欢迎下方留言!

 

 

​​​​​​​原文作者：一纸笔墨
链接：https://www.jianshu.com/p/d6b5c3ee944e
來源：简书