echarts问题--点击legend不全部隐藏，监听最后一个legend点击事件

最新推荐文章于 2025-03-31 16:57:18 发布

哥要掉线了

最新推荐文章于 2025-03-31 16:57:18 发布

阅读量4.9k

点赞数 1

分类专栏：常用基础文章标签：数据可视化 js

本文链接：https://blog.csdn.net/weixin_47677528/article/details/113944918

版权

常用基础专栏收录该内容

12 篇文章

订阅专栏

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>