vue中echarts視圖不更新問題及解決

更新時(shí)間：2023年07月01日 09:41:27 作者：嶼-·

這篇文章主要介紹了vue中echarts視圖不更新問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue中echarts視圖不更新

最近寫了一個(gè)可視化，遇到最多的問題就是，封裝成組件接口返回來(lái) 有數(shù)據(jù) ，或者切換數(shù)據(jù)有數(shù)據(jù) ，但可視化視圖不更新

問題就是數(shù)據(jù)只在第一次更新了

在這里插入圖片描述

我解決的方法有兩個(gè)：

v-if判斷有數(shù)據(jù)就顯示
用watch監(jiān)聽

1、直接在組件里判斷有數(shù)據(jù)就可

在這里插入圖片描述

2、在組件里監(jiān)聽數(shù)據(jù)有變化手動(dòng)賦值

在這里插入圖片描述

總結(jié)下來(lái)就是監(jiān)聽是真香后來(lái)遇到的很多問題都是用監(jiān)聽解決的

vue echarts視圖更新緩慢問題

項(xiàng)目中使用echarts畫折線圖顯示設(shè)備上傳的數(shù)據(jù)。

出現(xiàn)bug

1.做條件賽選等操作后需要請(qǐng)求接口從新畫圖，由于線的數(shù)量等會(huì)有變化出現(xiàn)了保留上一次畫圖的折線。

解決辦法：使用setOption試添加第二個(gè)參數(shù)為true

this.myEcharts.setOption(this.chartOption, true)

2.折線圖有畫警示線markLine，要求可以手動(dòng)隱藏顯示該警示線

原本實(shí)現(xiàn)代碼：

 		// 警示線開關(guān)
        lgkeysw() {
            this.alarmLine = !this.alarmLine
            if (!this.alarmLine) {
                this.chartOption.series.forEach((item) => {
                    item.markLine.label.show = false
                    item.markLine.lineStyle.opacity = 0
                })
            } else {
                this.chartOption.series.forEach((item) => {
                    item.markLine.label.show = true
                    item.markLine.lineStyle.opacity = 1
                })
            }
            this.myEcharts.setOption(this.chartOption, true)
        },

后因數(shù)據(jù)量過大，使用setOption將全部折線圖重繪而導(dǎo)致隱藏或顯示markLine的時(shí)間變長(zhǎng)（甚至需要十幾二十秒的時(shí)間），優(yōu)化代碼實(shí)現(xiàn)只修改需要更新的視圖，其他部分不變

// 報(bào)警線開關(guān) LGKEYSW
        lgkeysw(showAlarmBtn) {
            if (!this.alarmBtn) {
                return false
            }
            this.alarmLine = !showAlarmBtn
            let series = []
            if (!this.alarmLine) {
                this.chartOption.series.forEach((item) => {
                    series.push({
                        markLine: {
                            label: {
                                show: false
                            },
                            lineStyle: {
                                opacity: 0
                            }
                        }
                    })
                })
            } else {
                this.chartOption.series.forEach((item) => {
                    series.push({
                        markLine: {
                            label: {
                                show: true
                            },
                            lineStyle: {
                                opacity: 1
                            }
                        }
                    })
                })
            }
            this.myEcharts.setOption(
                {
                    series: series
                },
                { replaceMerge: 'series' }
            )
        },