解决echarts中effectScatter类型散点图中emphasis. focus不生效问题

最新推荐文章于 2024-10-29 17:13:57 发布

原创最新推荐文章于 2024-10-29 17:13:57 发布 · 5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #javascript #前端

项目场景：

提示：使用echarts类型为effectScatter的散点图的时候想要实现悬浮某个点其余散点隐藏

问题描述：

使用echarts版本在5.0.0以上的时候在使用effectScatter类型散点图的时候使用官方api中emphasis. focus实际效果却是不生效

emphasis: {
    focus: 'series',
    blurScope: 'coordinateSystem'
}

解决方案：

首先判断类型为scatter的散点图使用emphasis. focus实际效果是正确的那么可以先将所有的节点属性设置成scatter类型然后设置emphasis. focus属性例如：

  {
      name: 'Direct',
      type: 'effectScatter',
      stack: 'total',
      label: {
        show: false
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },

然后添加鼠标事件当悬浮到某一个点上执行：

this.myChart.on('mouseover', (params) => {
        this.scatterHover(params, this.option, this.myChart, this.numIndexAll)
      })

   // 散点悬浮加遮挡处理
    scatterHover(params, option, myChart, numIndexAll) {
      option.series[params.seriesIndex].animation = false
        option.series[params.seriesIndex].type = 'effectScatter'
        myChart.setOption(option)
    }

再添加离开鼠标事件：

 this.myChart.on('mouseout', (params) => {
        this.scatterOut(params, this.option, this.myChart, this.numIndexAll)
      })

 scatterOut(params, option, myChart, numIndexAll) {
      option.series[params.seriesIndex].animation = false
      option.series[params.seriesIndex].type = 'scatter'
      myChart.setOption(option, true)
      }
    },

这样就在悬浮上去是涟漪效果的散点，离开的时候就又恢复成无涟漪效果的散点图了，那么emphasis. focus属性就可以正常使用了效果如下：
在这里插入图片描述
离开之后效果：