vue中使用echarts实现柱状图点击事件_vue echarts 条形图点击后_风如也的博客-程序员秘密

技术标签: echarts  vue  Echarts  

drawBar(){
     //  告警次数TOPN 柱状图
  // 基于准备好的dom,初始化echarts实例
  let ref = this.$refs.bar
  if (ref && ref !== undefined) {
    
    let myChart = this.$echarts.init(ref)
    // 绘制图表
    myChart.setOption({
    
      color: ['#f16e6b'],
      tooltip: {
    
        trigger: 'axis',
        axisPointer: {
                // 坐标轴指示器,坐标轴触发有效
          type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
      },
      grid: {
    
        left: '10%',
        right: '10%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
    
          type: 'category',
          data: this.date_x,
          name: '终端编号'
        }
      ],
      yAxis: [
        {
    
          type: 'value'
        }
      ],
      series: [
        {
    
          type: 'bar',
          stack: '告警',
          data: this.date_y
        }
      ]
    });
    // 方式一:点击有数据的条形柱体查询相关U盘id,获取对应U盘id的列表数据
    // myChart.on('click', (params) => {
    
    //   this.getAlertList(parseFloat(this.risk_value), params.name)
    // })
    // 方式二:整条柱体的点击事件(如果要实现获取id的效果,则需要拿到series的数组,再通过index拿到对应的数据对象)
    myChart.getZr().on('click', (params) => {
    
      const pointInPixel = [params.offsetX, params.offsetY];
      if (myChart.containPixel('grid', pointInPixel)) {
    
        let xIndex = myChart.convertFromPixel({
    seriesIndex: 0}, [params.offsetX, params.offsetY])[0]
        this.getAlertList(parseFloat(this.risk_value), this.date_x[xIndex])
      }
    })
    // getZr()方法可以监听到整个画布的点击事件,zIndex是被点击的柱体的index
  }
},
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38157825/article/details/109671402

智能推荐

Netty之Jemalloc(四)PoolArena_究极纲要的博客-程序员秘密

PoolArena ,实现 PoolArenaMetric 接口,Netty 对 Jemalloc Arena 的抽象实现类,PoolArena 有两个子类实现:HeapArena ,对 Heap 类型的内存分配。DirectArena ,对 Direct 类型的内存分配。构造方法:/** * 是否支持 Unsafe 操作 */static final boolean HAS_U...

1078: a+b(多实例测试1) ZZULIOJ_a+b(不定个数测试用例版)_Orionxiong的博客-程序员秘密

1078: a+b(多实例测试1)题目描述计算A+B输入输入第1行为一个整数n(1≤n≤10),代表测试的组数。下面有n组测试数据,每组1行,为2个整数,为A, B。输出对每行输入,输出A+B的值,单独占一行。样例输入 Copy21 23 4样例输出 Copy37提示此类多实例测试解决方案:scanf("%d",&n);for(i=1;i<=n;i++){//读入、处理一组测试实例}#include<stdio.h>int main()

helm安装postgres_如何在Kubernetes中部署一个高可用的PostgreSQL集群环境_走奶行街的博客-程序员秘密

【编者的话】本文主要介绍了如何在Kubernetes环境中用Stolon去部署高可用的PostgreSQL,本文从Stolon的结构组成开始,由浅入深介绍原理,从开始安装到最后对其进行failover测试,深入浅出,为以后部署高可用的PostgreSQL提供了一种的解决方案。创建一个高可用的PostgreSQL集群环境总是一件棘手的事情。在云环境里部署时更是非常困难。我至少找到了3个项目,它们可以...

java 爬楼梯算法_动态规划-爬楼梯问题java实现_郑培凯的博客-程序员秘密

最近开始看算法导论,研究了一下动态规划,下面就开始直入主题开始记录近期看的第一个知识点动态规划。提起动态规划就不得不提几个动态规划的金典问题爬楼梯、国王金矿、背包问题。今天就仔细分析一下爬楼梯问题。列子 问:有一个高度为10级台阶的楼梯,从下往上走,每一次向上跨一个台阶只能是一个台阶或者两个台阶,要求用程序求出来一共有多少种算法?思考:如果每次都跨一个台阶 则为 1+1+1+1+1+1+1+1+1...

2022年中国互联网数据中心(IDC)行业产业链及市场现状分析(附国家绿色数据中心公示名单)[图]_idc数据_智研咨询产业研究的博客-程序员秘密

一、产业政策及标准根据《互联网数据中心技术及分级分类标准(YD/T2441-2013)》定义:互联网数据中心(InternetDataCenter,简称IDC)是指拥有宽带出口,并以外包出租的方式为用户的服务器、网络设备等互联网相关设备提供放置、代理维护、系统配置及管理服务,或提供计算、存储、软件等资源的出租、通信线路和出口带宽的代理租用和其它应用服务的电子信息系统机房。国家不断重视互联网数据中心行业发展,颁发了一系列政策及国家标准以推动其技术进步。2021年11月,国家发展改革委、中央网信

ora-04091问题的解决_buaageng的博客-程序员秘密

在某表orginfo上建立触发器,其中包括以下动作:增删改此表的记录时,需要查询此表,甚至改写此表的其他记录。报告“ora-04091:表已经被修改,对于触发器/函数不可见” 查看oracle developers guide ,在其中trigger的章节搜索ora-04091,根据说明,对于使用了for each row 的触发器,做了DML操作(delete,update

随便推点

JAVA高并发(JUC)之ThreadPool线程池api及工作原理简析_Cocowwy.的博客-程序员秘密

这次讲解的是JUC的线程池,对于ThreadPool,我们可以理解为已经为我们创建了一堆线程,然后再让这些线程去做我们指定的事情。首先先看看继承图:Executors创建线程的三种方法:ExecutorService threadPool = Executors.newFixedThreadPool(5); //固定容量ExecutorService threadPool = Executors.newSingleThreadExecutor(); //单例的、单个线程的线程池Executor

protobuf 动态 JAVA_一种根据ProtoBuf字段变化动态解析PB数据的方案_龚子仪的博客-程序员秘密

需求分析先来回顾一下解析PB数据的常规流程:先定义好proto文件,然后使用protoc工具生成java代码,再使用生成的代码里的parseFrom方法去解析PB数据。有这样一种场景,使用过程中,PB数据定义有变更,比如增删改了字段,常规方法是修改proto文件,重新生成java代码重新打包。那么需求来了,能不能做到做到PB数据字段变更后不打包、仅重启进程就能解析新的数据呢?解决方案查看官方文档,...

Android横向滚动卡片,Android仿探探卡片式滑动效果实现_尼不要逗了�mkq的博客-程序员秘密

前言第一次进入探探软件界面,就被这种通过卡片式滑动来选择“喜欢/不喜欢”的设计所吸引了。当时就非常想通过自己来实现这种仿探探式的效果,然而却没什么思路。不过毋庸置疑的是,这种效果的原理肯定和 ListView / RecyclerView 类似,涉及到 Item View 的回收和重用,否则早就因为大量的 Item View 而 OOM 了。再到后来,看到许多大神也推出了同样仿探探效果的博客,从头...

zabbix php time zone,【zabbix】问题 Time zone for PHP is not set (configuration parameterdate.timezone)..._Niaminis的博客-程序员秘密

【zabbix】问题 Time zone for PHP is not set (configuration parameterdate.timezone)2018年01月08日 14:19:33Betty-白靖阅读数 5947标签:php解决方案zabbix更多问题描述:在zabbix安装完成后,如果出现下图问题,这是因为我们配置文件里面的时区出现了问题,系统里默认是欧洲时区,需要改成...

树莓派4-更换系统源(Raspbian-buster系统)_raspberry pi 4 huanyuan_Redfalsh的博客-程序员秘密

参考链接树莓派4B换清华源并更换系统源(Raspbian-buster系统)第一步,先备份源文件sudo cp /etc/apt/sources.list /etc/apt/sources.list.baksudo cp /etc/apt/sources.list.d/raspi.list /etc/apt/sources.list.d/raspi.list.bak第二步,编辑系统源文件sudo nano /etc/apt/sources.list第三步,将初始的源使用#注释掉,添

结构体作为函数参数时出现的的低级错误_结构体50000传参stack报错_weixin_50095127的博客-程序员秘密

写作业时,编译器出现这个报错:expected expression before struct而且是在,每个调用结构体的地方都出错了。部分代码如下:#define NAME_LEN 25#define MAX_PARTS 100struct part {int number;char name[NAME_LEN+1];int on_hand;};int read_line(char str[], int n);int find_part(int number, const stru

推荐文章

热门文章

相关标签