echarts图表中，显示和隐藏数据echarts中实现按钮点击后，折线图中所有线，全部隐藏不看，达到点击一次取代点击很

echarts中实现按钮点击后，折线图中所有线，全部隐藏不看，达到点击一次取代点击很多次来显示所有折线的效果，然后选择自己想要看的折线图例点击一次即可。

显示所有折线：

隐藏所有折线：

完整代码实现：

方法一：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>ECharts Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <!-- 按钮容器 -->
    <button id="hideAllBtn">隐藏所有折线</button>
    <button id="showAllBtn">显示所有折线</button>
    <!-- 图表容器 -->
    <div id="main" style="height: 500px;"></div>

    <script type="text/javascript">
        // 基于准备好的 DOM，初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 图表的配置项
        var option = {
            title: {
                text: '折线图示例'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                selectedMode: true // 启用图例的多选模式
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        // 使用配置项和数据显示图表
        myChart.setOption(option);

        // 获取按钮元素
        var hideAllBtn = document.getElementById('hideAllBtn');
        var showAllBtn = document.getElementById('showAllBtn');

        // 隐藏所有折线的按钮点击事件
        hideAllBtn.addEventListener('click', function() {
            // 获取当前图表的图例选中状态
            var legendData = myChart.getOption().legend[0].data;

            // 将所有图例设置为未选中状态
            var selected = {};
            legendData.forEach(function(name) {
                selected[name] = false;
            });

            // 更新图表的图例选中状态
            myChart.setOption({
                legend: {
                    selected: selected
                }
            });
        });

        // 显示所有折线的按钮点击事件
        showAllBtn.addEventListener('click', function() {
            // 获取当前图表的图例选中状态
            var legendData = myChart.getOption().legend[0].data;

            // 将所有图例设置为选中状态
            var selected = {};
            legendData.forEach(function(name) {
                selected[name] = true;
            });

            // 更新图表的图例选中状态
            myChart.setOption({
                legend: {
                    selected: selected
                }
            });
        });

    </script>
</body>
</html>

方法二：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 准备一个用于放置图表的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 创建一个按钮 -->
    <button id="hideAllBtn">隐藏所有线</button>

    <script type="text/javascript">
        // 基于准备好的 DOM，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告']
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    data: [150, 232, 201, 154, 190, 330, 410]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 按钮点击事件，隐藏所有折线
        document.getElementById('hideAllBtn').addEventListener('click', function () {
            var legendData = option.legend.data;
            legendData.forEach(function(legendName) {
                myChart.dispatchAction({
                    type: 'legendUnSelect',
                    name: legendName
                });
            });
        });
    </script>
</body>
</html>

举例，正好在vue3项目中写了一个

echarts中option的属性toolbox

 toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        dataView: { readOnly: false },
        magicType: { type: ["line", "bar"] },
        restore: {},
        saveAsImage: {},
        myTool1: {
          show: true,
          title: "Hide/Show All Legends",
          icon: "path://M20,20 H80 V80 H20 Z M30,30 H90 V90 H30 Z M40,60 L55,75 L80,50",
          onclick: function () {
            toggleLegendVisibility();
          },
        },
      },
    },

toggleLegendVisibility方法

const isLegendVisible = ref(true);

// 切换图例可见性
const toggleLegendVisibility = () => {
  isLegendVisible.value = !isLegendVisible.value;

  const legendData = myChart.getOption().legend[0].data;
  const selected: any = {};

  if (!isLegendVisible.value) {
    legendData &&
      legendData.forEach((name) => {
        selected[name] = false;
      });
  } else {
    legendData &&
      legendData.forEach((name) => {
        selected[name] = true;
      });
  }

  myChart.setOption({
    legend: {
      selected: selected,
    },
  });
};