vue-echarts柱状图如何将柱子后方高亮区的悬停光标设为手型指针

光标不一致的原因 #

现在出现的光标差异，本质是你用来扩大可点击范围的高亮占位图形，没有单独配置悬停状态的光标属性，沿用了zrender的默认箭头样式，和柱子本体自带的手型光标配置不统一。

可直接落地的配置方法 #

1. 针对用透明Bar做点击热区的场景（绝大多数人会用的实现方式） #

如果你的高亮占位，是靠新增一个和目标柱子位置、宽度完全一致，填充色设为透明的Bar series实现的，直接在这个占位series的配置里加原生cursor属性就行，不用写额外的DOM操作代码：

chartOptionsBar = {
  // 原有其他图表配置...
  series: [
    // 正常展示的柱子series（本来就带pointer配置，所以悬停是手型）
    {
      type: 'bar',
      // 柱子原有配置...
      cursor: 'pointer'
    },
    // 用来扩大点击范围的透明占位series
    {
      type: 'bar',
      barWidth: 40, // 和展示柱子同宽
      itemStyle: {
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          color: 'rgba(0,0,0,0.08)' // 就是你看到的高亮占位效果
        }
      },
      // 这行加完，悬停这个占位区就会显示手型
      cursor: 'pointer'
    }
  ]
}

注意：这个是ECharts原生支持的元素级配置，只会对当前series下的图形生效，不会把坐标轴、图表空白区的光标也改成手型。

2. 针对markArea/自定义graphic元素做占位的场景 #

如果你的高亮占位是用markArea标记区域、或者自定义graphic图形实现的，直接在对应的配置节点下加cursor: 'pointer'就行：

// 举个markArea做高亮的例子
series: [
  {
    // 柱子原有配置...
    markArea: {
      // 关键配置
      cursor: 'pointer',
      data: [
        // 各个柱子对应的高亮区域坐标数据
      ]
    }
  }
]

3. 兜底处理手动绑定的zrender自定义元素 #

如果你的点击热区是直接调zrender API手动加的自定义图形，没走ECharts的series/markArea配置，可以在图表渲染完成后，遍历对应的占位元素批量改光标：

// 在nextTick钩子、或者图表rendered事件回调里执行
const zr = this.$refs.chart.getZr()
zr.each((graphEl) => {
  // 用你给自定义元素打标记来筛选要改的占位图形
  if (graphEl.__customMark === 'bar-click-hotzone') {
    graphEl.cursor = 'pointer'
  }
})

别踩这些坑 #

• 别图省事直接改图表外层canvas的默认cursor为pointer，这种全局改法会让鼠标悬停在坐标轴、图表空白处也变成手型，交互逻辑就乱了。
• 配完不用额外写hover事件手动切光标，ECharts在做元素命中检测的时候，会自动应用每个元素配置好的cursor样式。

内容的提问来源于stack exchange，提问作者alex