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，返回页面；

这里主要介绍了对关闭事件的处理，如果大家对关闭按钮做其他此操作也是一样的实现逻辑

小伙伴们感觉有帮助的话希望点个赞哟，如果有问题或疑问欢迎大家评论区留言，看到后第一时间回复。