在很多时候我们的柱状图分布不均匀,有些柱高可能会很小,如果通过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. BBS论坛(二十一)

    21.1.编辑轮播图功能完成 (1)cms_banners.html 把属性绑定到<tr>上面,方便找到各属性的值 <tbody> {% for banner in banne ...

  2. Spring Boot 2.0 教程 | AOP 切面统一打印请求日志

    欢迎关注微信公众号: 小哈学Java 文章首发于个人网站 https://www.exception.site/springboot/spring-boot-aop-web-request 本节中,您 ...

  3. HashMap? ConcurrentHashMap? 相信看完这篇没人能难住你!

    前言 Map 这样的 Key Value 在软件开发中是非常经典的结构,常用于在内存中存放数据. 本篇主要想讨论 ConcurrentHashMap 这样一个并发容器,在正式开始之前我觉得有必要谈谈 ...

  4. 在ASP.NET Core中获取客户端IP地址

    随着ASP.NET的发展,有不同的方式从请求中访问客户端IP地址.WebForms和MVC Web应用程序只是访问当前HTTP上下文的请求. var ip = HttpContext.Current. ...

  5. 【Python3爬虫】猫眼电影爬虫(破解字符集反爬)

    一.页面分析 首先打开猫眼电影,然后点击一个正在热播的电影(比如:毒液).打开开发者工具,点击左上角的箭头,然后用鼠标点击网页上的票价,可以看到源码中显示的不是数字,而是某些根本看不懂的字符,这是因为 ...

  6. SpringCloud Config服务端

    1.导入依赖 <dependency> <groupId>org.springframework.cloud</groupId> <artifactId> ...

  7. 【ASP.NET Core快速入门】(八)Middleware管道介绍、自己动手构建RequestDelegate管道

    中间件是汇集到以处理请求和响应的一个应用程序管道的软件. 每个组件: 可以选择是否要将请求传递到管道中的下一个组件. 之前和之后调用管道中的下一个组件,可以执行工作. 使用请求委托来生成请求管道. 请 ...

  8. 一起来看 rxjs

    更新日志 2018-05-26 校正 2016-12-03 第一版翻译 过去你错过的 Reactive Programming 的简介 你好奇于这名为Reactive Programming(反应式编 ...

  9. 如何使用kafka增加topic的备份数量,让业务更上一层楼

    本文由云+社区发表 一.困难点 建立topic的时候,可以通过指定参数 --replication-factor 设置备份数量.但是,一旦完成建立topic,则无法通过kafka-topic.sh 或 ...

  10. Mongodb副本集--Out of memory: Kill process 37325 (mongod)

    1.Mongodb副本集--Out of memory: Kill process 37325 (mongod) 场景描述: 恢复一个22TB数据的mongodb实例的时候. 将备用结点加入mongo ...