移動端可視化框架antv f2出現兩個legend選項
阿新 • • 發佈:2019-05-14
默認 ech code 文檔 http lin 更新數據 數據可視化 type
前天遇到個坑,把我給坑死了 ,在幫朋友做一個微信公眾號的項目,使用的vue全家桶,有個模塊需要用到數據可視化展現,之前做項目的時候用過antv,比較熟悉,因為是移動端的項目,所以用的是antv f2這個可視化框架,按照之前寫的方式都做完之後,最後發現下面出現了兩個相同的legend,找了半天也沒發現問題出在哪,百思不得其解
watch:{ statisticsList: { handler(newValue, oldValue) { // 更新數據 this.lineChart.changeData(newValue); // 修改圖表配置重新渲染 this.lineChart.scale('time', { tickCount: 5, // 定義坐標軸刻度線的條數,默認為 5 type: 'timeCat', mask: this.chartsDateType }); this.lineChart.render(); }, deep: true } },
後來,又仔細的查看了下f2的文檔,發現問題出在這個地方
this.lineChart.render();
重新渲染了一次,就出現了兩個lenged
解決方法 :
使用 repaint重新繪制圖表
this.lineChart.repaint();
移動端可視化框架antv f2出現兩個legend選項