本篇文章比較淺顯，主要寫給想要快速直接上手?jǐn)?shù)據(jù)可視化帶Echarts圖表項目的新人們。

1、實例化圖表：setOption(Object option)

Object類型的參數(shù) option，表示圖表數(shù)據(jù)結(jié)構(gòu) ，形如：

var option  = {
               title: {
                  text: "我的第一個ECharts圖表示例"
                },
                tooltip: {
                    trigger: 'axis'
                }
              };

在option里填好圖表的各種參數(shù)，如type（圖表類型，折現(xiàn)或柱狀或餅圖等等），data（圖表數(shù)據(jù)）等等，這些具體參考官方文檔。

然后將option注入圖表中

let myChart.setOption(option)

2、清除或銷毀圖表，方法較多，列舉幾個：

①、refresh()

描述：刷新圖表，圖例選擇、數(shù)據(jù)區(qū)域縮放，拖拽狀態(tài)均保持。

myChart.refresh();

②、restore()

描述：還原圖表，各種狀態(tài)均被清除，還原為最初展現(xiàn)時的狀態(tài)。

myChart.restore();

③、clear()

描述：清空繪畫內(nèi)容，清空后實例可用，因為并非釋放示例的資源，釋放資源我們需要dispose()

myChart.clear();

④、dispose()

描述：釋放圖表實例，釋放后實例不再可用。

myChart.dispose();

我個人比較常用的是第③和第④種，類似我上篇文章提到的需要銷毀/清空圖表數(shù)據(jù)，使新注入的圖表數(shù)據(jù)從0過渡到新數(shù)據(jù)，就可以用這種方法。
如果要不停清空再繪制，則用③，對瀏覽器負(fù)載小一些。
如果是直接銷毀不需要重新繪制，則用④直接釋放圖表實例

// 重置水球圖
upsetCharts() {
      if (this.myChart) {
        this.myChart.clear();
        // this.myChart.dispose();
      }
    });
}


mounted() {
  let self = this;
...
  self.upsetCharts(); // 加載前重置一下
  self.myChart.setOption(option)
}

3、根據(jù)標(biāo)簽的新寬高重新制定Echarts大小：resize()

運(yùn)用在需要圖表完成自適應(yīng)的場景，比如瀏覽器頁面窗口寬高改變時讓圖表自適應(yīng)放大縮小。
這個在我上上篇文章已詳細(xì)提到過，不再贅述。
傳送門：https://blog.csdn.net/vvv3171071/article/details/122113138

4、最后附贈一個Echarts設(shè)置數(shù)據(jù)變化時過渡動畫時長的屬性
既然你點進(jìn)了這篇文章，就說明你想完成銷毀圖表再重新實例化的操作，而伴隨著這一系列操作，當(dāng)然還需要美化一下圖表過渡動畫才能讓用戶體驗更好呀~
以下是官方文檔：

其中animationEasing是用來設(shè)置動畫緩沖效果的，這個削微高級了寫，可以參考這篇：

https://blog.csdn.net/ghj1976/article/details/5389086

如果只是想設(shè)置過渡動畫時長，只設(shè)置animationDuration就可以了

option = {
          series: [
            {
              type: "liquidFill", // 高貴的水球圖
              radius: "80%",
              data: [item.data],
              animationDuration: 1000, // 過渡動畫時長，單位ms
            }
          ]
        }

最近調(diào)到新項目組后要接手好一陣子的數(shù)據(jù)可視化工程，估計最近出關(guān)于Echarts的文章會比較多吧。THX~