Echarts 自己控制 legend 点击事件

Echarts 自己控制 legend 点击事件的问题

先看需求

现在想实现的 情况是

  1. 一进去页面,所有的 Echarts 中 legend 的所有选项都是默认选中的状态(这是 Echarts 默认的)
  2. 然后当“9”号标识,也就是“一#斗”点亮时,与之相对应的“1、2、3”仓位,即“石灰石、污泥球、生白”也必须点亮,
  3. 然后 “9”号点亮之后 “1、2、3”号仓位也可以自己控制自己的 点亮还是关闭,
  4. 然后当“9”号再次从关闭变成点亮的状态时,“1、2、3” 会再次点亮。
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;
          }
      }
 });
大家有什么疑问和意见,积极在评论区指正,欢迎共同学习。
我是图南,我们下期见
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: ECharts(百度开源的数据可视化库)提供了legend点击事件,可以通过监听legendselectchanged事件来实现。当legend中的某一项被选中或取消选中时,就会触发legendselectchanged事件,开发者可以在事件回调函数中进行相关的操作,比如重新渲染图表等。需要注意的是,在ECharts中,一个系列可以被legend中的多个项所代表,因此在处理事件时需要考虑到这一点。 ### 回答2: ECharts图表库提供了legend(图例)点击事件,使得当用户点击某个图例时能够触发相应的操作。具体步骤如下: 1. 首先,通过ECharts官方文档或API文档了解怎样配置legend。图例可以通过 `legend` 属性进行设置,具体参数包括图例类型、位置、方向、字体样式等。 2. 图例点击事件可以通过`legendselectchanged`事件来实现。该事件会在图例中的项被点击或被点击后被选中切换时触发。需要在图表初始化的时候设置一个监听器来监听该事件。 3. 在监听器中定义相应的操作。当图例被点击后,可以通过获取点击的图例项的信息,进而实现相应的操作。可以使用`event`参数获取事件的相关信息,例如`event.name`可以获取点击的图例的名称。 4. 示例代码如下: ```javascript // 初始化图表 var myChart = echarts.init(document.getElementById('chartId')); // 监听图例点击事件 myChart.on('legendselectchanged', function (event) { var selected = event.selected; var name = event.name; // 在此处可以根据图例的名称执行相应的操作 console.log('你点击了图例: ' + name); // 示例操作:隐藏或显示图表中相应系列的数据 if (selected[name]) { myChart.dispatchAction({ type: 'legendToggleSelect', name: name }); } }); // 渲染图表 myChart.setOption(option); ``` 通过以上步骤,您可以实现对ECharts图例点击事件的响应,并根据具体需求进行相应的操作。 ### 回答3: Echarts是一款基于JavaScript的可视化图表库,它提供了许多功能丰富的图表类型和交互方式。其中,legend(图例)是用于标识不同系列数据的标记,用户可以通过点击图例来控制显示或隐藏对应的数据。 在Echarts中,可以通过legend属性来定义图例的显示样式和位置。当用户点击图例时,可以通过图例的点击事件来进行相应的操作。 legend点击事件的处理步骤如下: 1. 定义图例的点击事件: 在option中的legend属性中,通过设置selectedMode为true,启用图例的点击事件。例如: legend: { data: ['系列1', '系列2'], selectedMode: 'single', // single表示单选(只能选择一个图例),multiple表示多选 selected: { '系列1': true, // 默认选中系列1 '系列2': false // 默认未选中系列2 }, ... } 2. 监听图例的点击事件: 通过echarts的on方法,监听'legendselectchanged'事件。例如: myChart.on('legendselectchanged', function (params) { // 在这里处理图例的点击事件 console.log(params); }); 3. 在事件处理函数中对图例的点击进行相应操作: 事件处理函数中的params参数包含了被点击的图例项的信息,可以通过params.name获取点击的图例项的名称。 通过以上三个步骤,可以实现legend点击事件的处理。用户在点击图例时,可以根据具体需求,例如调整数据显示、联动其他图表等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值