关于引入Echarts的方法在此

直通车在此

接下来就是添加点击事件,获取X轴的数据


<div echarts #charts [options]="chartOption" class="charts"></div> import { NgxEchartsService } from 'ngx-echarts';
@ViewChild('charts', { static: false }) charts: ElementRef;
constructor(
private es: NgxEchartsService
) { } this.es.getInstanceByDom(this.charts.nativeElement).setOption(this.chartOption)
let myChart = this.es.getInstanceByDom(this.charts.nativeElement)
myChart.getZr().on('click', function (params) {
var pointInPixel = [params.offsetX, params.offsetY];
if (myChart.containPixel('grid', pointInPixel)) {
/*此处添加具体执行代码*/
var pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
//X轴序号
var xIndex = pointInGrid[0];
//获取当前图表的option
var op = myChart.getOption();
//获得图表中我们想要的数据---懒得写循环了,复制了一下,下面就不简写了,默认说我们的折现有三条吧
var xValue = op.xAxis[0].data[xIndex];
var value = op.series[0].data[xIndex];
var name = op.series[0].name;
var value1 = op.series[1].data[xIndex];
var name1 = op.series[1].name;
var value2 = op.series[2].data[xIndex];
var name2 = op.series[2].name;
console.log(op);
console.log('xValue: '+xValue + ", series[0].name0: "+name +' , value: '+ value + "%");
console.log('xValue: '+xValue + ", series[1].name0: "+name1 +' , value1: '+ value1 + "%");
console.log('xValue: '+xValue + ", series[2].name0: "+name2 +' , value2: '+ value2 + "%");
}
});

angular11给Echarts添加点击事件,无脑抄代码的时候到了~~ 超好用的更多相关文章

  1. echarts添加点击事件

    由于工作需要,需要用echarts 进行展示图表,却又个新的需求,要点击展示的地方,同时下面出现table展示内容 如图所示: 一开始找了好多博客,发现都不好用,大部分都是用到了 var ecConf ...

  2. echarts对每个data[i]的图片添加点击事件

    1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...

  3. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  4. 给View 添加手势,点击无反应 如何给View添加点击事件,手势方法

    项目中有很多地方需要添加点击事件,重复代码很多,所以做了一个UIView的分类,专门做点击事件使用.项目地址:UIView-Tap 代码很简单,主要有一点就是注意分类不能直接添加属性,需要用到运行时相 ...

  5. echart字符云之添加点击事件

    // 路径配置 require.config({ paths : { echarts : 'jquery/echarts-2.2.7/build/dist' } }); // 使用EChart.js画 ...

  6. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  7. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  8. iOS-给UIView添加点击事件

    一.当遇到一些UIView 或者 UIView的子类时,比如点击UIImageView要放大图片等. 二.步骤: 1.首先要确保打开控件的用户交互,userInteractionEnabled设置成Y ...

  9. ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

随机推荐

  1. 8.-Django应用及分布式路由

    一.应用 应用在Django项目中是一个独立的业务模块,可以包含自己的路由.视图.模版.模型,可以看成一个小的mtv 创建步骤 1.项目下用manage.py中的子命令创建应用文件夹 python3 ...

  2. 测试架构师CAP原理(最简单)

    测试架构师CAP原理(最简单) 很多人都不是很了解CAP理论,其实CAP很简单,不要想复杂了! C:一致性,就是数据一致性,就是数据不出错! A:可用性,就是说速度快,不延迟,无论请求成功失败都很快返 ...

  3. .NET性能系列文章二:Newtonsoft.Json vs. System.Text.Json

    微软终于追上了? 图片来自 Glenn Carstens-Peters Unsplash 欢迎来到.NET性能系列的另一章.这个系列的特点是对.NET世界中许多不同的主题进行研究.基准和比较.正如标题 ...

  4. 来啦来啦|开源 * 安全 * 赋能 - .NET Conf China 2022

    大会介绍 .NET Conf China 2022 是面向开发人员的社区峰会,延续 .NET Conf 2022 的活动,庆祝 .NET 7 的发布和回顾过去一年来 .NET 在中国的发展成果,它是由 ...

  5. GY91(MPU9250 + BMP280)惯性传感器开发指南

    目录 参考资料 I2C 设备ID 关键数据读取 MPU6500:读取加速度数据&换算单位 BMP280: 读取温度和气压信息 & 单位换算 推荐库 参考资料 参考资料说明: 用户手册时 ...

  6. Jenkins发版通知企业微信机器人

    1)开始通知 在Jenkins发版过程的第一步添加下面内容,调用下面脚本实现机器人发版通知(注意脚本路径和传参) ${BUILD_USER}是Jenkins内置变量,执行发布的用户名,需要安装插件-B ...

  7. MVC开发单元测试小工具 —— 搜寻还没写单元测试的方法

    方法比较笨,有更好的建议可以提. 写这个工具呢,因为要写单元测试,保证代码质量,方便修改维护.一切为了自己方便.当然这个算是个人开发的项目 1.MVC中控制器建立个基类(这个光明正大的抄袭的),控制往 ...

  8. laravel ajax用法

    $.ajax({ url:"index.php?r=sms/sms", type:"POST", data:{phone:mobileNum,_csrf:csr ...

  9. 06#Web 实战:实现可滑动的标签页

    实现效果图 本随笔只是记录一下大概的实现思路,如果感兴趣的小伙伴可以通过代码和本随笔的说明去理解实现过程.我的 Gitee 和 GitHub 地址.注意哦:这个只是 PC 上的标签页,手机端的没用,因 ...

  10. L1-064 估值一亿的AI核心代码 (20分)

    L1-064 估值一亿的AI核心代码 (20分) 以上图片来自新浪微博. 本题要求你实现一个稍微更值钱一点的 AI 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: 消除 ...