e-charts 图表第一次加载位置错位问题（vue） | 8月更文挑战

E-charts可以说是前端必不可少的图形化插件之一，它的官方API和示例相对来说很丰富，但是在实际应用中你会遇到奇奇怪怪的问题，今天就以饼图为例。

从上图可以看出，第一次加载时，它靠近容器的右侧，不在正中间，手动刷新页面后，图表重新渲染到容器正中间，html中给的是宽度是100%，并在mounted生命周期里调用，按理说没啥毛病啊。经过多次尝试排查原因后发现，主要是页面加载和图表渲染顺序原因，所以可以在mounted中加一个settimeout：

setTimeout(()=>{
            this.getPecChart() // 图表调用方法
			 })

然后就发现第一次加载也正常了😄

那们问题又来了，图表是自适应的，但是我改变窗口的时候，并没有自适应啊？

当然了，你有没有监听窗口改变啊，添加方法（此处是写在getPecChart方法内）

window.onresize = () => {
                myChart.resize()
            }