echarts監控dataview數據視圖的關閉按鈕事件

項目中會碰到對dataview數據視圖關閉按鈕事件的處理需求，比如點擊該按鈕執行其他某個操作。

在不改動源碼的情況下，echarts其實沒有該按鈕的事件api，但是有一個contentToOption事件來監聽刷新按鈕的事件，因此方案改爲：將刷新按鈕替換爲關閉按鈕，再隱藏原來的關閉按鈕。具體實現如下：

代碼：

toolbox: {
    show: true,
    itemGap: 5,
    top: -5,
    feature: {
      dataView: {
        // 隱藏關閉按鈕，更改刷新按鈕爲關閉
        lang: ['<div style="padding: 0 10px;margin-top:-10px;margin-left:-20px;background:#D7D7D7;">數據視圖</div>',
          '<div style="width:15px;position:absolute;height:10px;margin-left:-10px;margin-top:-5px;background:white;"></div>',
          '關閉'],
        show: false,
        contentToOption: (dom, opts) => {
          console.log(dom);
          // 顯示我的div，這裏的id是我setoption的時候存在option的dataview這個變量中的；
          document.getElementById(opts.dataView).style.display = '';
        },
        optionToContent: (opt) => {
          // 隱藏div
          document.getElementById(opt.dataView).style.display = 'none';
        },
      },
      dataZoom: {
        show: true,
        iconStyle: {
          opacity: 0,
        },
      },
      restore: { show: false },
      saveAsImage: { show: false },
    },
  },

說明：lang屬性控制顯示的按鈕，第一個爲數據視圖名稱，第二個爲關閉按鈕（我這裏通過css將其隱藏），第三個爲原來的刷新按鈕，我改成了關閉按鈕。

optionToContent事件裏有一個參數，是圖表的option，我這裏的需求是在數據視圖按鈕點擊後隱藏了我頁面上的某個div；

contentToOption事件中分別有兩個參數，一個是table的dom，一個是該圖表的option，我這裏實現的功能是點擊關閉按鈕顯示我頁面上的某個div，執行回調；

最終大致效果如下：

點擊數據視圖隱藏昨日上週div

點擊關閉，顯示我的div，返回頁面；

這裏主要介紹了對關閉事件的處理，如果大家對關閉按鈕做其他此操作也是一樣的實現邏輯

小夥伴們感覺有幫助的話希望點個贊喲，如果有問題或疑問歡迎大家評論區留言，看到後第一時間回覆。