echarts学习之legend点击事件怎么控制

发布时间:2023-05-10 15:31:01 作者:iii
来源:亿速云 阅读:308

这篇文章主要讲解了“echarts学习之legend点击事件怎么控制”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“echarts学习之legend点击事件怎么控制”吧!

echarts legend点击事件

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

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)

Echarts自己控制legend点击事件

先看需求

echarts学习之legend点击事件怎么控制

现在想实现的 情况是

var dou1_legend_flag = false;
myChart.on('legendselectchanged', function (params) {
      var option = this.getOption();
      //当前echarts图例选项
      var select_key = Object.keys(params.selected);
      //当前图例的选项是否选中 选中为true 未选中为false
      var select_value = Object.values(params.selected);
      if (option.legend[0].selected.hasOwnProperty("1#斗")) {
          if (option.legend[0].selected["1#斗"] == true) {
              if (!dou1_legend_flag) {
              	  // 控制legend 的显示和隐藏 直接控制 selected 中对应名称的真假值就可以
                  option.legend[0].selected[option.legend[0].data[0]] = true;
                  option.legend[0].selected[option.legend[0].data[1]] = true;
                  option.legend[0].selected[option.legend[0].data[2]] = true;
                  myChart.setOption(option);
                  dou1_legend_flag = true;
              }
          } else {
              dou1_legend_flag = false;
          }
      }
 });

感谢各位的阅读,以上就是“echarts学习之legend点击事件怎么控制”的内容了,经过本文的学习后,相信大家对echarts学习之legend点击事件怎么控制这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐阅读:
  1. Vue怎么使用echarts可视化图表
  2. Uniapp中怎么使用Echarts

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

echarts legend

上一篇:python虚拟机pyc文件结构是什么

下一篇:怎么在Flutter中使用媒体播放器

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》