天天看點

Echarts表格資料更新不渲染問題

用echarts執行個體并且setOption()但無法重新整理表格内容,

開始為兩條折線

期望:隻有一條資料時,頁面能立刻重新整理,隻顯示一條折線。
Echarts表格資料更新不渲染問題

echarts的渲染:

如果未執行個體化則進行執行個體化過程,在此期間會在div容器生成一個 echarts_instance 屬性, 該屬性值就是目前echarts的ID,然後進行後邊的渲染操作。

當我們重新整理已經執行個體化的echarts圖表時,echarts會先比對改div容器上的_echarts_instance_屬性值是否與執行個體對象的ID一樣,如果一樣則會在原有的結構上進行渲染,但是因為我破壞了原有的結構,是以無法重新渲染出表格内容。

解決方法:

document.getElementById('myChart').setAttribute('_echarts_instance_', '')
           

這樣div的_echarts_instance_值就不會被比對到,echarts會重新渲染出來

結果:

Echarts表格資料更新不渲染問題