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

相信很多实用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是显示不出来的。(没有高度)
现在就可以正常显示了。

你可能感兴趣的:(插件)