第二次打开el-dialog,echart图不显示的解决方法

868 阅读1分钟

在工作中遇到一个问题,把项目打包后,在dev环境下,第一次打开dialog弹框,echart图正常显示,但是关掉弹框,第二次打开,echart图就没有显示了,请求的返回结果是有数据的,所以问题是出在echart上。

解决方法: el-dialog有一个open和opened事件,我用的是opened

<el-dialog @opened="opened" /el-dialog>

showEchart(){
    .... 
    //先销毁mychart实例 再重新init 这一步必须加上
    myChart.dispose()
    //echart的初始化
    myChart = echart.init(el)
    option = {
        ......
    }
    myChart.setOption(option)
}
//在opened中调用showEchart方法,这里必须在nextTick中调用
opened(){
this.$nextTick(()=>{
    this.showEchart()
)

不同项目中情况不一样,不可能千篇一律;只要晓得在dialog中使用echart,第一要用open或opend方法使用nextTick,第二是和要先销毁echart实例再重新创建,这样echart图就能出来了;