如何让echarts的x轴数据可选择

Question

我想让x轴数据可选，就是我可以点击一个元件，然后x轴就会出现对应的横坐标，再点击，横坐标就会消失。我想让每个横坐标都可以选择显示或不显示。以下图为例，我可以选择性的看周一周六的数据，或者看周五的数据，是这样的。

option = {
    title: {
        text: 'Awesome Chart'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {},
    series: [{
        type: 'bar',
        data:[220, 182, 191, 234, 290, 330, 310]
    }]
};

图表编辑link：https://www.makeapie.com/editor.html?c=xDrVLTK8SP&v=2

Sample chart

Answer 1

我使用'class'作为判断改变数据集。
一个愚蠢的解决方案。
为了你的 reference.Maybe 你可以做得更好

        var Source = [
            ['Sun', 220],
            ['Mon', 182],
            ['Tue', 191],
            ['Wed', 234],
            ['Thu', 290],
            ['Fri', 330],
            ['Sat', 310]
        ]
        var option = {
            dataset: {
                source: Source
            },
            title: {
                text: 'Awesome Chart'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {

            },
            series: [{
                type: 'bar'
            },
            ]
        };

        var myChart2 = echarts.init(document.getElementById('main2'));
        myChart2.setOption(option);

        var currentSource=Array.from(Source);

        function Select(selweek) {
            $('#' + selweek).toggleClass('show hide');
            var IsHide = $('#' + selweek).hasClass('hide');
            var IsShow = $('#' + selweek).hasClass('show');

            var ShowData = Source.filter(s => s.includes(selweek));
            var index = currentSource.indexOf(ShowData[0]);
            var originalindex=Source.indexOf(ShowData[0]);

            if(IsHide){
               currentSource.splice(index, 1);
                }
            if(IsShow){
            currentSource.splice(originalindex, 0, ShowData[0]);
             }

            myChart2.setOption({
                dataset: {
                    source: currentSource
                },
            });
        };

        .hide {
            background-color: gray;
            color: white;
        }

        .show {
            background-color: blue;
            color: white;
        }

<!DOCTYPE html>
<html lang="Zh-TW">
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <meta charset="utf-8">
</head>
<body>
    <button onclick="Select('Sun');" class='show' id='Sun'>Sun</button>
    <button onclick="Select('Mon');" class='show' id='Mon'>Mon</button>
    <button onclick="Select('Tue');" class='show' id='Tue'>Tue</button>
    <button onclick="Select('Wed');" class='show' id='Wed'>Wed</button>
    <button onclick="Select('Thu');" class='show' id='Thu'>Thu</button>
    <button onclick="Select('Fri');" class='show' id='Fri'>Fri</button>
    <button onclick="Select('Sat');" class='show' id='Sat'>Sat</button>
    <div id="main2" style="width:100%;height:600px;"></div>
</body>
</html>

如何让echarts的x轴数据可选择

How to make the x-axis data of echarts selectable

javascript

vue.js

echarts