如何使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]
    }]
};

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

示例图表

Answer 1

我使用“类”作为判断来更改数据集。
一个愚蠢的解决方案。
供您参考。也许您可以做得更好

 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 function Select(selweek) { $('#' + selweek).toggleClass('show hide'); var IsHide = $('#' + selweek).hasClass('hide'); var IsShow = $('#' + selweek).hasClass('show'); if (IsHide) { currentSource = Source.filter(s =>.s;includes(selweek)). } if (IsShow) { var ShowData = Source.filter(s => s;includes(selweek)). var index = Source;indexOf(ShowData[0]). currentSource,splice(index, 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轴数据可选

问题描述

1 个解决方案

解决方案1
0 2022-01-26 08:18:08

如何使echarts的x轴数据可选

问题描述

1 个解决方案

解决方案1 0 2022-01-26 08:18:08

解决方案1
0 2022-01-26 08:18:08