echarts 折线图 triggerLineEvent 不触发

有时有这样的需求，当鼠标移入到折线图对应的 area 区域时响应鼠标事件，比如 mousemove。为了解决这个问题 echarts 提供了一个属性 triggerLineEvent。

image.png image.png
注意该属性是从 echarts v5.2.2 开始支持。

效果如下：

line area触发事件.gif

ehcarts 版本

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

总结

因为这个问题比较难找，因此还是决定花时间分享下，方便后面遇到同样坑的小伙伴快速修改问题。为什么一开始没有去想是换肤的问题？因为这个肤色是在官网的“在线编辑定义主题工具”下生成的，本能的忽略了这方面的原因。

image.png

若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/2190ed6cad79?v=1712820995185，转载请注明出处，谢谢。