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. libevent源码学习(6):事件处理基础——event_base的创建

    目录前言创建默认的event_baseevent_base的配置event_config结构体创建自定义event_base--event_base_new_with_config禁用(避免使用)某一 ...

  2. nim_duilib(8)之combo

    introduction 更多控件用法,请参考 here 和 源码. 本文的代码基于这里 combo的更多用法,请参考源码中combo.h提供的函数,文末添加其提供的公有函数 xml文件添加代码 基于 ...

  3. 【LeetCode】299. Bulls and Cows 解题报告(Python)

    [LeetCode]299. Bulls and Cows 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题 ...

  4. 【LeetCode】11. Container With Most Water 盛最多水的容器

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:盛水,容器,题解,leetcode, 力扣,python ...

  5. Chapter 1 A Definition of Causal Effect

    目录 1.1 Individual casual effects 1.2 Average casual effects 1.5 Causation versus association Hern\(\ ...

  6. Huffman编/译码器(能够实现中英文)

    数据结构实训的时候写的一些东西,希望对你们有帮助, 如果转载请标明出处 头文件为 #ifndef TREEHEAD_H_INCLUDED #define TREEHEAD_H_INCLUDED #in ...

  7. VUE3 之 循环渲染

    1. 概述 老话说的好:单打独斗是不行的,要懂得合作. 言归正传,今天我们来聊聊 VUE3 的 循环渲染. 2. 循环渲染 2.1 循环渲染数组 <body> <div id=&qu ...

  8. Tomcat 服务器的端口会与其他的服务器端口发生冲突,此时则需要修改 Tomcat 服务器的端口

    查看相关知识 查看相关练习 Tomcat 服务器的端口会与其他的服务器端口发生冲突,此时则需要修改 Tomcat 服务器的端口 实现步骤: 1.找到 Tomcat 服务器安装目录下的 conf 文件夹 ...

  9. Mysql 设计超市经营管理系统,包括商品信息表(goods) 和 商品类型表(goodstype)

    互联网技术学院周测机试题(一) 一  需求分析 为进一步完善连锁超市经营管理,提高管理效率,减少管理成本,决定开发一套商品管理系统,用于日常的管理.本系统分为商品管理.员工管理.店铺管理,库存管理等功 ...

  10. .net core中Grpc使用报错:The response ended prematurely.

    当我们调用Grpc是出现下面的一堆异常时,一般是由于LTS导致的: Call failed with gRPC error status. Status code: 'Unavailable', Me ...