echarts 柱状图使用getZr点击柱子以外的部分

19 篇文章 0 订阅

例子

注意:echarts点击事件先进行off(),能够避免2次事件

chart.getZr().off()
chart.getZr().on('click',params=>{
	  let pointInPixel = [params.offsetX, params.offsetY]
	  console.log(chart.containPixel('grid', pointInPixel))
	  let pointInGrid = chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
	  console.log(pointInGrid)
	  // x轴数据的索引值
	  let yIndex = pointInGrid[1]
	  var name=obj.y[yIndex]
	  //下面进行操作函数
})
  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
您可以通过 echarts 的 `graphic` 组件来实现将图片作为柱子的颜色。具体步骤如下: 1. 在 `option` 中定义柱状图的数据和样式,例如: ```js option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10], barWidth: 30, // 柱子的宽度 itemStyle: { normal: { borderWidth: 0, // 去掉边框 shadowBlur: 10, // 设置阴影模糊度 shadowOffsetX: 0, // 设置阴影水平偏移量 shadowOffsetY: 0, // 设置阴影垂直偏移量 shadowColor: 'rgba(0, 0, 0, 0.5)' // 设置阴影颜色 } } }] }; ``` 2. 在 `option` 中使用 `graphic` 组件添加图片。例如,我们可以使用以下代码在每个柱子上添加一个图片: ```js option.graphic = [{ type: 'image', style: { image: 'https://echarts.apache.org/examples/data/thumb/bar.png', width: 30, height: 50 }, left: 'center', top: 'center', z: -1 // 图片层级低于柱子,使柱子能够遮盖住图片 }]; ``` 其中,`type` 属性指定为 `'image'`,`style` 属性中的 `image` 指定为柱子的背景图片链接,`width` 和 `height` 分别指定图片的宽度和高度,`left` 和 `top` 分别指定图片的水平和垂直位置,`z` 指定图片的层级,设置为 `-1` 可以使图片层级低于柱子,使柱子能够遮盖住图片。 完整的代码如下: ```js option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10], barWidth: 30, // 柱子的宽度 itemStyle: { normal: { borderWidth: 0, // 去掉边框 shadowBlur: 10, // 设置阴影模糊度 shadowOffsetX: 0, // 设置阴影水平偏移量 shadowOffsetY: 0, // 设置阴影垂直偏移量 shadowColor: 'rgba(0, 0, 0, 0.5)' // 设置阴影颜色 } } }], graphic: [{ type: 'image', style: { image: 'https://echarts.apache.org/examples/data/thumb/bar.png', width: 30, height: 50 }, left: 'center', top: 'center', z: -1 // 图片层级低于柱子,使柱子能够遮盖住图片 }] }; ``` 注意:这里的图片链接只是示例,您需要将其替换成您自己的图片链接。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值