其他地方调用echarts数据视图关闭事件

本文链接：https://blog.csdn.net/py1215/article/details/106351928

最终效果

遇到的问题

最近系统中用到了echarts，但是发现有一个问题，echarts没有提供直接关闭数据视图的api，数据又不能实时刷新。

然而系统有一个重置操作是让页面恢复到初始状态的，所以点击重置或者查询都需要关闭数据视图。

测试也一直不让过，那我只能自己想办法，

在网上百度了很久，发现之前很多人也有这个需求，但是没有解决办法。最终找到了合适的解决方法。

解决过程

一开始看页面，有个关闭操作，通过手动点击是可以关闭的。。。

如果能通过js获取到这个按钮，然后调用点击事件就可以实现了，顺着这个思路，于是F12打开控制台进一步分析。。。

发现这个关闭是一个div，是有点击事件的，但是没有id和class。。。于是我在想怎么样才能获取这个div，突然想起这个按钮是在option里面配置的，所有我看了一下配置手册。。。

lang :['数据视图', '关闭', '刷新']

因为之前开发的经验，很多配置项除了可以传参数之外还可以传标签，于是我抱着试一试的心态修改了配置。。。

lang :['数据视图', '<span id="gb">关闭</span>', '刷新']

再看控制台发现生效了。。。

这样就能通过id获取到span，然后百度一下怎么获取父标签。。。于是就获取到了div了。。。然后调用点击事件了

获取到span。。。

document.getElementById('gb')

获取到div。。。

document.getElementById('gb').parentNode

获取到div并调用click事件。。。

document.getElementById('gb').parentNode.click()

我写了个测试方法，

//测试外部按钮触发echarts数据视图关闭
test=()=>{
        //获取到span
        let gb=document.getElementById('gb');
        //如果不为空
        if(gb!==null){
            //获取到父div
            let pdiv=gb.parentNode;
            //调用点击事件
            pdiv.click();
        }
    }

测试结果如下。。。

到这里基本就解决了。。。