echarts大屏轮播不显示的问题

纪录一次echarts 在大屏中切换时，可视化模块echarts不显示的问题

<div ref="myChart"></div>



mounted(){

    this.startUpChart()

},

methods:{

    startUpChart(){

        this.getChartData()

        this.timer = setInterval(() => {

            this.getChartData()                   

        }, 1 * 60 * 1000)

    },

    async getChartData(){

        const res = await getLineData()

        if(res.code === 0){

               this.setChart(res.data)  

        }

    },

    setChart(data){

        this.myChart = echarts.init(this.$refs.myChart)

        if(!this.myChart) this.myChart = echarts.init(this.$refs.myChart)

        const config = {

            ...data,

            //...增加自定义配置       

        }  
        this.myChart.setOption(config)

    }

},

beforeDestroy(){

    this.timer && clearInterval(this.timer)

}

思路1，一开始以为是定时器没有执行成功（不同的大屏界面在轮播切换中，是否会导致定时器设置失败或停滞）

 startUpChart(){

        this.getChartData()

        this.timer = setInterval(() => {

            console.log(this.timer)

            this.getChartData()                   

        }, 1 * 60 * 1000)

        console.log(this.timer)

    },

加了日志定时器正常。

思路2，是否触发了beforDestroy销毁周期，导致触发了清除定时器

beforeDestroy(){

    console.log('beforDestroy')

    this.timer && clearInterval(this.timer)

}

加了日志 无显示触发

思路3，dom未获取到？增加nextTick试试

mounted(){

    this.$nextTick(() => {

         this.startUpChart()

    })

  

},

    setChart(data){

        if(!this.myChart) this.myChart = echarts.init(this.$refs.myChart)

        const config = {

            ...data,

            //...增加自定义配置       

        }  

        this.myChart.setOption(config)

    }

结果没变化

思路4，在偶然的情况下，发现页面最大化，和还原正常 会复现这个问题，即窗口大小没进行自适应适配

mounted(){

    this.$nextTick(() => {

         this.startUpChart()

    })

        window.addEventListener('resize', () => {

            console.log(' on resize >>> ');

            this.myChart && this.myChart.resize()

        })

  

},

    setChart(data){

        if(!this.myChart) this.myChart = echarts.init(this.$refs.myChart)

        const config = {

            ...data,

            //...增加自定义配置       

        }  

        this.myChart.resize()

        this.myChart.setOption(config, true)

    }

最终页面echart可以正常显示了

最终代码示例

<div ref="myChart"></div>



mounted(){

    this.$nextTick(() => {

         this.startUpChart()

    })

},

methods:{

    startUpChart(){

        this.getChartData()

        this.timer = setInterval(() => {

            this.getChartData()                   

        }, 1 * 60 * 1000)

    },

    async getChartData(){

        const res = await getLineData()

        if(res.code === 0){

               this.setChart(res.data)  

        }

    },

    setChart(data){

        if(!this.myChart) this.myChart = echarts.init(this.$refs.myChart)

        const config = {

            ...data,

            //...增加自定义配置       

        }  

        this.myChart.resize()

        this.myChart.setOption(config, true)

    }

},

beforeDestroy(){

    console.log('beforDestroy')

    this.timer && clearInterval(this.timer)

}