echarts点击按钮，隐藏某条曲线

<template>
  <div class="app-container">
    
    <div ref="chartContainer" class="chartContainer2"></div>
    <el-checkbox-group v-model="checkboxGroup1" @change="handleCheckboxs">
      <el-checkbox-button v-for="btn in btns" :key="btn" :label="btn" >
        {{ btn }}
      </el-checkbox-button>
    </el-checkbox-group>

  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { map } from "lodash";

const btns = ['1', '2', '3']
const checkboxGroup1 = ref(['1'])

const chartContainer = ref(null);

let chart = null;

const data = reactive({
 
  options: {
    title: {
      text: "历史曲线",
      subtext: "",
      top: "0%",
      x: "center",
      textAlign: "center", // 让标题居中显示
      textStyle: {
        color: "#000",
        fontWeight: "bold",
        fontSize: 25,
      },
    },
    backgroundColor: "#FFF",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross", // 鼠标放上去显示横纵坐标刻度线
        animation: true,
      },
    },
    grid: {
      containLabel: true,
      borderWidth: 1,
      borderColor: "red",
      top: 40,
      bottom: 60,
      left: 10,
      right: 200,
      textStyle: {
        color: "#fff",
        fontSize: 30,
      },
    },
    xAxis: {
      name: "",
      type: "category",
      axisLine: {
        lineStyle: {
          color: "red",
        },
      },
      axisLine: {
        lineStyle: {
          color: "red",
        },
      },
      splitLine: {
        interval: function (index, value) {
          return index === 0 || index === 0;
        },
        show: true,
        lineStyle: {
          color: function (index) {
            return index === 0 ? "red" : "green";
          },
          color: "red",
          width: 1,
          type: "solid",
        },
      },
      axisLabel: {
        showMinLabel: true,
        showMaxLabel: true,
      },
      minorSplitLine: {
        show: true,
      },
      data: "",
    },
    yAxis: {
      type: "value",
      name: "",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(0,0,0,0.9)", // 竖线颜色为红色
          width: 1, // 线宽
          type: "solid", // 线型
        },
      },
      axisLine: {
        lineStyle: {
          color: "red",
        },
      },
      minorSplitLine: {
        // 细 分割横线
        show: true,
        lineStyle: {
          color: "rgba(0,0,0,0.5)",
          type: "dashed", // 虚线
        },
      },
    },
    series: [
      {
        name: "1",
        type: "line",
        showSymbol: false,
        data: [1,2,11,12],
        lineStyle: {
          //设置线条默认样式
          normal: {
            width: 1,
          },
          //设置线条hover样式
          emphasis: { width: 1 },
        },
      },
      {
        name: "2",
        type: "line",
        smooth: true,
        symbolSize: 10,
        symbol: "circle",
        data: [3,4,13,14],
      },
      {
        name: "3",
        type: "line",
        smooth: true,
        symbolSize: 10,
        symbol: "circle",
        data: [5,6,15,16],
      },
    ],
    legend: {
      show: true,
      left: "right",
      top: "middle",
      width: 120,
      textStyle: {
        fontSize: 20,
      },
      data: [
        // "1",
        // "2",
        // "3",
      ],
      selected:{"1":false,"2":true,"3":false}
    },
    dataZoom: [
      {
        // startValue: '11:10:11'
      },
      {
        type: "inside", // 拖动x轴缩放
      },
    ],
    calculable: true,
  },
});
const { options } = toRefs(data);

// 从后端获取数据，初始化echart
function initEchart() {
    // 渲染图表
    chart =
      echarts.getInstanceByDom(chartContainer.value) ||
      echarts.init(chartContainer.value);
    chart.setOption(options.value);

    // 图表自适应
    chart.resize();
    window.addEventListener("resize", () => chart.resize());

    
}
function handleCheckboxs(params) {
  console.log({params});
  // options.value.legend.selected = {"1":true,"2":false,"3":true}

  // const selected = params.reduce((obj, item) => {
  //   obj[item] = true;
  //   return obj;
  // }, {});
  // options.value.legend.selected = selected

  // options.value.legend.selected

  for (const key in options.value.legend.selected) {
    if (params.includes(key)) {
      options.value.legend.selected[key] = true;
    } else {
      options.value.legend.selected[key] = false;
    }
  }

  chart.setOption(options.value);

  console.log(options.value);

}
onMounted(() => {
  initEchart();
});
</script>