一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
echarts的图表放在可以切换的tab下面，控制台明明没有报错，但是却没有渲染出来，这是为什么呢？
经过排查发现，echarts的canvas是渲染出来的，但是宽度、高度确实0，所以看不到任何图表。
为什么会出来这种情况呢？是因为没有点开的tab默认display:none,是隐藏的，其下面的echarts默认是获取不到宽高的，所以我们要给echarts一个固定的宽高，才能正确渲染
echarts在默认隐藏的div中显示空白，有时候图表会放在多个标签页(tab)里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败（不显示图表、图表的高度为0或者宽度为0），解决办法是在echarts渲染之前先设置div的宽高，然后再调用echarts的setOption配置项和数据显示图表
请注意：这个宽度在一些情况下设置 百分比 是没有作用的，所以得设置为具体数字或者用js赋值，类似这种：
$('main').style.width = (document.body.clientWidth-300)*0.6+'px';
P.S：这里没说高度是因为如果不给容器固定高度，图表是完成不显示的（高度为0的容器肯定不会显示哦）
那么如果想设置echart图表随窗口的缩放变化呢？以下两种写法都可以：
浏览器缩放的时候出发echarts的缩放事件
第一种：
window.onresize = myChart.resize;
// .resize后不用加括号哦，一般如果window resize的时候不设置其他，可以这样写
第二种：
window.onresize = function () {
this.myChart.resize();
// .resize后加括号哦，这里还可以写其他的事件
};
