https://blog.csdn.net/qq_43036532/article/details/95629749
echart 将折线图高亮
echart 做图表时, 遇到了当鼠标悬浮在折线上,使折线高亮的问题,在网上查找了各种解决办法,得到的结果是如下:
发现当鼠标移到折线上的时候,只有折线上的点会变大,而且在 emphasis 里,貌似并不能修改 linestyle ,只能修改 label,itemStyle…
emphasis: {// 高亮样式
itemStyle: {
color: '#000'
},
borderColor: 'orange'
}
最后仔细看了看文档,找到一个取巧的办法。。。
最终效果:
实现了 鼠标悬浮时 折线的高亮和显示框内 值 的高亮,下面附上部分代码:
var option = { // 这里面的就不多写了
......
}
myChart.setOption(option);
myChart.on('mouseover', function (params) {// 鼠标移入
// myChart.dispatchAction({
// type: 'highlight',
// seriesName: params.seriesName,
// })
myChart.setOption({// 设置 鼠标移入后想要的样式
series: {
name: params.seriesName,
symbolSize: 4,
lineStyle: {
width: 4
}
}
})
})
myChart.on('mouseout', function (params){// 鼠标移出
// myChart.dispatchAction({
// type: 'downplay',
// seriesName: params.seriesName,
// })
myChart.setOption({// 将样式复原
series: {
name: params.seriesName,
symbolSize: 2,
lineStyle: {
width: 2
}
}
})
})