echarts重写图例点击事件

ECharts 全局触发click点击事件(Label及柱状) // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')); 前言 需求要点击Echart处理事件,通过myChart.on可实现,但只能点击柱状图才能触发,点击label(即:坐标文本)无法触发;通过myChart.getZr().on可全局监听Echart图,但无法准确的获取当前点击柱状的index;由此见下文 Echart图 Echart对象 option = { 阅读详情

echarts version: 3.1.2

修改图例点击事件样例代码:

  • 当第一次点击图例时,只显示点击的图例。
  • 当还剩一个图例被取消选中后,自动全选中所有图例。
  var triggerAction = function(action, selected) {
        legend = [];

        for ( name in selected) {
            if (selected.hasOwnProperty(name)) {
                legend.push({name: name});
            }
        }

        myChart.dispatchAction({
            type: action,
            batch: legend
        });
    };

    var isFirstUnSelect = function(selected) {

        var unSelectedCount = 0;
        for ( name in selected) {
            if (!selected.hasOwnProperty(name)) {
                continue;
            }

            if (selected[name] == false) {
                ++unSelectedCount;
            }
        }
        return unSelectedCount==1;
    };

    var isAllUnSelected = function(selected) {
        var selectedCount = 0;
        for ( name in selected) {
            if (!selected.hasOwnProperty(name)) {
                continue;
            }

            // 所有 selected Object 里面 true 代表 selected, false 代表 unselected
            if (selected[name] == true) {
                ++selectedCount;
            }
        }
        return selectedCount==0;
    };

    myChart.on('legendselectchanged', function(obj) {
        var selected = obj.selected;
        var legend = obj.name;

        // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event,导致本函数重复运行
        // 使得 无 selected 对象
        if (selected != undefined) {

            if (isFirstUnSelect(selected)) {
                triggerAction('legendToggleSelect', selected);
            } else if (isAllUnSelected(selected)) {
                triggerAction('legendSelect', selected);

            }
        }

    });
获取上传至DMS服务器上文件的URL 如果需要失效时间延长会设置URL永久有效, 可以去修改函数SCMS_URL_GENERATE的参数DURATION 或EXPIRATION ,DURATION最大时间是999999,若需要永久有效,则需要设置EXPIRATION的时间,这时系统会忽略DURATION的参数,生成URL的时候 SCMS_URL_GENERATE会调用SCMS_URL_SIGN函数这是其中默认这是了URL的生效时间为两小时。 阅读详情

相关推荐

如何用 OBProxy 实现 OceanBase 的最佳路由策略

本文基于业务中一类常见的路由问题展开,对OceanBase的路由功能及对应配置项做详细介绍,指导用户在业务实践中如何正确的配置路由策略及快速排查路由问题

OceanBase分布式数据库的博客 1685

【Echarts图例点击事件】自定义Echarts图例legend点击事件(已解决)

自定义Echarts图例legend点击事件,echarts图标点击事件触发,legendselectchanged应用,echarts多线共存,echarts图例点击调用接口

赏樱看雪撸代码 1万+

从接线到组态:手把手教你搞定PROFIBUS-DP与PA的混合网络搭建(基于西门子TIA Portal)

本文详细介绍了PROFIBUS-DP与PA混合网络的搭建方法,基于西门子TIA Portal平台,从硬件选型、网络架构设计到组态配置和现场调试,提供了一套完整的实战指南。重点解析了DP/PA耦合器的使用、地址映射策略及网络诊断技巧,帮助工程师高效构建高可靠性的工业自动化网络。

weixin_32103009的博客 302

echarts点击事件使用

echarts点击事件使用

xiaoming4965的博客 3400

别再为模糊的3D重建头疼了!手把手教你用3DSlicer处理DICOM数据,搞定医学影像三维可视化

本文详细解析了医学影像三维重建中常见的模糊问题,并手把手教你使用3DSlicer处理DICOM数据,实现精准的三维可视化。从层厚设置到数据格式转换,再到重建算法选择和渲染参数微调,提供了一套完整的优化方案,特别适合临床医生和医学影像处理人员提升工作效率。

weixin_28693447的博客 248

五、e2studio VS STM32CubeIDE之汉化

介绍stm32cubeide汉化方案和汉化包e2studio自带汉化包,在安装过程中可选择安装e2studio STM32CubeIDE切换中英文。

cl234583745的博客 1766

echarts的自定义图例的点击事件

【代码】echarts的自定义图例的点击事件。

qq_36877078的博客 1682

17【Protues单片机仿真】基于51单片机的太阳能智能谷物翻晒机器人

基于51单片机,避障,低于50CM报警,LED灯亮起,自动翻晒用光敏电阻,光照强度大,电机转动,相当于翻晒粮食,远程控制用按键代替,按下去电机就转动,相当于翻晒粮食,然后光照强度和超声波的距离都在LCD1602显示屏显示出来。

weixin_70360261的博客 1448

Echart 点击事件整理

工作经常会用到图表组件,这里主要针对 echarts 插件中的点击事件说明,代码不是很难,主要是如何区分点击的位置。

qq_34618492的博客 1万+

TensorFlow2深度学习实战(十四):目标检测算法 YOLOv4 解析

最易上手的【计算机视觉】小白教程!

不积跬步,无以至千里! 7635

FFDNet-pytorch版本代码训练教程

该文章为FFDNet-pytorch版本代码训练教程,抓紧订阅学习!尽早入门发论文哦!

假技术Po主 1507

echarts重写图例点击事件 图例过滤并显示对应图例的折线

添加链接描述 添加链接描述 在线测试

潇蓝诺依的博客 3591

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

echarts重写图例点击事件 (实用,赞)

原文出处:https://blog.youkuaiyun.com/sunscheung/article/details/76512306 echarts version: 3.1.2 修改图例点击事件样例代码: 当第一次点击图例时,只显示点击的图例。 当还剩一个图例被取消选中后,自动全选中所有图例。 var triggerAction = function(action, selected) {...

chelen_jak的专栏 1361

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

echarts中重写图例点击事件,阻止默认事件

echarts图例点击事件自定义,取消图例默认事件

妖精の羽翼的博客 2229

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Echart重写图例点击事件

echarts version: 3 修改图例点击事件样例代码: 当第一次点击图例时,只显示点击的图例。 当还剩一个图例被取消选中后,自动全选中所有图例。 var lastselect="";//记录最近一次单击值 var oldvalue="";//记录上一次单击值 var cs=1;//记录选中单个值,还是所有,默认1 var triggerAction = function(action,...

Echarts重写图例点击事件 3096

echarts-点击图例跳转,但图例不被关闭

 参考自: echarts重写图例点击事件 myChart.setOption(option_science); var triggerAction = function(action, selected) { legend = []; for ( name in selected) { if (selected.hasO...

xiaojing的博客 2376

柱状折线图2-双柱状重合堆积折线-重写图例点击事件

本例子:   使用了formatter方法重写了提示层的展示数据   使用了双x轴实现重合   使用了stack实现堆积   使用了legendselectchanged和dispatchAction重写了图例点击事件   使用bar和line在一个图里就可实现柱状折线图   事件:传送门1 传送门2 <!DOCTYPE html> <html ...

weixin_30567225的博客 271

ECharts legend图例点击事件 + 通过legend点击事件排序

需求:实现通过点击图例进行排序 代码比较简单,有想法欢迎交流 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts legend点击事件 + 排序</title> <script src="../../static/js/echarts.min-5.3.0.js" type="text/javascript" charset="

qq_53702986的博客 2997

【echarts】【前端】点击图例,只有被点击图例对应的折线显示,其他隐藏

最近在做一个功能:用echarts做一张折线图,图中有多条线。在初始状态,所有折线都显示,然后点击其中一个图例,其他折线会隐藏。 借用了https://www.cnblogs.com/shj-com/p/11327072.html的思路。在他的基础上重写了。 效果是这样的(option设置使用了echarts的官方案例): 刚初始化好: 点击“邮件营销”: 再点击“联盟广告”:...

u014458962的专栏 6263

地图的legend点击事件_【转】ECharts3.x中的点击事件与行为

在ECharts中主要通过 on 方法添加事件处理函数,ECharts中的事件主要分为两种,1)鼠标事件,在鼠标click or hove 时触发鼠标事件; 2)另外一种是在ECharts在做图形交互时触发的事件,即调用 dispatchAction 后触发的事件。鼠标事件:'click','dblclick','mousedown','mouseup','mouseover','mouse...

weixin_30771489的博客 743

Echarts数据视图样式重写

重写optionToContent:function(opt){...} 在使用Echarts 组件时,在数据视图显示的时候会发现表格数据没有行列对齐显示,如下。 可见,与预期的表格形式有很大的出路,通过查找发现在官方的文档有如下的说明: 从而,只需要按照自己的格式重写optionToContent:function(opt){...} ,其中opt就是视图opti...

Eddie-Wang的博客 1637

echarts重写图例,实现默认展示全部,选中一条展示当前的,隐藏其他的,当点击到最后一个取消的时候,展示全部

echarts重写图例,实现默认展示全部,选中一条展示当前的,隐藏其他的,当点击到最后一个取消的时候,展示全部。 下面是我比较推荐的一种写法: function setLegendAction(theChart) { let triggerAction = function (action, selected) { let legend = []; for (let name in selected) {

yangmiemie120的博客 2440

Echarts 柱状图点击事件受同页面饼图点击事件影响的分析

问题描述:同一个页面存在多个echarts统计图,其中柱状图只有一个柱子,饼图有两个,如果先点击饼图,再点击柱状图,柱状图就会获取不到点击的柱子信息 柱子点击效果设置: echarts.registerTheme('sg-echarts', theme); // 注册主题 var homePageDashBoardZclxChart = echarts.init(document.g...

workhd的专栏 663

Echarts - 数据视图样式重写

重写 optionToContent: function(opt) {...} 在使用Echarts 组件时,在数据视图显示的时候会发现表格数据没有行列对齐显示,如下。 可见,与预期的表格形式有很大的出路,通过查找发现在官方的文档有如下的说明: 从而,只需要按照自己的格式重写 optionToContent: function(opt) {...} ,其中opt就是视...

diaodichan7464的博客 431
上一篇: 开发自己的 yeoman 脚手架(generator-reactpackage)
下一篇: 生成某个范围内N个不重复随机数与生成固定长度数组
SunsCheung
博客等级 码龄11年 30粉丝 27原创
评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值