[echarts]柱状图的点击事件

这篇具有很好参考价值的文章主要介绍了[echarts]柱状图的点击事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

echarts柱状图点击事件,echarts,echarts,前端,javascript
先来一段简洁的写echarts图表的代码:

// 这样获取echarts的dom节点是因为:如果将柱状图封装成了一个组件,在一个页面中多次使用,若还是按常规获取dom节点,会报一个警告
let charts = echarts.getInstanceByDom(
  document.getElementById(props.id)
)
if (charts == null) {
  charts = echarts.init(document.getElementById(props.id))
}
charts.clear()
let option = {
	...
}
charts.resize()
charts.setOption(option)

如图所示,如果柱状图需要有点击事件: 但这只是点击蓝色柱条部分才会触发点击事件的写法

myChart.on('click', function (params) {
	console.log(params)
})

如果柱条没有数据,用上述方法点击时将不会触发,如果无数据点击背景也依旧想触发点击事件,就用下面方法:

charts.getZr().off('click')		// 先取消点击,再触发,免得造成连续抖动触发
charts.getZr().on('click', function (params) {
	// 这个部分照抄,你想通过点击拿到的当前柱条的数据,都可以在下面这些属性中拿到,如果我注释没有你想要的,需要console一下charts.getOption()查找对应的属性名
    let pointInPixel = [params.offsetX, params.offsetY];
    
    if (charts.containPixel('grid', pointInPixel)) {
      let pointInGrid = charts.convertFromPixel({
        seriesIndex: 0
      }, pointInPixel);
      
      let xIndex = pointInGrid[1]; 			// 索引
      
      let handleIndex = Number(xIndex);
      
      let seriesObj = charts.getOption(); 	// 图表object对象
      
      let op = charts.getOption();
      
      //获得图表中点击的列
      let dataY = op.yAxis[0].data[handleIndex];  			//获取点击的列名
      
      let dataX = seriesObj.series[0].data[handleIndex]   	// 获取当前点击的柱条的数值 

		... // 写获取到当前点击需要的数值后的操作   
    }
})

另外,再补充一下划过和划出事件的写法,属性是一样的,就是事件名比较独特: mousemove mouseout,这两对应,必须这样写,写其他的可能无效文章来源地址https://www.toymoban.com/news/detail-546378.html

// 划过
charts.getZr().off('mousemove');
charts.getZr().on('mousemove', function(params) {

})
// 划出
charts.getZr().off('mouseout');
charts.getZr().on('mouseout', function(params) {

})

到了这里,关于[echarts]柱状图的点击事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • echarts的series——折线图,饼图,柱状图,散点图的配置

    🙂博主:小猫娃来啦 🙂文章核心: echarts的series——折线图,饼图,柱状图,散点图的配置 Echarts是一款基于JavaScript的开源可视化图表库,它具有以下优点: 1. 易于使用 : Echarts提供了丰富的图表类型和各种交互方式,用户可以通过简单的配置和API调用来创建各种复杂的图

    2024年02月01日
    浏览(63)
  • 【Echarts图例点击事件】自定义Echarts图例legend点击事件(已解决)

    **【写在前面】**这下我又不得不说了,还是客户现场使用时想查询一周的数据,查询时候发现页面居然要等20多秒,这是个人都得崩溃吧,然后就开始排查这块业务代码模块,主要体现在两个方面: A.接口请求时间过长(约8秒),有优化的空间 B.前端一次性调用了四次接口,分

    2023年04月08日
    浏览(83)
  • echarts用法之点击事件

    echarts用法之点击事件 - 知乎 echarts可以通过点击事件获取每项的值:myChart.on(\\\'click\\\', function (param) { } // myChart为自定义变量:var myChart = echarts.init(document.getElementById(\\\'echartBox\\\')); 可以通过param… https://zhuanlan.zhihu.com/p/588249196

    2024年02月08日
    浏览(61)
  • echarts 点击事件

    饼图点击事件会触发两次 可以通过点击事件 查询当前饼图是裂开还是合上的状态 a.event.target.parent._children是饼图的对象数组 数组中selected为true代表当前为选中状态,反之未选中 echarts的legend事件禁用以及legend显示百分比 自定义fomatter图标消失解决

    2024年02月11日
    浏览(36)
  • echarts的tooltip添加点击事件

    效果如下  代码如下  代码如下

    2024年02月16日
    浏览(34)
  • echarts实现渐变折线图并添加点击事件

         折线图点击事件代码:  完整代码如下:

    2024年02月16日
    浏览(54)
  • 关于使用Echarts来设置地图并触发点击事件

    先上效果图 有坑需要小伙伴们避开,Echarts版本号超过4.9就不能使用地图软件了,所以需要先卸载高版本再安装 配置好后复制就可以看到效果。

    2024年02月11日
    浏览(40)
  • 1-JavaScript 点击事件

    web前端JavaScript交互 ------ 点击事件 意义: JavaScript中的点击事件是指当用户在页面上点击某个元素时触发的事件。这个事件可以用于执行各种操作,如改变元素的样式、修改页面内容等。这是Web应用程序中最常用 的交互方式之一,允许用户与网页进行交互,提高用户体验。

    2024年02月08日
    浏览(41)
  • 1-JavaScript 点击事件 随机点名器

    web前端JavaScript交互 ------ 点击事件 意义: JavaScript中的点击事件是指当用户在页面上点击某个元素时触发的事件。这个事件可以用于执行各种操作,如改变元素的样式、修改页面内容等。这是Web应用程序中最常用 的交互方式之一,允许用户与网页进行交互,提高用户体验。

    2024年02月08日
    浏览(42)
  • JavaScript——监听事件:点击鼠标,视频静音(原神官网)

    用JS实现视频的静音,可以实现如图按钮所有功能,时间也和视频同步,JS实现。 如图所示, 首先搭个结构 再来看看CSS样式表 最后事件监听要看JavaScript实现 原理: 代码: OK,以上步骤完成,功能即可实现

    2024年02月11日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包