I want to make the x-axis data selectable, that is, I can click a component, and then the x-axis will appear the corresponding abscissa, and then click again, and the abscissa will disappear. I want to make each abscissa selectable to display or not to display. Taking the following chart as an example, I can selectively look at the data of Monday and Saturday, or look at the data of Friday, This is the case.
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]
}]
};
Chart edit link: https://www.makeapie.com/editor.html?c=xDrVLTK8SP&v=2
I use 'class' as judgment to change dataset.
A stupid solution.
For your reference.Maybe you can make it better
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>