在很多时候我们的柱状图分布不均匀,有些柱高可能会很小,如果通过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. Spring boot 之自动生成API文档swagger2

    目前解决API的方案一般有两种 1.编写文档接口.2.利用一些现成的api系统.3.如我一般想搞点特色的就自己写个api系统:http://api.zhaobaolin.vip/ ,这个还支持多用户. ...

  2. springboot+mybatis+dubbo+aop日志终结篇

    之前的几篇文章把dubbo服务层都介绍完毕,本篇文章咱们主要写web层如何调用服务层的方法.文章底部附带源码. 启动服务 服务启动时,会向zk注册自己提供的服务,zk则会记录服务提供者的IP地址以及暴 ...

  3. Nacos 发布 v0.8.0 Pre-GA版本,安全稳定上生产?

    服务注册和服务配置开源项目 Nacos 本周发布了 v0.8.0 Pre-GA 版本,作为开源项目生命周期中的里程碑版本之一,v0.8.0 Pre-GA版本支持登录.命名空间.Metrics监控(对接 ...

  4. 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU启动那些事(5)- 再聊eFUSE及其烧写方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的eFUSE. 在i.MXRT启动系列第二篇文章 Boot配置(BOOT Pin, eFUSE) 里痞子 ...

  5. Java开发笔记(三十二)字符型与整型相互转化

    前面提到字符类型是一种新的变量类型,然而编码实践的过程中却发现,某个具体的字符值居然可以赋值给整型变量!就像下面的例子代码那样,把字符值赋给整型变量,编译器不但没报错,而且还能正常运行! // 字符允 ...

  6. 对HTML5标签的认识(二)

    ---恢复内容开始--- 这次随笔主要讲一下列表标签.链接标签.和表格标签.图像标签.音频标签.及视频标签的运用及作用. 一.<ul>和<ol> 首先先了解一下<ul&g ...

  7. 修改tomcat的端口号

    一.环境 tomcat7.0.notepad++(这个是一个文本编辑器,用记事本也可以) 二.修改方法 端口        第一步:找到tomcat7的conf目录下的 server.xml这个文件, ...

  8. 折腾Java设计模式之命令模式

    博客原文地址 折腾Java设计模式之命令模式 命令模式 wiki上的描述 Encapsulate a request as an object, thereby allowing for the pa ...

  9. 通过多线程处理提高Redis性能

    Redis通常被称为单进程单线程模型. 这不是真的! Redis还运行多个后端线程来执行后端清理工作,例如清理脏数据和关闭文件描述符.在Redis中,主线程负责主要任务,包括但不限于:接收来自客户端的 ...

  10. 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

    在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...