本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
echarts算是比较常用的图表工具，官网例子在使用echarts画图的时候一般会给个固定的宽高。我们正常使用的时候也有给固定高度的，但现在大多是自适应的项目，所以更多的是用百分比来表示宽高。
用百分比正常也是没问题的，不过在某些情况下用百分比会有问题。不知道大家有没有遇到这种情况：最开始盛放图表的容器是隐藏（或者tab切换）的，然后经过某种交互再显示的时候，里面echarts图表就没用初始大小了。比如我遇到的这种，切换tab之后图表变成了这样：
有童鞋这会儿估计看出原因了：因为元素最初隐藏，再显示之后没有自动变化宽度，所以echarts图表没有初始宽高，官方文档的说法（好几年前的，大家可以去官网文档看最新版 echarts官网）：
请注意：这个宽度在一些情况下设置 百分比 是没有作用的，所以得设置为具体数字或者用js赋值，类似这种（原谅最早写博文还在那个用jquery的年代）：
$('main').style.width = (document.body.clientWidth-300)*0.6+'px';
P.S：这里没说高度是因为如果不给容器固定高度，图表是完成不显示的（高度为0的容器肯定不会显示哦）
那么如果想设置echart图表随窗口的缩放变化呢？以下两种写法都可以：
第一种：
window.onresize = myChart.resize;
// .resize后不用加括号哦，一般如果window resize的时候不设置其他，可以这样写
第二种：
window.onresize = function () {
this.myChart.resize();
// .resize后加括号哦，这里还可以写其他的事件
};
不过还是建议不要在过多的页面给window绑定onresize事件，因为有时候会冲突不说，还可能在各个功能之间相互影响。
echarts官方文档写的很详细哦，需要的童鞋自己去翻阅。
希望本文对你有所帮助！
