1. 程式人生 > >移動端可視化框架antv f2出現兩個legend選項

移動端可視化框架antv f2出現兩個legend選項

默認 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選項