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就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
随机推荐
- mdf与ldf文件如何还原到SQL Server数据库
1,首先新建两个数据库(Db1,Db2) 在Db1数据库中添加一个表: 然后点击数据库右键-属性-文件-找到文件路径 然后复制这个路径中的Db1的数据,把这两个文件放到其他文件之下 复制之前需要关闭S ...
- 分享自己做的一个指定进程以及线程长时间cpu监控的工具
前言: 前面给大家分享过一个工作中用到的编译拷贝脚本,其实工作中还有一些其他工具的使用,今天再来分享一个自己纯手工的CPU监控的脚本.大家可以结合上篇文章与本篇文章一起学习shell. 主要实现功能: ...
- 注解版mybatis动态语句将空字符串转换为null
Convert.java import java.util.Map; import java.util.Objects; /** * * @ClassName: Convert * @Descript ...
- Linux(centos)创建用户并分配权限
创建名为 elas的用户 adduser elas 初始化elas的密码 passwd elas 显示 新的 密码: 重新输入新的 密码: passwd:所有的身份验证令牌已经成功更新. 进行授权 个 ...
- 【LeetCode】1042. Flower Planting With No Adjacent 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 图 日期 题目地址:https://leetcode ...
- 【LeetCode】Longest Word in Dictionary through Deleting 解题报告
[LeetCode]Longest Word in Dictionary through Deleting 解题报告 标签(空格分隔): LeetCode 题目地址:https://leetcode. ...
- 【LeetCode】865. Smallest Subtree with all the Deepest Nodes 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- [LeetCode]621. Task Scheduler 任务安排 题解
题目描述 给定一个char数组,代表CPU需要做的任务,包含A-Z,不用考虑顺序,每个任务能在1个单位完成.但是有规定一个非负整数n代表两个相同任务之间需要至少n个时间单位.球最少数量的时间单位完成所 ...
- Codeforce C. Pearls in a Row
C. Pearls in a Row time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- PLSQL到期处理
一.输入指令"regedit"打开注册表 二.指令输入完毕后,按回车键,会进入这个界面. 三.注册表里按HKEY_CURRENT_USER\Software\Allround Au ...