有时有这样的需求,当鼠标移入到折线图对应的 area
区域时响应鼠标事件,比如 mousemove
。为了解决这个问题 echarts
提供了一个属性 triggerLineEvent
。
注意该属性是从 echarts v5.2.2 开始支持。
效果如下:
line area触发事件.gifehcarts 版本
ehcarts 5.3.0
代码如下:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210],
triggerLineEvent: true
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320],
triggerLineEvent: true
}
]
};
myChart.on('mousemove', (params) => {
console.log(params.seriesName, 'mousemove');
});
那么本文结束?no no no,问题在于今天在使用这个属性的时候未生效!一度让我怀疑之前有这个功能吗。。。
问题演示
line area未生效.gif其实代码和上面是同一份代码,echarts版本也一致,但是表现效果是不一样的,可以看到只有鼠标移到折线图拐点的位置才会触发mousemove 事件。
检查了一圈没看到哪里代码有问题,然后我还以为是 echarts 用 npm install 安装的 5.3.0 版本和cdn上的 5.3.0 版本不一致导致的,然后我想最新版本再怎么也同步了吧,然后用 npm 安装到最新版本5.5.0发现也不行,最后我把这部分代码复制到另外一个项目就可以了!!!两个的区别在于这个项目没有echarts换肤!!!
问题解决
最后通过注释方式,最终定位到这行代码,发现这个width如果是字符串类型就有问题,正确的应该是数字!
image.png
修改后运行效果正常,如下:
area方式.gif
总结
因为这个问题比较难找,因此还是决定花时间分享下,方便后面遇到同样坑的小伙伴快速修改问题。为什么一开始没有去想是换肤的问题?因为这个肤色是在官网的“在线编辑定义主题工具”下生成的,本能的忽略了这方面的原因。
若对你有帮助,请点个赞吧,谢谢支持!
本文地址:https://www.jianshu.com/p/2190ed6cad79?v=1712820995185,转载请注明出处,谢谢。
网友评论