这是一个单图表的柱状图,请问怎么使用legend过滤a,b,c,d,e的柱?例如:我通过点击legend隐藏a,b,e三个柱?
配置项如下
var categories = ['a', 'b', 'c', 'd', 'e'];
var data = [6, 117, 225, 139, 333];
option = {
legend: {
// 在bar图表中似乎legend 不显示 ?
data: ['a', 'b', 'c', 'd', 'e']
},
xAxis: {
data: categories
},
yAxis: {},
series: [{
type: 'bar',
name: 'main',
data: data
}, {
// legend 的名字必须要要跟系列名字对应
// 空系列占位
type: 'scatter',
name: 'a'
}, {
type: 'scatter',
name: 'b'
}, {
type: 'scatter',
name: 'c'
}, {
type: 'scatter',
name: 'd'
}, {
type: 'scatter',
name: 'd'
}, {
type: 'scatter',
name: 'e'
}]
};
setTimeout(function () {
// 监听图例变化事件
myChart.on('legendselectchanged', function (e) {
var filteredData = data.map(function (val, idx) {
if (e.selected[categories[idx]]) {
return val;
}
else {
// 没被选中的返回空数据
return '-';
}
});
myChart.setOption({
series: {
name: 'main',
// 更新数据
data: filteredData
}
})
})
})