最终效果
遇到的问题
最近系统中用到了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();
}
}
测试结果如下。。。
到这里基本就解决了。。。
总结
以前遇到问题总是百度,没有百度到就认为解决不了,通过这一个问题,让o我认识到独立思考的重要性和好处,顺着思路一步步分析,最终有意想不到的惊喜。。。
原创不易,大家的点赞和关注是我写作的动力。。。