用echarts執行個體并且setOption()但無法重新整理表格内容,
開始為兩條折線
期望:隻有一條資料時,頁面能立刻重新整理,隻顯示一條折線。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38FdsYkRGZkRG9lcvx2bjxiNx8VZ6l2cs0TPn10dZRVTyUFRNFDOsJGcohVYsR2MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZwpmLygjNwUjN0UzN3UGMiVGMiJzNmRjNiFTZlRmNlVmNwQzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
echarts的渲染:
如果未執行個體化則進行執行個體化過程,在此期間會在div容器生成一個 echarts_instance 屬性, 該屬性值就是目前echarts的ID,然後進行後邊的渲染操作。
當我們重新整理已經執行個體化的echarts圖表時,echarts會先比對改div容器上的_echarts_instance_屬性值是否與執行個體對象的ID一樣,如果一樣則會在原有的結構上進行渲染,但是因為我破壞了原有的結構,是以無法重新渲染出表格内容。
解決方法:
document.getElementById('myChart').setAttribute('_echarts_instance_', '')
這樣div的_echarts_instance_值就不會被比對到,echarts會重新渲染出來
結果: