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
來源:简书

 

  • 6
    点赞
  • 17
    收藏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 12
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值