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

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

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

vue中echarts視圖不更新

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

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

在這里插入圖片描述

我解決的方法有兩個：

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

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

在這里插入圖片描述

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

在這里插入圖片描述

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

vue echarts視圖更新緩慢問題

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

出現(xiàn)bug

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

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

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

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

原本實現(xià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將全部折線圖重繪而導致隱藏或顯示markLine的時間變長（甚至需要十幾二十秒的時間），優(yōu)化代碼實現(xià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' }
            )
        },