精华内容
下载资源
问答
  • echarts学习之legend点击事件

    千次阅读 2020-09-19 16:47:45
    2. 禁用legend点击事件的默认行为(类型checkbox多选框) 3. 解决点击事件重复触发问题 问题一 let myCharts = Echarts.init(document.getElementById('bar')) let x = [] let y1 = [] let y2 = [] let idList = []...

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

    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 的所有选项都是默认选中的状态(这是 Echarts 默认的) 然后当“9”号标识,也就是“一#斗”点亮时...

    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;
              }
          }
     });
    
    大家有什么疑问和意见,积极在评论区指正,欢迎共同学习。
    我是图南,我们下期见
    展开全文
  • echarts问题–监听最后一个legend的点击事件 ...一、监听最后一个legend点击事件 代码: myChart.on("legendselectchanged", function(params) { //点击企业云的时候 if (params.name == "企业云") {

    echarts问题–监听最后一个legend的点击事件


    echarts表默认点击legend会隐藏掉相应的图标,如果全部点击一次就会全部隐藏。
    原图例:在这里插入图片描述

    点击legend隐藏后:在这里插入图片描述
    如果不想出现这种空白的情况,有两种思路




    一、监听最后一个legend点击事件

    代码:

          myChart.on("legendselectchanged", function(params) {
            //点击企业云的时候
            if (params.name == "企业云") {
              //如果政务云为隐藏
              if (params.selected.政务云 == false) {
                myChart.dispatchAction({
                  type: "legendSelect",
                  // 图例名称
                  name: "政务云",
                });
              }
              //点击政务云的时候
            } else if (params.name == "政务云") {
              //如果企业云为隐藏
              if (params.selected.企业云 == false) {
                myChart.dispatchAction({
                  type: "legendSelect",
                  // 图例名称
                  name: "企业云",
                });
              }
            }
          });
    

    思路:当其他的图表都为false隐藏状态时,此时点击的legend一定是最后一个legend。此时使相应的图表显示出来。


    做法步骤:1、监听是不是最后一个legend。绑定一个切换图例选中状态后的监听器(legendselectchanged)

    myChart.on('legendselectchanged', function (params) {
        console.log(params);
    });
    

    点击legend便会触发监听的回调函数,回调函数中有个params参数可以打印一下,如下所示:
    在这里插入图片描述
    其中name为当前点击的legend,selected为其他legend目前的状态。由此可以很容易写出if条件判断;



    2、写好条件后,就要将对应已经隐藏的图表显示出来。设置触发图表行为(dispatchAction)

    myChart.dispatchAction({
    	type: "legendSelect",
        // 图例名称
        name: "政务云",
    });
    

    完整代码:

     <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
          // 基于准备好的dom,初始化echarts实例
          var myChart = echarts.init(document.getElementById("main"));
    
          myChart.on("legendselectchanged", function(paramas) {
            console.log(paramas);
            //点击企业云的时候
            if (paramas.name == "企业云") {
              //如果政务云为隐藏
              if (paramas.selected.政务云 == false) {
                myChart.dispatchAction({
                  type: "legendSelect",
                  // 图例名称
                  name: "政务云",
                });
              }
              //点击政务云的时候
            } else if (paramas.name == "政务云") {
              //如果企业云为隐藏
              if (paramas.selected.企业云 == false) {
                myChart.dispatchAction({
                  type: "legendSelect",
                  // 图例名称
                  name: "企业云",
                });
              }
            }
          });
    
          // 指定图表的配置项和数据
          option = {
            title: {
              text: "世界人口总量",
              subtext: "数据来自网络",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["企业云", "政务云"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            yAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
            },
            xAxis: {
              type: "category",
              data: ["巴西", "印尼", "美国", "印度", "中国"],
            },
            series: [
              {
                name: "企业云",
                type: "bar",
                data: [18203, 23489, 29034, 104970, 131744],
              },
              {
                name: "政务云",
                type: "bar",
                data: [19325, 23438, 31000, 121594, 134141],
              },
            ],
          };
    
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        </script>
      </body>
    




    二、禁用legend点击事件

    做法:设置selectedMode属性

    //取消图例上的点击事件
    selectedMode:false
    

    完整代码:

    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
          // 基于准备好的dom,初始化echarts实例
          var myChart = echarts.init(document.getElementById("main"));
    
          // 指定图表的配置项和数据
          option = {
            title: {
              text: "世界人口总量",
              subtext: "数据来自网络",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              data: ["企业云", "政务云"],
              //禁用legend点击事件   
              selectedMode: false,
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            yAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
            },
            xAxis: {
              type: "category",
              data: ["巴西", "印尼", "美国", "印度", "中国"],
            },
            series: [
              {
                name: "企业云",
                type: "bar",
                data: [18203, 23489, 29034, 104970, 131744],
              },
              {
                name: "政务云",
                type: "bar",
                data: [19325, 23438, 31000, 121594, 134141],
              },
            ],
          };
    
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
        </script>
      </body>
    
    展开全文
  • 有一个需求场景,使用echarts时想要自定义legend点击事件,但是不要legend的默认点击事件——就是点击会隐藏和显示对应的饼图 查阅文档和手册之后,发现没有可以直接使用的方法 那么换个思路,在默认事件触发之后...

    有一个需求场景,使用echarts时想要自定义legend的点击事件,但是不要legend的默认点击事件——就是点击会隐藏和显示对应的饼图

    查阅文档和手册之后,发现没有可以直接使用的方法

    那么换个思路,在默认事件触发之后再把取消选中的legend选中回来就可以啦

    依赖以下下几个配置:

    1. legendselectchanged

    myChart.on('legendselectchanged', function (params) {
        // ...
    });
    

    监听legend点击改变的事件,可以实现自定义事件,但是不能覆盖默认的选中和取消选中的事件

    2. selected

    option = {
    	tooltip: {
    	    selected: {
    			// ...
    		},
    	    // ...
    	},
    	//...
    }
    

    可以设置初始选中项,这里不会直接使用

    3. setOption

    myChart.setOption({
    	legend:{
    		selected:{
    			//...
    		}
    })
    

    动态改变配置,到这里就很清晰了,将 legendselectchanged 中取消选中的legend动态设置回来

    4. animation

    option = {
        animation: false,
    	//...
    }
    

    如果对动画没要求,关闭动画,效果会更好

    完整html代码

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ECharts 实例</title>
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            option = {
                animation: false, // 取消动画
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 1548, name: '搜索引擎'}
                        ]
                    }
                ]
            };
            myChart.setOption(option);
            // 关键代码
            myChart.on('legendselectchanged', function (params) {
                myChart.setOption({
                    legend:{selected:{[params.name]: true}}
                })
                console.log('点击了', params.name);
                // do something
            });
        </script>
    </body>
    
    </html>
    
    展开全文
  • yAxis: { type: 'value', name: '℃', // 默认一个...echarts.on('legendselectchanged', function(obj) { // legend点击事件 var option = this.getOption(); switch (obj.name) { case '火锅': option.yAxis[.
  • 项目需求:给echarts的legend添加点击事件 this.myChart01.on("legendselectchanged",(e)=>{ }) 1.这是官方的,高亮选中,扇形不置灰 this.myChart01.on("legendselectchanged",(e)=>{ this.myChart01....
  • echarts legend点击事件及默认选中

    千次阅读 2019-10-14 10:41:02
    在on事件下编辑需要的方法即可。 另外记录下设置legend默认选中只需修改selected。 legend: {  x: 'right',  data:['X','Y','Z'],  selected:{ 'X':true, 'Y':false, 'Z':false } }, 还有不清楚的...
  • } chart.setOption(option) // 处理legend点击事件 chart.on('legendselectchanged', function (obj) { if (obj.name === '初中') { if (obj.selected['初中'] === false && obj.selected['小学'] === true) { ...
  • 需求:折线图上有 一个产品的目标值和实际值 ,通过点击其中一个legend,同时隐藏该产品的实际值和目标值(指折线图上的线) 动态设置legend属性 无效 的解决办法
  • 一、legend 取消点击事件 legend:{ selectedMode:false,//取消图例上的点击事件 data:['浏览量','访问量'] } 二、legend 添加点击事件 图例组件用户切换图例开关会触发该事件。 myChart.on('...
  • ECharts legend添加点击事件

    万次阅读 2018-09-26 19:08:34
    效果不好展示,简单的说,加入此时的图例有男女两个,当点击女的legend的时候,如果女没有被点击,那么此时女的数据将不会别展示,再点击男的图例时候,因为此时只有男的数据,我们将重新渲染男的信息, 让我们图表...
  • echarts 图例 legend 取消点击事件

    万次阅读 2018-01-09 13:58:15
    legend: { selectedMode:false,//取消图例上的点击事件 data:['浏览量','访问量'] },
  • echarts点击legend事件 this.dom.on('legendselectchanged', function(params) { event.stopPropagation(); event.cancelBubble = true; }) 页面效果图   点击下图legend,不会触发父级点击事件   点击下...
  • birt chat图形中legend响应单击事件

    千次阅读 2012-09-14 15:23:21
    1. 选定legend选项,单击interacitvity 按钮。 2. 在弹出的对话框中,选择如图所示选项。 这样一个 使得标注响应鼠标单击事件就完成了,单击标注会使得对应的曲线显示或隐藏。 注:只有通过svg方式绘制的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,568
精华内容 3,027
关键字:

legend点击事件