美文网首页让前端飞web前端技术分享
echarts 折线图 triggerLineEvent 不触发

echarts 折线图 triggerLineEvent 不触发

作者: 阿巳交不起水电费 | 来源:发表于2024-04-10 15:36 被阅读0次

    有时有这样的需求,当鼠标移入到折线图对应的 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,转载请注明出处,谢谢。

    相关文章

      网友评论

        本文标题:echarts 折线图 triggerLineEvent 不触发

        本文链接:https://www.haomeiwen.com/subject/zdiqxjtx.html