ECharts: is it possible to have a single hover effect on two curves from two series?
I have setup two curves on ECharts with 2 series objects. One is a dashed line, and another one is a continuation of this line, but filled. Currently when I hover one curve, it only makes it bold, leaving out the other curve without an effect.
Is it possible to somehow group these two curves, so that if one is hovered over, the other also has a hover over effect?
I've tried setting groupId to same values for both series, but it didn't do the trick.
Solution 1:
Yep, you need to catch events mouseover & mouseout and dispatchAction highlight and downplay respectively.
instance.on('mouseover', e => {
instance.dispatchAction({
type: 'highlight',
seriesName: ['line1', 'line2']
})
});
instance.on('mouseout', e => {
instance.dispatchAction({
type: 'downplay',
seriesName: ['line1', 'line2']
})
});
I made a small example to demonstrate how this works, hope this helps you.
var node = document.querySelector('#main');
var instance = echarts.init(node);
var option = {
xAxis: [{
type: 'category',
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
}],
yAxis: {},
series: [{
name: 'line1',
type: 'line',
triggerLineEvent: true,
data: [10, 20, 60, 100, null, null, null],
emphasis: {
lineStyle: {
type: 'dashed'
}
}
}, {
name: 'line2',
type: 'line',
triggerLineEvent: true,
data: [null, null, null, 100, 50, 20],
lineStyle: {
type: 'dashed'
},
emphasis: {
lineStyle: {
type: 'solid'
}
}
}],
}
instance.setOption(option);
instance.on('mouseover', e => {
instance.dispatchAction({
type: 'highlight',
seriesName: ['line1', 'line2']
})
});
instance.on('mouseout', e => {
instance.dispatchAction({
type: 'downplay',
seriesName: ['line1', 'line2']
})
});<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width:800; height:400px;"></div>