Quiero hacer que los datos del eje x sean seleccionables, es decir, puedo hacer clic en un componente, y luego el eje x aparecerá en la abscisa correspondiente, y luego hacer clic nuevamente y la abscisa desaparecerá. Quiero hacer que cada abscisa se pueda seleccionar para mostrar o no mostrar. Tomando el siguiente gráfico como ejemplo, puedo mirar selectivamente los datos del lunes y sábado, o mirar los datos del viernes, este es el caso.
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] }] };Enlace de edición de gráfico: https://www.makeapie.com/editor.html?c=xDrVLTK8SP&v=2
Uso 'clase' como juicio para cambiar el conjunto de datos.
Una solución estúpida.
Para su referencia. Tal vez pueda mejorarlo.
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>