圖表示這樣的
頁面上有很多個圖表，由於沒有查詢按鈕，就只是點擊發送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