tab切换重新渲染Echarts,echarts不显示

echarts二次渲染不生效,echarts绘制失败,echarts加载不出来,高度或者宽度为0

分析原因：

echarts在默认隐藏的div中显示空白，有时候图表会放在多个标签页(tab)里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败（不显示图表、图表的高度为0或者宽度为0），解决办法是在echarts渲染之前先设置div的宽高，然后再调用echarts的setOption配置项和数据显示图表。

解决方法：

一：tab切换形式（通过display: none / block），在切换之后先设置ID元素的宽度和高度再调用echarts；

例：

$('#main').css('height','100px')

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption(option);

二：追加的html中含有echarts（append ），直接在ID元素上添加style 属性；

例：

$("#id").append('<div id="main" style="width:100px;height:100px"></div>'));

如果不知道是不是因为宽度和高度导致echarts不加载的话，可以在setOption之前先打印一下这个容易的宽高即可迅速定位问题。

相关

---

Echarts 大小自适应的解决办法

echarts查看版本