在很多时候我们的柱状图分布不均匀,有些柱高可能会很小,如果通过myChart.on('click',function(){})来促发事件,可能在点击的时候不好操作,因为这个click事件是绑定在各个serie上的,也就是单个柱子上,可以通过param参数获取点击的serie信息。但是如果要满足在柱高非常小的时候,也能有点击事件,我们可以对在整个对serie的阴影部分绑定。如下:

myChart.getZr().on('click',function(params){
const pointInPixel= [params.offsetX, params.offsetY];
if (cityChart.containPixel('grid',pointInPixel)) {
var xIndex=cityChart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
function(xIndex){
...
};
}
});

echarts柱状图点击阴影部分触发事件的更多相关文章

  1. vue Echarts 柱状图点击事件

    drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...

  2. js点击空白处触发事件

    我们经常会出现点击空白处关闭弹出框或触发事件 <div class="aa" style="width: 200px;height: 200px;backgroun ...

  3. 关于Echarts柱状图点击事件的实现方法

    开发过程中,我们经常会碰到这样的需求:在柱状图上,点击某条柱形,调用相应的方法或跳转相应的界面 接下来就详细介绍如何实现柱状图的点击事件,其中maChart是绘图对象 一.简单的点击事件 myChar ...

  4. 【小程序】bindconfirm点击小键盘触发事件、focus自动获取焦点

    最近在写小程序,项目要求写一个搜索框,在进入页面时就触发input的事件,调出键盘,点小键上的搜索按钮 就触发搜索事件,分享一下. bindconfirm 是点击小键盘上的搜索按钮就触发要执行的方法 ...

  5. js点击按钮触发事件的方法

    <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <input id= ...

  6. 点击 Button触发事件将GridView1 CheckBox勾选的行添加到GridView2中

    有时候想实现一个CheckBox选取功能,但是很多细节不是很清楚 相信大家都有遇到类似的情况,直接看代码,如下: 前端代码GridView1,CheckBox控件设置 <asp:GridView ...

  7. 在Echarts区域的任何位置精准触发事件

    ​ 需求背景:点击Echarts区域跳转页面,跳转的区域不包括grid的坐标及标签,翻看了Echarts官网,实现触发事件之的on方法,但是此方法只能在鼠标点击某个图形上会触发,这样并不能实现需求.通 ...

  8. ztree点击加号+触发ajax请求

    之前做的时候一直是点击节点才触发ajax事件,配置如下:发现点击节点前面的“+”没有反应,后来发现,应该添加一个折叠的事件. onExpand:zTreeOnClick事件和onClick的一样. v ...

  9. echarts添加点击事件

    由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容 如图所示: 一开始找了好多博客,发现都不好用,大部分都是用到了 var ecConf ...

随机推荐

  1. TDX指标的理解与改造(价格到达指标线提醒)

    目的:画线指标理解,并同时改造成条件选股指标. 参考:https://mp.csdn.net/postedit/83176406 #ff7700 hex color  https://www.colo ...

  2. qt deleterLater

    原文链接:浅谈 Qt 内存管理     Qt 内存管理是本文将要介绍的内容,在QT的程序中经常会看到只有new而不delete的情况,其实是因为QT有一套回收内存的机制,主要的规则如下: 1.所有继承 ...

  3. PHP_D4_“简易聊天室 ”的具体技术实现

    上面已经介绍了系统的关键技术,下面对具体实现进行详解: 1.开发时,经常需要利用一个配置文件来存储系统的参数,例如:数据库连接信息等.这样可以提高系统的可移植性,当系统的配置发生变化时,例如:更改服务 ...

  4. 基于三层架构的增删改查Get知识点

    给DataGridView控件绑定datatable数据源之后总是会多一行,在属性里修改属性allowuserToaddrow值为false即可 不可编辑状态是设置成只读状态即可,英文属性readon ...

  5. Netty 简介

    上文我们介绍了NIO和BIO的区别,NIO相对于BIO是一次很大的进步.但我们平时开发中并不会使用NIO.这是因为NIO在开发中存在以下问题 NIO的类库和API繁杂,使用麻烦,需要熟练掌握Selec ...

  6. Jenkins定时构建时间设置

    每隔5分钟构建一次 H/ * * * * 每两小时构建一次 H H/ * * * 每天中午12点定时构建一次 H * * * 每天下午18点定时构建一次 H * * * 在每个小时的前半个小时内的每1 ...

  7. leetcode — pascals-triangle

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  8. 原生JS forEach()和map()遍历的区别以及兼容写法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  9. Java面试系列--java基础

    Java基础总结 JAVA中的几种基本数据类型是什么,各自占用多少字节. 八大基本数据类型,byte:8位,short:16位,int:32位,long:64位,float:32位,double:64 ...

  10. 【Go】string 优化误区及建议

    原文链接: https://blog.thinkeridea.com/201902/go/string_ye_shi_yin_yong_lei_xing.html 本文原标题为 <string ...