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

Posted 2021-12-18 歆冉

1.项目中需要实现的效果如下，点击对应的图例，线条高亮，其他线条变暗

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 = legend;
    option.series = series;
    // 重新setOption
    myChart.setOption(option);
)

3.总结

• echarts的使用
• eharts添加单击事件
• 图例的使用