关于引入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. 小米MIUI禁止系统更新

    删除downloaded_rom的文件夹,随便找一个文件(文件,不是文件夹),重名为downloaded_rom(是把一个文件重命名),这样系统后台偷偷下载时,就不知道该存放更新包的文件,就无法偷偷更 ...

  2. 【YOLOv5】手把手教你使用LabVIEW ONNX Runtime部署 TensorRT加速,实现YOLOv5实时物体识别(含源码)

    前言 上一篇博客给大家介绍了LabVIEW开放神经网络交互工具包[ONNX],今天我们就一起来看一下如何使用LabVIEW开放神经网络交互工具包实现TensorRT加速YOLOv5. 以下是YOLOv ...

  3. Workflow,要不要了解一下

    摘要:Workflow本质是开发者基于实际业务场景开发用于部署模型或应用的流水线工具. Workflow(也称工作流,下文中均可使用工作流进行描述)本质是开发者基于实际业务场景开发用于部署模型或应用的 ...

  4. go基础语法50问,来看看你的go基础合格了吗?

    目录 1.使用值为 nil 的 slice.map会发生啥 2.访问 map 中的 key,需要注意啥 3.string 类型的值可以修改吗 4.switch 中如何强制执行下一个 case 代码块 ...

  5. ModuleNotFoundError: No module named 'XXX'

    先来一张表情包: pycharm在小黑框使用pip安装某个包,在解释器没有找到某个包,所以运行程序的时候总是报错. 我相信大家可能都遇到这样的问题. 我下载有3.8.3.10版本的python,我py ...

  6. Java lambda表达式基本使用

    代码示例:java.lambda.LambdaExpression 1 本质 lambda表达式本质上是对匿名内部类实例的一种简化写法. 1.1 案例 有以下List<Integer>对象 ...

  7. SSH(七)新的开始

    在完成了ssh框架搭建的基础上,我尝试着去了解更多.新一阶段还是一些简单的增删改查,只是提高自己的熟练度. 这一片我要创建一个登录页面,并查询数据库完成登录. 一.创建实体: 1.1新建职员实体emp ...

  8. tostring、(string)和 String.valueOf()

    上周遇到一个问题,只怪自己平时没注意这个细节,从数据库取数据在map集合里,取出该值是我用了.tostring的方法,一次在当取出数据为空时代码报java.lang.NullPointerExcept ...

  9. 规则引擎Drools在贷后催收业务中的应用

    作者:vivo 互联网服务器团队- Feng Xiang 在日常业务开发工作中我们经常会遇到一些根据业务规则做决策的场景.为了让开发人员从大量的规则代码的开发维护中释放出来,把规则的维护和生成交由业务 ...

  10. WEB入门——信息搜集1-20

    WEB1--查看源码 查看源码即可得flag. WEB2--JS前端禁用 查看源码即可得flag. JavaScript实现禁用的方法简单来说就是当用户使用键盘执行某一命令是返回的一种状态,而这种状态 ...