Echarts 數據未同步渲染怎麼辦-設置數據動態更新

1. 數據動態更新問題

• 問題 ： 當咱們須要動態頻繁的根據數據去變更圖表的時候會出現如下問題

  1. 數據發生變化，可圖表卻沒有從新渲染
  2. 數據錯亂問題
  3. 大量數據致使圖表樣式錯亂bug

步驟一

首先模擬大量數據進入 渲染圖表。此處咱們使用websocket進行模擬（正在作大數據可視化的小夥伴能夠用到）

步驟二

新建圖表子組件 配置echarts 圖表

步驟三

經過 onmessage方法監聽到接受的數據後 傳遞給圖表子組件。子組件經過 watch 監聽的方式 監聽數據流

圖表以下

根據如上基礎配置能夠看出 每當新的一條數據進來時 都會重複調用 this.lineonedata(); 這個方法 使得圖表一直處於刷新狀態

當數據流進入過大的時候 依然會致使卡頓問題

• 解決方法：根據如上問題 有兩種廣泛解決方法以下
• 1. 使用 echarts.dispose() 方法 將以前的實例刪除掉 而後使用 echarts.init() 方法從新創造一個新的實例。

echarts.dispose()

描述：

釋放圖表實例，釋放後實例再也不可用。

• 2. 執行 echarts.clear() 方法 清空當前實例，會移除當前實例的組件和圖表。再從新使用 setOptions()

咱們來看看 官方的描述

能夠看到兩者之間的區別 echarts.dispose() 方法會將整個 echarts實例進行銷燬。須要從新使用 echarts.init() 方法纔會從新刷新數據

執行 echarts.clear() 方法 只會清空當前實例的內容，並不會進行銷燬 。咱們只須要 從新使用setOption() 就能夠 看到最新的數據。

以上兩種解決方法 是能夠看見圖表從新進行渲染 達到想要的目的 。

可是當數據量特別巨大，如websocket每秒進入上百條數據時。echarts圖表仍然會有略微科頓

• 解決方法1 ：當數據量大 首先將 animation 設置爲 false，由於 大部分類型圖表都會提供一個開關動畫的參數，把它關掉圖表會有一個快速閃爍的動做。

• 解決方法2 : 將setOptions() 第二個參數設置爲 true

當修改setOption值的時候，咱們異步回來的數據層級比較深的狀況下，須要echarts重繪，不然不會如願顯示主要體現，你增長數據能夠，可是減小數據，發現視圖上仍是保持着最多數據的展現效果，很納悶，明明能夠經過移步修改數據，爲什麼增長能夠繪製地圖而減小好像就什麼都沒有作

解決方法以下：

PS:你們看了後以爲對本身有幫助能夠三連留言,歡迎提出寶貴意見，也歡迎各位對相關技術有興趣的開發者（由團隊開發人員微信號x118422邀請）入羣，在線解答討論數據可視化、優化圖表性能等方面的技術問題~