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

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

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

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

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

然后將option注入圖表中

let myChart.setOption(option)

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

①、refresh()

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

myChart.refresh();

②、restore()

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

myChart.restore();

③、clear()

描述：清空繪畫(huà)內(nèi)容，清空后實(shí)例可用，因?yàn)椴⒎轻尫攀纠馁Y源，釋放資源我們需要dispose()

myChart.clear();

④、dispose()

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

myChart.dispose();

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

// 重置水球圖
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)的場(chǎng)景，比如瀏覽器頁(yè)面窗口寬高改變時(shí)讓圖表自適應(yīng)放大縮小。
這個(gè)在我上上篇文章已詳細(xì)提到過(guò)，不再贅述。
傳送門：https://blog.csdn.net/vvv3171071/article/details/122113138

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

其中animationEasing是用來(lái)設(shè)置動(dòng)畫(huà)緩沖效果的，這個(gè)削微高級(jí)了寫，可以參考這篇：

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

如果只是想設(shè)置過(guò)渡動(dòng)畫(huà)時(shí)長(zhǎng)，只設(shè)置animationDuration就可以了

option = {
          series: [
            {
              type: "liquidFill", // 高貴的水球圖
              radius: "80%",
              data: [item.data],
              animationDuration: 1000, // 過(guò)渡動(dòng)畫(huà)時(shí)長(zhǎng)，單位ms
            }
          ]
        }

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