首页 > 其他分享 >Echarts 阴影点击事件获得当前柱状图的索引值方法

Echarts 阴影点击事件获得当前柱状图的索引值方法

时间:2023-05-29 18:44:49浏览次数:37  
标签:位置 点击 myChart 索引 柱状图 params var Echarts

Echarts 阴影点击事件获得当前柱状图的索引值方法

    //什么在option外面的变量
    var clickIndex;
option = { //配置信息
    tooltip: { //提示框
        //提示触发类型:不触发
        trigger: 'none',
    },
    //formatter回调函数,
    formatter: val => {
        //获取当前阴影部分点击的索引值并
        clickIndex = val[0].dataIndex
    },
}
//生成图框内容
myChart.setOption(option);
//加上getZr()即为阴影点击事件 
myChart.getZr().on('click', function(params) {
    //得到准确索引值,不会随着位置的变化而变化!
    console.log(clickIndex);
}

网上还有另外一种方法,但是得到的索引值会随着位置的变化而变化!!!!有点坑,适合用在静态图

myChart.getZr().on('click', function(params) {
               
                // 获取到鼠标点击位置:
                 var pointInPixel = [params.offsetX, params.offsetY];
                // 使用containPixel API判断点击位置是否在显示图形区域,下面的例子过滤了绘制图形的网格外的点击事件,比如X、Y轴lable、空白位置等的点击事件。
                 if (myChart.containPixel('grid', pointInPixel)) {
                 使用API convertFromPixel获取点击位置对应的x轴数据的索引值,我的实现是借助于索引值的,当然可以获取到其它的信息,详细请查看文档。
                 var xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
                 let op = myChart.getOption()
                  // 获取当前点击位置要的数据
                 var xData = op.series[0].data[xIndex]
                 console.log(xData);
});

 

标签:位置,点击,myChart,索引,柱状图,params,var,Echarts
From: https://www.cnblogs.com/yu412/p/17441339.html

相关文章

  • 10)索引、视图
    一个数据库可以创建多个索引;为了提升效率,索引需排序;索引会占用额外空间;(索引可以看作字典的检索目录)索引和约束:系统会自动为主键、唯一和外键字段创建索引;索引选取原则:  创建数据库测试; 1、创建索引:两种方法;1)创建表的同时创建索引:createtable表名(字段......
  • echarts堆叠柱状图上方展示两个数据项的总和
        //当月漏项统计排名getIndicatorCurve(data1){echarts.init(document.getElementById('lineOption5')).dispose()//销毁实例//找到容器letmyEcharts=echarts.init(document.getElementById('lineOption5'),......
  • 1.5万字+30张图盘点索引常见的11个知识点
    大家好,我是三友~~今天来盘点一下关于MySQL索引常见的知识点本来这篇文章我前两个星期就打算写了,提纲都列好了,但是后面我去追《漫长的季节》这部剧去了,这就花了一个周末的时间,再加上后面一些其它的事,导致没来得及写不过不要紧,好饭不怕晚,虽迟但到,走起,开干!对了,本文主要是针对Inn......
  • MySQL索引(一)
    雨喝醉了,小路摇摇晃晃,倒在我怀里1,B树和B+树之间的区别是什么?2,Innodb中的B+树有什么特点?3,什么是Innodb中的page?4,Innodb中的B+树是怎么产生的?5,什么是聚簇索引?6,Innodb是如何支持范围查找能走索引的?7,什么是联合索引?对应的B+树是如何产生的?8,什么是最左前缀原则?......
  • echarts爆错invalid dom
    错误截图 错误原因:将初始化echarts的方法放在了created中,解决:将其放在mounted中 ......
  • [20230517]建立索引导致的性能问题2.txt
    [20230517]建立索引导致的性能问题2.txt--//生产系统遭遇建立索引导致的性能问题,建立的sqlprofile里面包含索引名提示,很少见,改索引名导致sqlprofile失效,--//当然我遇到的情况有一点点不同,建立新索引,然后旧索引设置不可见(相当于改名),具体看下面的测试环境模拟.1.环境:SCO......
  • [20230518]建立索引导致的性能问题3.txt
    [20230518]建立索引导致的性能问题3.txt--//生产系统遭遇建立索引导致的性能问题,建立的sqlprofile里面包含索引名提示,很少见,改索引名导致sqlprofile失效,--//当然我遇到的情况有一点点不同,建立新索引,然后旧索引设置不可见(相当于改名),今天测试看看修改sqlprofile的内容是......
  • Doris(三) -- 索引
    索引索引用于帮助快速过滤或查找数据。目前Doris主要支持两类索引:• 内建的智能索引:包括前缀索引和ZoneMap索引。• 用户创建的二级索引:包括BloomFilter索引和Bitmap倒排索引。其中ZoneMap索引是在列存格式上,对每一列自动维护的索引信息,包括Min/Max,Null值个数等......
  • Elasticsearch掰开揉碎第17篇SpringBoot集成Elasticsearch之索引操作
    引言上一篇主要讲解的是:高亮显示、自定义高亮显示、通过html展示高亮效果。本篇主要讲解的是:创建SpringBoot项目、SpringBoot项目的配置修改、创建配置类、索引的API操作。创建spring项目双击IntelliJIDEA工具创建配置类编辑测试类1、创建索引运行测试类运行结果查看现有的索引可......
  • Elasticsearch掰开揉碎第4篇倒排索引
    引言上一篇主要讲解的是在windows环境下:Elasticsearch的单机、Elasticsearch的伪集群。本篇主要讲解的是:传统数据库的索引、Elasticsearch的倒排索引、Elasticsearch与关系型数据库对比。传统数据库的索引索引简介索引是数据库中,表级管理必须要配置的。如果不做索引,表级扫描是全表......