echart实现点击折线上的点在控制台显示折线信息、隐藏折线

本文链接：https://blog.youkuaiyun.com/vener_/article/details/129318908

问了chatgpt，但是一次回答可以实现前者不能实现后者，又一次回答能实现后者不能实现后者，于是整合了两次代码实现了需求。

<!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>
<!-- 容器，用来渲染折线图 -->
<div id="chart-container" style="width: 600px; height: 400px;"></div>

<script>
    // 假设折线图的容器的 DOM 节点的 ID 是 "chart-container"
    var chartDom = document.getElementById('chart-container');
    var myChart = echarts.init(chartDom);

    // 假设折线图的数据是如下格式的：
    var data = {
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            name: '折线1'
        }, {
            data: [550, 530, 501, 534, 690, 630, 720],
            type: 'line',
            name: '折线2'
        }]
    };

    // 使用上面的数据初始化折线图
    myChart.setOption(data);

    // 为折线图添加点击事件
    myChart.on('click', function (params) {
        // 获取点击的数据点的信息
        //var dataIndex = params.dataIndex;
        //var seriesIndex = params.seriesIndex;
        var seriesName = params.seriesName;
        //var value = params.value;

        var series = myChart.getOption().series[params.seriesIndex];
        console.log('你点击了折线 "' + params.seriesName + '"，该折线的数据如下：');
        console.log(series.data);
        // 找到对应的折线
        // var series = myChart.getOption().series[seriesIndex];
        //
        // // 输出该折线的信息
        // console.log('你点击了折线 "' + seriesName + '"，该折线的数据如下：');
        // console.log(series.data.map(function (item) {
        //     return item[1];
        // }));

        // 隐藏该折线
        myChart.setOption({
            legend: {
                selected: {
                    [seriesName]: false
                }
            },
            series: [{
                name: seriesName,
                data: [],
                showSymbol: false
            }]
        });
    });
</script>
</body>
</html>