echarts動態渲染資料及資料重複渲染問題解決

2021-10-06 19:46:56 字數 814 閱讀 4892

最近在用echarts時發現了問題,從後台獲取的資料不能渲染到頁面上,研究後發現渲染到頁面的資料和自己從後端獲取到後賦給的資料不同,分析得出其實echarts在頁面創造階段就進行了渲染,並且後期echart內部資料發生改變時不再進行二次渲染,思考過後我們採用深度監聽資料的方式,當資料發生改變時再次呼叫echarts渲染頁面的函式重新渲染來實現動態的渲染資料

**如下

// option為echarts渲染的資料

watch:

else

}else

}}

再然後進行資料的更新,接收到新資料時,echarts渲染的圖中有上一次的資料痕跡,筆者這邊是把上次的所有資料重置掉了,翻看了官方文件之後發現了echart的配置屬性

chart.

setoption

(option, notmerge, lazyupdate)

;

上方配置項的第二項指出echarts預設是和之前設定的option進行合併的,那麼我們把第二個配置項設定為true就可以了

this

.mychart.

setoption

(this

.option,

true

)

設定完後又想起來我們之前做了資料監聽動態渲染資料會呼叫setoption,所以在監聽部分也設定上true

watch:

else

}else

}}

完美解決問題 資料動態渲染 且不與上次資料合併

使用echarts動態載入資料

顯示形式 1 2 3 var mychart 路徑配置 require.config 使用 require echarts echarts chart line 使用柱狀圖就載入bar模組,按需載入 function ec subtext 單位 padding 10 tooltip legend x...

Angular使用Echarts動態資料不重新整理

在angular專案中使用echarts來實現圖表的過程中,從服務端請求回來資料,賦值之後,頁面圖表卻不重新整理,資料沒問題,原因是 資料拿到時頁面已經渲染了,因此沒有顯示。解決方式是 資料拿到時使用setoption再次渲染 具體實現 如下 地域分布 import from angular cor...

echarts 動態繫結data中的資料

echarts 中 data 的資料一般為 json 陣列,所有資料格式為 json 或json 陣列的在得到後台的資料之後都可以自行拼接為呈現的資料。所以 forceoption tooltip animationdurationupdate 1500,animationeasingupdate ...