如何在单击echarts中的第一个图例时禁用其他图例
如何在单击echarts中的第一个图例时禁用其他图例
提问于 2020-02-10 10:48:44
代码如下：
option = {
title: {
text: '堆叠区域图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
selected: {
'邮件营销': false
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};我想要做的是，当我单击邮件营销时，它应该显示该系列，并禁用/隐藏除我单击的邮件营销之外的所有其他图例。enter image description here
当我单击另一个图例时，邮件营销将禁用/隐藏该系列，并显示我单击的系列。enter image description here
但当我再次单击邮件营销时，它将隐藏/禁用其他图例。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-10 12:21:20
我假设你需要一个图表，在那里你只想看到点击的图例的细节。当用户单击图例A时，屏幕上应该可以看到类型A。如果用户单击图例B，则B类数据应仅在屏幕上可见。
我们可以通过图例选择change事件来检测change事件，并相应地设置图表。我附上了下面的代码，希望能对你有所帮助。
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
myChart.on('legendselectchanged', function (params) {
console.log(params);
selectGraph(params);
unselectGrap(params);
});
function selectGraph(params) {
myChart.dispatchAction({
type: 'legendSelect',
// legend name
name: params.name,
})
}
function unselectGrap(params) {
for (const legend in params.selected) {
if(legend !== params.name) {
myChart.dispatchAction({
type: 'legendUnSelect',
// legend name
name: legend,
})
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60143499
复制相关文章
相似问题
腾讯云开发者
