Click on legend in echarts to highlight the current chart

# 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: 'Mail Marketing',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff'
            }
        }, {
            name: 'Affiliate Advertising',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff'
            }
        }, {
            name: 'Video Advertising',
            textStyle: {
                fontWeight: 'normal',
                color: '#fff'
            }
        }]
    },
    xAxis: {
        type: 'category',
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        splitLine: {
            show: false
        },
        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {
        type: 'value',
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        splitLine: {
            show: false
        }
    },
    series: [
        {
            name: 'Mail Marketing',
            type: 'line',
            lineStyle: {
                color: 'red',
                width: 1
            },
            symbolSize: 0,
            data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
            name: 'Affiliate Advertising',
            type: 'line',
            lineStyle: {
                color: 'green',
                width: 1
            },
            symbolSize: 0,
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Advertising',
            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;
    // Get legend data
    var legend = myChart.getOption().legend[0].data;
    // Get series data
    var series = myChart.getOption().series;
    for (var i = 0; i < legend.length; i++) {
        if (name === legend[i]['name']) {
            // The current legend is highlighted
            legend[i]['textStyle']['fontWeight'] = 'bold';
            legend[i]['textStyle']['color'] = 'yellow';
            series[i]['lineStyle']['width'] = 4;
            series[i]['lineStyle']['opacity'] = 1;
        } else {
            // Exclusive thinking, other legends restored
            legend[i]['textStyle']['fontWeight'] = 'normal';
            legend[i]['textStyle']['color'] = '#fff';
            series[i]['lineStyle']['width'] = 1;
            series[i]['lineStyle']['opacity'] = 0.5;
        }
    }
    // Change data
    option.legend.selected = selected;
    option.legend.data = legend;
    option.series = series;
    // reset setOption
    myChart.setOption(option);
})

# Core code description

# Effect (Does not support gif image display, no effect can be seen)