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

1.取消全部图例点击事件

*只需添加一个属性即可

legend: {selectedMode:false
}

2.重写图例点击事件，示例为点哪个图例显示哪条折线

*获取点击图例对应图例数组中的index，在series中替换数据即可

chart.on('legendselectchanged', function (params) {let legend = params.name;const index = nameList.findIndex(item => item == legend);option.series[4] = addOption[index];chart.dispatchAction({type: 'legendSelect',name: params.name});chart.setOption(option);
});

我的addOption定义为

var addOption = [{name: nameList[0],type: 'line',data: aList,
},
{name: nameList[1],type: 'line',data: bList,
},
{name: nameList[2],type: 'line',data: cList,
},
{name: nameList[3],type: 'line',data: dList,
}];

原效果图

改后效果图（图例只控制折线图，且点哪个显示哪个，默认显示优秀）

echarts中重写图例点击事件,阻止默认事件相关推荐

50 jQuery绑定事件阻止默认事件发生内置动画 each data
主要内容 1 阻止后续事件继续执行 return false: 常用于表单提交 event.preventDefault : 阻止默认事件发生 <body> <form acti ...
事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
阻止事件传播阻止事件传播e.stopPropagation() 谷歌浏览器阻止事件传播(冒泡阶段) var oBig = document.getElementById('big');var oS ...
简单解析JavaScript的默认事件及如何阻止默认事件
简单解析JavaScript的默认事件及如何阻止默认事件上篇文章就提到,在JavaScript中提到事件冒泡两个必不可少也要提的就是事件捕获和默认事件,现在来聊一聊什么是默认事件,及如何阻止默认事件 ...
React:阻止默认事件
在html页面中直接通过return false即可阻止默认事件 <a href="#" onclick="alert('阻止跳转');return false&q ...
React 阻止默认事件和阻止冒泡
给 a 标签添加一个事件阻止默认事件 e.preventDefault(); class view extends Component {onAtag(e) {// 阻止默认事件放置跳转e.pre ...
JS标签中阻止默认事件的发生
若html标签中定义了两个事件(包含一个自定义函数),那么系统会先执行用户自定义的函数,然后执行标签默认函数.如果想要在执行完自定义函数之后阻止系统默认函数的执行,可以进行如下设置: 因为html标签 ...
vue阻止默认_vue中，阻止默认事件
用vue的写法就是: id="freeinput" :rows="6" placeholder="请输入自由条件内容(json格式)" @f ...
javascript, jQuery阻止默认事件和冒泡事件
事件冒泡(event bubbling) 事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点. 例如: <!DOCTYPE html> ...
js阻止默认事件（a标签跳转），阻止事件冒泡
最近刚学习完js基础,今天发现对js的默认事件阻止以及阻止事件的冒泡有点忘记,于是写这篇文章算是做一个总结,也是加深一下印象. 1.阻止默认事件在html中有很多自带默认事件的元素,很典型的例子:a ...

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

echarts中重写图例点击事件,阻止默认事件相关推荐

最新文章

热门文章