echarts插件——关于echarts在默认隐藏的div中不显示的问题

来源:互联网 发布:python与go开发web应用 编辑:程序博客网 时间:2024/05/17 22:24

相信很多实用echarts插件的朋友都会遇到这样的问题,echarts图表在其他的div中可以正常显示,但在一个初始时默认隐藏的div中却显示为空白。
这是因为ECharts 没有获取到div的高宽而导致初始化失败,这时候可以:1.明确指定div的style.width和style.height 2:在div显示后手动调用 echartsInstance.resize 调整尺寸。

对于第一种方式,宽高设置为百分比是不起作用的,应设置为像素值才可以,在“行内样式、css样式表中、js中”设置宽高都是可以的。如:

<button type="button" class="btn btn-success" id="btn">点击显示图表</button><div style="display:none;width:500px;height:300px;" id="echarts_box"></div><script>(function(){    $("#btn").click(function({        $("#echarts_box").css("display","block");    });    var option = {...}    var myChart= echarts.init(document.getElementById('echarts_box'));     myChart.setOption(option);})();</script>

上面的div元素如果不加宽高属性,则点击按钮后echarts是显示不出来的。(没有高度)
现在就可以正常显示了。

原创粉丝点击