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) => {// 隐藏divdocument.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，返回页面；

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

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

echarts监控dataview数据视图的关闭按钮事件相关推荐

php 使用dataview,echarts如何优化数据视图dataView中的样式（代码示例）
本篇文章给大家带来的内容是关于echarts如何优化数据视图dataView中的样式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在使用echart过程中,toolbo ...
DataView数据视图的使用 winform
DataView数据视图的使用 winform 实例化一个DataView对象从Dv对象中过滤数据
php 使用dataview,jquery dataview数据视图插件使用方法
jquery-dataview是一个超轻量的jquery插件,用于对DOM进行数据填充与更新,也很适合根据DOM模板创建对象. 与一些纯模板库(例如juicer)相比,它不仅能提供根据模板填入数据.支 ...
Echarts自定义数据视图(DataView)-按钮名称-刷新方法
基于jquery3.1 & echarts.js; 了解更多细节请访问: https://www.echartsjs.com 先上效果图: gif没录好,大家可以自己把代码拷贝,到本地 & ...
echarts修改数据视图格式
通过echarts官方文档配置项进行修改 js代码 // 基于准备好的dom,初始化echarts实例var Qushi_box = echarts.init(document.getElementB ...
解决echarts 数据视图排版错乱问题
最近在使用echarts图表数据视图时发现,当我切换数据视图之后数据排版错乱.本来想着是不是可以找到dom结构,通过添加样式来修正此问题,当f12检查元素我发现此方法并不可行,数据视图整个内容被渲染 ...
Echarts数据可视化event图表事件的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
echarts dataView数据对齐及表格复制
参考:https://segmentfault.com/a/1190000019547857 上面的链接介绍了"数据视图"表格数据对齐显示的问题(使用'\t'的小技巧),但是还是不 ...
[译]使用JavaScript来操纵数据视图DataView新建视图的默认值
觉得这篇文章比较有参考价值,把大意翻译过来,没有忠实于原文. 原文链接:http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/usin ...

echarts监控dataview数据视图的关闭按钮事件

echarts监控dataview数据视图的关闭按钮事件相关推荐

最新文章

热门文章