echarts学习之legend点击事件
首先,明确本篇博客的重点,主要有三个:1. 给legend添加点击事件2. 禁用legend点击事件的默认行为(类型checkbox多选框)3. 解决点击事件重复触发问题问题一let myCharts = Echarts.init(document.getElementById('bar'))let x = []let y1 = []let y2 = []let idList = []val.fo
·
首先,明确本篇博客的重点,主要有三个:
1. 给legend添加点击事件
2. 禁用legend点击事件的默认行为(类型checkbox多选框)
3. 解决点击事件重复触发问题
问题一
let myCharts = Echarts.init(document.getElementById('bar'))
let x = []
let y1 = []
let y2 = []
let idList = []
val.forEach(e => {
x.push(e.name)
y1.push(e.invitationNum)
y2.push(e.totalMoney / 100)
idList.push(e.id)
}) // 这些都是自己做的一些数据处理,可以忽略
let option = {
title: {
text: name + '前十用户',
left: 'center'
},
...其他代码
}
myCharts.on('legendselectchanged', (e) => {
alert('点击了') // 如果不加off事件,就会叠加触发
})
myCharts.setOption(option)
问题二
myChart.on('legendselectchanged', function (params) {
myChart.setOption({
legend:{selected:{[params.name]: true}}
})
console.log('点击了', params.name);
// do something
});
问题三
let myCharts = Echarts.init(document.getElementById('bar'))
myCharts.off('legendselectchanged') //解决重复触发
...
...
myCharts.on('legendselectchanged', (e) => {
alert('点击了') // 如果不加off事件,就会叠加触发
})
myCharts.setOption(option)
更多推荐
已为社区贡献3条内容
所有评论(0)