#yyds干货盘点#echarts中点击legend高亮对应的图 _echarts

须知少年凌云志，曾许人间第一流。这篇文章主要讲述#yyds干货盘点#echarts中点击legend高亮对应的图相关的知识，希望能为你提供帮助。
1.项目中需要实现的效果如下，点击对应的图例，线条高亮，其他线条变暗【#yyds干货盘点#echarts中点击legend高亮对应的图】

文章图片

2.核心代码

myChart.on(legendselectchanged, function (params) var name = params.name; var selected = params.selected; selected[name] = true; // 获取legend数据 var legend = myChart.getOption().legend[0].data; // 获取series数据 var series = myChart.getOption().series; for (var i = 0; i < legend.length; i++) if (name === legend[i][name]) // 当前的legend高亮显示 legend[i][textStyle][fontWeight] = bold; legend[i][textStyle][color] = yellow; series[i][lineStyle][width] = 4; series[i][lineStyle][opacity] = 1; else // 排他思想其他legend恢复 legend[i][textStyle][fontWeight] = normal; legend[i][textStyle][color] = #fff; series[i][lineStyle][width] = 1; series[i][lineStyle][opacity] = 0.5; // 改变数据 option.legend.selected = selected; option.legend.data = https://www.songbingjia.com/android/legend; option.series = series; // 重新setOption myChart.setOption(option); )

3.总结