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. Sharepoint 列表分页开发

    虽然现在linq技术对列表操作都是对实体操作了,但是linq有一点不好,那就是分页舞从下手,假如查出满足条件的记录有1万条,而在分页的时候我每次只需要显示10条,那么我每次点击下一页的时候都查询的是1 ...

  2. npm 包发布,自己本机发布,前端内部发布,全网发布

    第一步,安装 sinopia npm install -g sinopia 开启终端一: 第二步,启动 sinopia -l 127.0.0.1:4873 开启终端二: cd 到某个指定仓库 mkdi ...

  3. Uni-app原生插件入门使用教程-[1]从Uni-app插件市场试用插件

    [1]从Uniapp插件市场试用插件 当HBuilderX中提供的能力无法满足App功能需求,需要通过使用Andorid/iOS原生开发实现时,可使用App离线SDK开发原生插件来扩展原生能力. 如使 ...

  4. git提交报错:Error merging: refusing to merge unrelated histories

    执行: git pull origin master --allow-unrelated-histories 然后再重新push即可

  5. JAVA获取当前日期指定天数之后的日期

    /** * 获取day天之后的日期 * @param day 天数 * @return */ public static String getDate(int day){ Calendar calen ...

  6. vue-组件化编程

    1.传统编写方式和组件编写方式的区别 组件方式编写可以很方便的复用和封装某些功能模块/组件的命名最好语义化,方便维护和阅读 编写时,我们可以将某些共用的功能或者样式部分抽象,得到对应的组件,按需要引入 ...

  7. google protobuf学习笔记:windows下环境配置

    欢迎转载,转载请注明原文地址:http://blog.csdn.net/majianfei1023/article/details/45371743 protobuf的使用和原理,请查看:http:/ ...

  8. 1079 - Just another Robbery

    1079 - Just another Robbery   PDF (English) Statistics Forum Time Limit: 4 second(s) Memory Limit: 3 ...

  9. 1135 - Count the Multiples of 3

    1135 - Count the Multiples of 3   PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limi ...

  10. select......for update会锁表还是锁行

    select查询语句是不会加锁的,但是select .......for update除了有查询的作用外,还会加锁呢,而且它是悲观锁. 那么它加的是行锁还是表锁,这就要看是不是用了索引/主键. 没用索 ...