ECharts柱状图关闭鼠标hover时的高亮样式详解

ECharts柱状图关闭hover高亮配置

近期在开发图表功能时，选用了ECharts作为绘图工具。

今日遇到一个较为棘手的问题：当两根柱状图重叠对比时，若其中一根柱子的颜色设计得较浅，由于ECharts默认在鼠标悬停（hover）到柱子上时会触发高亮状态，导致最终呈现的效果如图所示：

当鼠标悬停时，尽管预算柱子的背景色设计得靠前，提示框能正常显示，但ECharts自身的高亮状态会导致柱子视觉上消失：

鉴于此问题影响了图表的可读性，需要关闭ECharts的高亮状态。查阅文档后发现，ECharts提供了控制高亮显示与否的属性：

只需将series.emphasis.disabled设置为true，即可关闭鼠标悬停时的高亮效果。

option = {
  series: [
    {
      name: '预算数据',
      type: 'bar',
      barWidth: '60%',
      color: '#EAF6FE',
      emphasis: {
        disabled: true,
        focus: 'none'
      },
      data: [100, 520, 200, 350, 400, 370, 260]
    },
    {
      name: '实际数据',
      type: 'bar',
      barWidth: '60%',
      color: '#60BBFD',
      barGap: '-100%',
      emphasis: {
        disabled: true,
        focus: 'none'
      },
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};

配置该属性后，鼠标移动到柱子上时，图表不再受影响，可以正常查看。

但需注意，该属性仅在ECharts 5.3.0及之后版本中有效，5.3.0之前的版本即使配置也不会生效。因此，若使用5.3.0之前的版本，可选择联系UI调整图表配色，或升级项目中的ECharts版本。

总结

至此，关于ECharts柱状图关闭鼠标悬停高亮样式的介绍完毕。如需了解更多相关ECharts柱状图关闭高亮的内容，请搜索本站往期文章或继续浏览下方相关文章。感谢大家的支持！