在很多时候我们的柱状图分布不均匀,有些柱高可能会很小,如果通过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. Openssh版本升级修复漏洞

    一.由于openssh版本过低当用扫描软件检测时会出现以下漏洞: 二.解决方案是升级高版本,下面是升级的步凑. 1.安装telnet工具,因为升级过程中怕失败或者重启ssh失败.我们直接yun安装即可 ...

  2. qt实现头像上传功能

    想必大家都使用过qt的自定义头像功能吧,那么图1应该不会陌生,本片文章我就是要模拟一个这样的功能,虽然没有这么强大的效果,但是能够满足一定的需求. 图1 qq上传图片 首先在讲解功能之前,我先给出一片 ...

  3. java基础(十六)----- equals()与hashCode()方法详解 —— 面试必问

    本文将详解 equals()与hashCode()方法 概述 java.lang.Object类中有两个非常重要的方法: public boolean equals(Object obj) publi ...

  4. 使用ML.NET + ASP.NET Core + Docker + Azure Container Instances部署.NET机器学习模型

    本文将使用ML.NET创建机器学习分类模型,通过ASP.NET Core Web API公开它,将其打包到Docker容器中,并通过Azure Container Instances将其部署到云中. ...

  5. 从零开始学习PYTHON3讲义(五)while循环和棋盘麦粒问题

    <从零开始PYTHON3>第五讲 ​上一节课重点学习了字符串,并且传递了一个重要的理念,就是程序要对开发人员自己和用户都足够友好.在这个过程中,利用字符串给出充分.完整.准确的提示是非常重 ...

  6. 分享一个很通用c语言的Makefile

    编写Makefile是一个苦乐交织的事情,快乐是因为从一堆需要手工逐个处理的编译过程,进步到一条命令完成,看着代码顺畅的在屏幕上滚动,编译为最终的产品,那个过程无比愉悦:而痛苦则是,写代码已经很累了, ...

  7. docker 常用命令和使用

    首先安装Docker CE 在ubantu上,参照https://docs.docker.com/install/linux/docker-ce/ubuntu/#set-up-the-reposito ...

  8. 巨杉数据库入选Gartner数据库报告,中国首家入选厂商

    SequoiaDB巨杉数据库入选Gartner数据库报告,成为国内首批入选Gartner报告的数据库厂商. “SequoiaDB, 总部位于中国广州,是一款分布式.多模型(Multimodel).高可 ...

  9. 对多字段进行去重 ( Linq 方式 )

    优质参考资料:http://www.cnblogs.com/A_ming/archive/2013/05/24/3097062.html

  10. C#_asp.net mvc 验证码功能的具体实现

    @using (Html.BeginForm("Login", "HomePage",FormMethod.Post)) { <h2>登录</ ...