echarts中点击点击legend当前图表高亮

【推荐阅读】微服务还能火多久？>>>

# css

* {
    margin: 0;
    padding: 0;
}
.content {
    width: 500px;
    height: 400px;
    border: 1px solid red;
    margin: 100px auto;
}
#main {
    width: 100%;
    height: 100%;
    background-color: #0D141E;
}

# html

<div class="content">
    <div id="main">
    </div>
</div>

# js

<script src="js/echarts.min.js"></script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
    legend: {
        icon: 'none',
        data: [{
            name: '邮件营销',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff'
            }
        }, {
            name: '联盟广告',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff'
            }
        }, {
            name: '视频广告',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff'
            }
        }]
    },
    xAxis: {
        type: 'category',
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        splitLine: {
            show: false
        },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        splitLine: {
            show: false
        }
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            lineStyle: {
                color: 'red',
                width: 1
            },
            symbolSize: 0,
            data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
            name: '联盟广告',
            type: 'line',
            lineStyle: {
                color: 'green',
                width: 1
            },
            symbolSize: 0,
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            lineStyle: {
                color: 'blue',
                width: 1
            },
            symbolSize: 0,
            data: [150, 232, 201, 154, 190, 330, 410]
        }
    ]
};
myChart.setOption(option);
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);
})

# 核心代码说明

# 效果

来源：oschina

链接：https://my.oschina.net/u/4359017/blog/3238058