echarts x轴的纵向区域随便点击获取点击的x轴那一纵向区域的值
1.现在xAxis里面配置一下:


2.在生成图表的后面加入框起来的部分

myChart.getZr().on('click', function (params) {
/* 通过获取echarts上面点击的区域是在第几格,根据索引来判断数据 */
let pointInPixel = [params.offsetX, params.offsetY]
if(myChart.containPixel('grid', pointInPixel)) {
var xIndex = myChart.convertFromPixel({seriesIndex: 0}, pointInPixel)[0]
// console.log('你在点击第', xIndex, '个格子')
that.xIndex= xIndex
}
// 该监听器正在监听一个`zrender 事件`。
});
3.这里定义了图表需要的数据

4.页面上显示


这就是效果图,随便点击一下,都能将点击的那一竖列的数据获取,通过索引来获取的
echarts x轴的纵向区域随便点击获取点击的x轴那一纵向区域的值的更多相关文章
- JS-009-屏幕分辨率、浏览器显示区域、元素位置获取
此文简略讲述有关屏幕大小.元素位置及大小获取. 执行文中脚本时,请先打开 Chrome 浏览器,并切换至开发者工具的控制台,并打开网址:http://www.yixun.com/,文中元素事例为页面元 ...
- echarts 点击方法总结,点任意一点获取点击数据,在多图联动中用生成标线举例
关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击点击任意一个图上任意一点 ...
- echarts 点击方法总结,点任意一点获取点击数据,举例说明:在多图联动中点击绘制标线
关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击任意一个图上任意一点,在 ...
- jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV
<div class="Content_top"> <div class="Reserve"> <h3><span c ...
- 浏览器页面区域大小的js获取方法
浏览器页面区域大小的获取: /在IE.FireFox.Opera下都可以使用 document.body.clientWidth document.body.clientHeight //即可 ...
- echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能
---------------------------------------------------------代码区---------------------------------------- ...
- 同上! 下拉复选框 点击当前的checkbox 选中后面li 添加到指定区域
(function() { $(".cxbtntj").click(function(){ console.log($("#jsLi1").attr(" ...
- 软件项目技术点(1)——d3.interpolateZoom-在两个点之间平滑地缩放平移
AxeSlide软件项目梳理 canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移.请 ...
- HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
随机推荐
- Sharepoint 列表分页开发
虽然现在linq技术对列表操作都是对实体操作了,但是linq有一点不好,那就是分页舞从下手,假如查出满足条件的记录有1万条,而在分页的时候我每次只需要显示10条,那么我每次点击下一页的时候都查询的是1 ...
- npm 包发布,自己本机发布,前端内部发布,全网发布
第一步,安装 sinopia npm install -g sinopia 开启终端一: 第二步,启动 sinopia -l 127.0.0.1:4873 开启终端二: cd 到某个指定仓库 mkdi ...
- Uni-app原生插件入门使用教程-[1]从Uni-app插件市场试用插件
[1]从Uniapp插件市场试用插件 当HBuilderX中提供的能力无法满足App功能需求,需要通过使用Andorid/iOS原生开发实现时,可使用App离线SDK开发原生插件来扩展原生能力. 如使 ...
- git提交报错:Error merging: refusing to merge unrelated histories
执行: git pull origin master --allow-unrelated-histories 然后再重新push即可
- JAVA获取当前日期指定天数之后的日期
/** * 获取day天之后的日期 * @param day 天数 * @return */ public static String getDate(int day){ Calendar calen ...
- vue-组件化编程
1.传统编写方式和组件编写方式的区别 组件方式编写可以很方便的复用和封装某些功能模块/组件的命名最好语义化,方便维护和阅读 编写时,我们可以将某些共用的功能或者样式部分抽象,得到对应的组件,按需要引入 ...
- google protobuf学习笔记:windows下环境配置
欢迎转载,转载请注明原文地址:http://blog.csdn.net/majianfei1023/article/details/45371743 protobuf的使用和原理,请查看:http:/ ...
- 1079 - Just another Robbery
1079 - Just another Robbery PDF (English) Statistics Forum Time Limit: 4 second(s) Memory Limit: 3 ...
- 1135 - Count the Multiples of 3
1135 - Count the Multiples of 3 PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limi ...
- select......for update会锁表还是锁行
select查询语句是不会加锁的,但是select .......for update除了有查询的作用外,还会加锁呢,而且它是悲观锁. 那么它加的是行锁还是表锁,这就要看是不是用了索引/主键. 没用索 ...