首先,明确本篇博客的重点,主要有三个:

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)
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐