✍需求背景
在日常开发中经常会遇到需要用到图表展示的地方，Echarts图表库是当下流行的一个图标库，在使用过程中，会遇到一些问题，下面分享一下我遇到的一个值得记录的问题：
在开发图表需求的时候，经常需要图表能够自适应页面，但是Echarts使用的时候，会遇到这么个问题：
当我设置图表width为50%的时候，发现下层元素无法识别%,会渲染成px，也就是50px。
✔解决方案：
查询网上很多资料都说是源码无法识别%, 然后需要自己动态获取，后来自己测试了一下，发现其实是可以设置的，只不过导致宽度没有被撑开的原因是echarts图表init的时候，父元素还没有宽度，例如tag页，例如一些特殊的页面，总之如果想要自适应百分比，则需要在父元素有宽度时候才初始化，这里可以用nextTick进行处理。
✨tip:
但是只是初始化显然不能达到自适应页面的需求，我们可以结合
echart提供的resize()，以及window.addEventListener('resize', fn)实现。
这个记得用this.$once('hook:beforeDestroy')进行销毁监听。
👀相关代码：
// 自适应
const handler = () => echart.resize()
window.addEventListener('resize', handler)
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', handler)
})
