vue echarts 遇到的bug之一 沒法渲染的問題

圖表示這樣的

 

頁面上有不少個圖表，因爲沒有查詢按鈕，就只是點擊發送ajax數據，因此把全部圖表的方法放在updated中，

 

功能是實現了沒問題，可是加載頁面的時候會發送不少的ajax請求，並且點擊修改的時候整個頁面的圖表都會重繪，
目前考慮的解決辦法是作一個判斷，若是當前的的這個對象的數值發生改變了再出發DOM更新 ，你們有沒有更好的方法，謝啦
感謝@zhaokang 的回答，我在設置watch監聽數組以後，已經能夠動態的更新echarts圖表，

 

效果以下 touchComparison是一個數組

 

可是新的問題又來了，以前的需求是進入頁面自動加載六個圖表。以前寫在updated是沒問題，可是會致使發送大量重複的請求，以及總體的更新。
此次watch以後，寫在mounted裏進入頁面渲染圖表

 

可是報錯，提示無效的dom

 

嘗試了寫在vue $nexttick created()當中仍是有問題。
以前項目中這樣寫是沒問題的

 

我的猜想是否因爲頁面結構比較複雜，致使dom還沒生成的時候就觸發了渲染
這是methods裏圖表的方法

drawLineChart2() {
            this.chartLine2 = echarts.init(document.getElementById('chartLine2')); this.chartLine2.setOption({ title: { text: '' }, tooltip: { trigger: 'axis' }, legend: { x: 'center', y: 'bottom', data: ['A', 'B', 'C', 'D'] }, grid: { left: '', right: '7%', bottom: '7%', containLabel: true }, toolbox: { feature: { restore: {}, } }, xAxis: { type: 'category', boundaryGap: false, data: [] }, yAxis: { type: 'value', }, series: [] }); let params = new URLSearchParams(); params.append("days", this.touchComparisonUser.days); params.append("is_licai_new", this.touchComparisonUser.is_licai_new); params.append("trans_type", this.touchComparisonUser.trans_type); this.chartLine2.showLoading(); this.$ajax.post(this.baseURL + "/findiff", params, { }) .then((res) => { this.chartLine2.hideLoading(); let date = []; let date1 = []; let date2 = []; let date3 = []; let date4 = []; let dataList = res.data.data; for (let key in dataList) { for (let key2 in dataList[key]) { if (key == "A") { date.push(key2); date1.push(dataList[key][key2]["uv"]); } if (key == "B") { date2.push(dataList[key][key2]["uv"]); } if (key == "C") { date3.push(dataList[key][key2]["uv"]); } if (key == "D") { date4.push(dataList[key][key2]["uv"]); } } } this.chartLine2.setOption({ //加載數據圖表 xAxis: { data: date }, series: [ { name: 'A', type: 'line', data: date1 }, { name: 'B', type: 'line', data: date2 }, { name: 'C', type: 'line', data: date3 }, { name: 'D', type: 'line', data: date4 }, ] }); }) .catch((err) => { console.log("獲取數據失敗", err); }); },

頁面中的引用

 

mounted方法的調用

 

把這個問題解決了，在這裏寫一下吧，不少bug也是查別人文檔才解決的，這個問題我注意打斷點調試了一下，頁面的第一個例子是展現彙總數據的一個表格
這個表格用的語法是{{this.屬性}}，這樣的話會產生一個阻塞，由於是雙向綁定的數據，這個請求的數據必須返回以後，才能渲染頁面，因爲進入頁面渲染echarts是寫在mounted

當中的，全部的請求會同時發送。
這就致使請求的時候獲取不到頁面上的id，事實證實打印這id也是沒法找到的。
沒有找到頁面對應的元素，也就是產生這個報錯。
個人解決方案是寫一個公共的組件，把這個圖表單獨作了一個引用的公共組件。

 

也考慮過寫在其餘的鉤子函數當中，考慮到複用的問題，因此寫成了公用組件，方便下次調用。

注：本人原創，歡迎轉載，記得轉出處。 Sherlock09