You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为ECharts图表数据项添加高亮悬浮样式?

解决ECharts折线图数据符号悬浮样式不生效的问题

你的配置里**silent: true**是导致悬浮样式失效的核心原因——这个属性会禁用当前系列所有图形元素的鼠标交互事件,包括悬浮触发的emphasis效果。

只需两步即可解决:

  1. 移除silent: true(或设置为silent: false),恢复交互能力
  2. 使用「emphasis嵌套itemStyle」的配置方式(这是ECharts规范的层级结构)

修改后的完整系列配置如下:

data: this.data,
// silent: true,  // 删除该行,或改为silent: false
sampling: 'average',
symbolSize: 12,
symbol: 'circle',
type: 'line',
itemStyle: {
  color: 'rgba(0,0,0, 0.6)',
},
lineStyle: {
  width: 5,
  color: 'rgba(0,0,0,0.4)',
},
emphasis: {
  itemStyle: {
    color: 'white',
    borderColor: 'blue',
    borderWidth: 2,
  },
}

补充说明:

  • ECharts的emphasis属于系列(series)层级配置,需与itemStyle、lineStyle同级,不能嵌套在itemStyle内部
  • 只有开启交互能力(即silent不为true),悬浮触发的样式变化才能生效

内容的提问来源于stack exchange,提问作者Ole

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.18 15:42:37