echarts折线图鼠标悬浮效果

Question

echarts如何实现这种鼠标悬浮效果，悬浮时折线图中部分线条和区域颜色渐变高亮

Answer 1

ECharts 提供了丰富的交互事件供用户使用，其中 mouseover 和 mouseout 是两个常用的用于实现鼠标悬浮（hover）效果的事件。

如果你希望在鼠标悬浮时折线图中的部分线条和区域颜色渐变高亮，可以通过以下步骤实现：

1. 为你的折线图设置一个唯一的 seriesId，以便于后续的操作。
2. 在 ECharts 的 series 中，使用 itemStyle 属性来设定折线图线条的颜色，使用 emphasis 属性来设定鼠标悬浮时线条的颜色。在 emphasis 中，你可以设置 lineStyle 来改变线条的颜色。
3. 你可以通过监听 mouseover 事件来实现鼠标悬浮时颜色的改变。在事件回调函数中，你可以获取到当前鼠标悬停的系列项（event.seriesIndex 和 event.dataIndex），然后改变该项的 itemStyle 或者 emphasis 的属性值，从而改变折线图的颜色。

以下是一个简单的示例代码：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    series: [{
        type: 'line',
        data: [/* 你的数据 */],
        id: 'myLine',  // 设置 seriesId
        itemStyle: {
            color: '#83bff6',  // 设定线条颜色
        },
        emphasis: {  // 鼠标悬浮时线条的颜色
            lineStyle: {
                color: '#ffb980'  // 设定鼠标悬浮时线条的颜色
            }
        }
    }]
};

myChart.setOption(option);

myChart.on('mouseover', function (params) {  // 监听 mouseover 事件
    if (params.seriesIndex === 0) {  // 判断鼠标是否悬停在我们的折线图上
        myChart.setOption({
            series: [{
                id: 'myLine',  // 设置 seriesId
                itemStyle: {
                    color: '#ffb980'  // 改变线条颜色
                },
                emphasis: {  // 鼠标悬浮时线条的颜色
                    lineStyle: {
                        color: '#ffb980'  // 改变鼠标悬浮时线条的颜色
                    }
                }
            }]
        });
    }
});

以上代码会在鼠标悬停在折线图上时，将折线图的颜色改变为 #ffb980。你可以根据实际需要调整颜色值或者增加更多的高亮效果。