tab切换重新渲染Echarts后不显示

echarts高度或者宽度为0或只有100px,echarts高度为0,宽度为0的解决方法

分析原因：

echarts 在默认隐藏的 div 中显示空白，有时候图表会放在多个标签页(tab)里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败（不显示图表、图表的高度为0或者宽度为0），解决办法是在echarts渲染之前先设置 div 的宽高，然后再通过 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 之前先打印一下这个 DOM 容器的宽高即可迅速定位问题。

---

相关

---

Echarts 大小自适应的解决办法