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轴那一纵向区域的值的更多相关文章

  1. JS-009-屏幕分辨率、浏览器显示区域、元素位置获取

    此文简略讲述有关屏幕大小.元素位置及大小获取. 执行文中脚本时,请先打开 Chrome 浏览器,并切换至开发者工具的控制台,并打开网址:http://www.yixun.com/,文中元素事例为页面元 ...

  2. echarts 点击方法总结,点任意一点获取点击数据,在多图联动中用生成标线举例

    关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击点击任意一个图上任意一点 ...

  3. echarts 点击方法总结,点任意一点获取点击数据,举例说明:在多图联动中点击绘制标线

    关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击任意一个图上任意一点,在 ...

  4. jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV

    <div class="Content_top"> <div class="Reserve"> <h3><span c ...

  5. 浏览器页面区域大小的js获取方法

    浏览器页面区域大小的获取:  /在IE.FireFox.Opera下都可以使用  document.body.clientWidth  document.body.clientHeight  //即可 ...

  6. echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能

    ---------------------------------------------------------代码区---------------------------------------- ...

  7. 同上! 下拉复选框 点击当前的checkbox 选中后面li 添加到指定区域

    (function() { $(".cxbtntj").click(function(){ console.log($("#jsLi1").attr(" ...

  8. 软件项目技术点(1)——d3.interpolateZoom-在两个点之间平滑地缩放平移

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移.请 ...

  9. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

随机推荐

  1. Clusternet 成为首批通过工信部开源成熟度评估项目!!!

    Clusternet 作为首批项目参与了<信息技术 开源 开源项目评估模型参考架构>测评,并成为通过评估的四个项目之一.<信息技术 开源 开源项目评估模型参考架构>由国防科技大 ...

  2. JAVA查询类别(菜单)下的所有子类别(递归)

    /** * 获取父类别下面的所有子类别 * @return List<StoreGoodsCate> 返回当前类别下的所有子类别集合 */ public List<StoreGood ...

  3. c++读取文件操作和写入文件

    在C++中与读取文件和写入文件简单操作有关的类分别有ifstream(文件读入).ofstream(文件写出).fstream (文件读入和写出). 名称 作用 ifstream 文件读入 ofstr ...

  4. c++设计模式概述之备忘录

    代买写的不够规范,,目的是缩短篇幅,实际中请不要这样做. 1.概述 和这个模式相似的生活场景,比如 office的撤销操作.VS  和 xcode等IDE的撤销操作 . 其实都是恢复到上一个或者下一个 ...

  5. 解决appt.exe finished with non- zero exit value 1问题

    解决appt.exe finished with non- zero exit value 1问题 最近使用Android Studio时,经常遇到appt.exe finished with non ...

  6. 【LeetCode】994. Rotting Oranges 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 BFS 日期 题目地址:https://leetco ...

  7. 郑厂长系列故事——体检(hdu 4519)

    郑厂长系列故事--体检 Time Limit: 500/200 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total S ...

  8. Capstone CS5265规格书|CS5265参数|TYPEC转HDMI音视频转换拓展坞芯片

    一.CS5265总概 Capstone CS5265 USB Type-C到HDMI转换器结合了USB Type-C输入接口和数字高清多媒体接口(HDMI)输出.嵌入式微控制器(MCU)基于工业标准8 ...

  9. Roslyn+T4+EnvDTE项目完全自动化(3) ——生成c++代码

    C++语法复杂,写一个示例通过T4可生成c++代码 需求:数据库,生成c++增,删,改,查代码 数据生成c++类,包含所有字段 自动识别数据的主键Key 查询生成赋值类字段,类型转换 通过类自动生成s ...

  10. playwright--自动化(二):过滑块验证码 验证码缺口识别

    前两天需要自动化登录一个商城的后台 用的是playwright 没有用selenium 中间出了一个滑块验证 现阶段playwright教程不是太多,自己做移动的时候各种找,费劲巴拉的.现在自己整出来 ...