Vue +Echarts 二维数组获取最大值和最小值以及索引

实现图例效果

获取最大值方法:

    maxSecond(array) {
      let max = Number.MIN_SAFE_INTEGER;
      for (let i = 0; i < array.length; i++) {
        const secondElement = parseInt(array[i][1]);
        if (secondElement > max) {
          max = secondElement;
        }
      }
      return max;
    },

 获取最大值索引:

    maxSecondIndex(array) {
      let max = Number.MIN_SAFE_INTEGER;
      let maxIndex = -1;
      for (let i = 0; i < array.length; i++) {
        const secondElement = parseInt(array[i][1]);
        if (secondElement > max) {
          max = secondElement;
          maxIndex = i;
        }
      }
      return maxIndex;
    },

获取最小值方法:

    minSecond(array) {
      let min = Number.MAX_SAFE_INTEGER;
      for (let i = 0; i < array.length; i++) {
        const secondElement = parseInt(array[i][1]);
        if (secondElement < min) {
          min = secondElement;
        }
      }
      return min;
    },

获取最小值索引:

    minSecondIndex(array) {
      let min = Number.MAX_SAFE_INTEGER;
      let minIndex = -1;
      for (let i = 0; i < array.length; i++) {
        const secondElement = parseInt(array[i][1]);
        if (secondElement < min) {
          min = secondElement;
          minIndex = i;
        }
      }
      return minIndex;
    },
    // 按类型柱状图1
    setLine1(data) {
      var newData = []
      data.forEach(thisData => {
        var td =[]
        td.push(thisData.recordDate)
        td.push(thisData.totalCount)
        newData.push(td)
      })
      const max = this.maxSecond(newData)
      const maxIndex = this.maxSecondIndex(newData)
      const min = this.minSecond(newData)
      const minIndex = this.minSecondIndex(newData)
      var option3;
      option3 =  {
        title: {
          text: '操作票数量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['数量']
        },
        calculable: true,
        xAxis: {
          type: 'category',
          boundaryGap: false,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '操作票',
            data: newData,
            markPoint: {
              data: [
                { name: 'Max', value: max, xAxis: maxIndex, yAxis: max },
                { name: 'Min', value: min, xAxis: minIndex, yAxis: min }
              ],
              label: {
                show: true,
                color: '#fff', // 修改字体颜色为红色
                fontSize:17
              }
            },
            type: 'bar',
            symbol: 'none',  //取消折点圆圈
            smooth: true,  //折线平滑
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#0cbd9a'}, // 渐变起始处的颜色:淡蓝色
                  {offset: 1, color: '#29bf71'} // 渐变结束处的颜色:浅蓝色
                ]
              )
            },
            // 提示框展示配置
            tooltip: {
              // 提示框展示的内容
              valueFormatter: function (value) {
                return value + "张";
              },
            },
          }
        ]
      };
      if (this.dataEchart == null || this.dataEchart == '' || this.dataEchart == undefined) {
        this.dataEchart = echarts.init(this.$refs.dataEchart1, 'macarons')
      }
      this.dataEchart.clear()
      this.dataEchart.setOption(option3,true)
    },

根据代码自己将值替换即可实现上面图的效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/774276.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Citrix替换:不只是功能拉齐,更是性能体验的超越

用户在选择Citrix替换方案时&#xff0c;除了关注架构和功能的全面性&#xff0c;也期待着国产桌面办公方案带来的惊喜。 深信服桌面云不仅在基础能力和功能上做到了全面对标Citrix&#xff0c;还在用户极为重视的安全、可靠性、智能监控与排障、信创生态等方面做到了全面超越…

16_更快的速度与精度:Faster R-CNN

回顾R-CNN:链接 回顾Fast R-CNN:链接 1.1 简介 Faster R-CNN是作者Ross Girshick继Fast R-CNN后的又一力作。同样使用VGG16作推理速度在GPU上达到5fps(包括候选区域的生成)&#xff0c;准确率为网络的backbone&#xff0c;也有进一步的提升。在2015年的ILSVRC以及COCO竞赛中…

开放式运动耳机推荐的品牌都有哪些?五款2024靠谱机型推荐!

​作为一位耳机领域的资深数码评测师&#xff0c;我极力推荐开放式耳机作为日常佩戴之选。这款耳机凭借其创新的非入耳设计&#xff0c;有效避免了传统入耳式耳机长时间佩戴导致的耳道不适和感染风险&#xff0c;同时提供了稳固舒适的佩戴体验&#xff0c;特别适合运动爱好者如…

Android network - NUD检测机制(Android 14)

Android network - NUD检测机制 1. 前言2. 源码分析2.1 ClientModeImpl2.2 IpClient2.3 IpReachabilityMonitor 1. 前言 在Android系统中&#xff0c;NUD&#xff08;Neighbor Unreachable Detection&#xff09;指的是网络中的邻居不可达检测机制&#xff0c;它用于检测设备是…

LVS FILTER UNUSED OPTION

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 过滤一些版图与spice网表对不上的器件。 一般后端遇不到这个问题,因为通常是需要写到网表中的decap没有写出来造成的,如下图。

ceph-volume inventory KeyError: ‘TYPE‘ 处理

是否有人跟我一样碰到这样的情况 执行ceph-volume inventory报错 还好有错误日志可以看 [2024-07-05 11:40:40,540][ceph_volume.process][INFO ] Running command: /usr/sbin/blkid -c /dev/null -p /dev/ceph-c5fd6684-3851-49ab-bd44-f6743a79e24f/osd-block-42d41cd1-82…

半导体切割研磨废水的处理技术

半导体切割研磨废水处理是一个复杂而关键的过程&#xff0c;其废水主要来源于切割、研磨等工艺环节&#xff0c;这些过程中使用的化学品、冷却水、洗涤水等会产生含有重金属、有机物、酸碱度不稳定以及高浓度硅化合物等污染物的废水。针对这些废水的特性&#xff0c;半导体行业…

2025深圳国际消费电子展览会

2025深圳国际消费电子展览会 时间&#xff1a;2025年06月25-27日 地点&#xff1a;深圳国际会展中心(新馆) 详询主办方陆先生 I38&#xff08;前三位&#xff09; I82I&#xff08;中间四位&#xff09; 9I72&#xff08;后面四位&#xff09; 展会介绍&#xff1a; 20…

SRC实战:无中生有的接口和参数

今天分享的这个漏洞怎么说呢&#xff0c;虽然也是个高危&#xff0c;但是其实挺简单的&#xff0c;一个很eazy的越权&#xff0c;但是我觉得多多少少还是有点意思吧。 0x00 这是一个移动端的应用程序&#xff0c;前面比较常规&#xff0c;模拟器 BP&#xff0c;跑了一下所有…

你的机器人购物新体验——安全、高效、无忧

如果你跟我一样&#xff0c;对找到那些“恰到好处”的商品充满渴望&#xff0c;那么&#xff0c;让我来告诉你为什么BFT会成为你的下一个购物“心头好”。 BFT的优势 高效安全的支付体系&#xff1a;BFT交易系统保障了交易的安全性和透明性&#xff0c;让你的每一笔消费都安全…

python解析Linux top 系统信息并生成动态图表(pandas和matplotlib)

文章目录 0. 引言1. 功能2.使用步骤3. 程序架构流程图结构图 4. 数据解析模块5. 图表绘制模块6. 主程序入口7. 总结8. 附录完整代码 0. 引言 在性能调优和系统监控中&#xff0c;top 命令是一种重要工具&#xff0c;提供了实时的系统状态信息&#xff0c;如 CPU 使用率、内存使…

我爱服务器——LVM实战学习

后来呀&#xff0c;天亮之前毕业后踏入服务器领域了。。。。。。 LVM&#xff08;Logical Volume Manager&#xff09;是一个高级的磁盘管理框架&#xff0c;它允许用户将多个物理硬盘组合成一个逻辑卷&#xff0c;从而提供更大的存储空间、更高的灵活性和更好的数据管理能力。…

创业新选择:乐财业,让财税事业更简!

在市场需求和国家政策的双重驱动之下&#xff0c;【乐财业智慧财税赋能平台】基于鹦鹉智能财税系统、完善的税务资源供应链&#xff0c;财税专家团等&#xff0c;首创为企业提供“业财税”一体化的一站式财税解决方案&#xff0c;让财税生意更好做。 乐财业通过全国布局线下渠道…

Windows中Git的使用(2024最新版)

Windows中Git的使用 获取ssh keys本地绑定邮箱初始化本地仓库添加到本地缓存区提交到本地缓存区切换本地分支为main关联远程分支推送到GitHub查看推送日志 Git 2020年发布了新的默认分支名称"main"&#xff0c;取代了"master"作为主分支的名称。操作有了些…

MySQL数据库主从复制+mycat读写分离+MHA实操

目录 一、主从复制 1.1 主从复制简介 1.2 MySQL支持的复制类型 1.3 主从复制的工作过程 1.4 主从复制的同步模式 1.4.1 异步复制&#xff08;Asynchronous replication&#xff09; 1.4.2 全同步复制&#xff08;Fully synchronous replication&#xff09; 1.4.3 半同…

React+TS前台项目实战(二十三)-- 基于属性自定义数值显示组件Decimal封装

文章目录 前言Decimal组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言 今天要封装的Decimal 组件&#xff0c;是通过传入的属性进行定制化显示数值&#xff0c;在渲染时&#xff0c;会根据不同的情况显示整数部分、小数部分和单位&#xff0c;支持自定义样式…

Go源码--context包

简介 Context 是go语言比较重要的且也是比较复杂的一个结构体&#xff0c;Context主要有两种功能: 取消信号&#xff1a;包括直接取消&#xff08;涉及的结构体&#xff1a;cancelCtx ; 涉及函数&#xff1a;WithCancel&#xff09;和携带截止日期的取消&#xff08;涉及结构…

【Java安装】windows10+JDK21+IDEA

文章目录 一、JDK安装1. 下载完成后按照自己需要的位置安装2. 配置环境变量2.1 JAVA_HOME变量2.2 PATH配置 3. 验证4. helloworld 二、IDEA安装三、IDEA-HelloWorld 一、JDK安装 JDK安装链接 1. 下载完成后按照自己需要的位置安装 2. 配置环境变量 2.1 JAVA_HOME变量 安装…

JVM原理(三):JVM对象回收判定机制与回收算法

如何判断一个对象是否存活(即是否还分配在堆中)&#xff0c;那看他是否还在用。 1. 引用计数算法 这是一种判断方式&#xff0c;相应的方法就是&#xff1a;如果一个对象被引用&#xff0c;那将被引用的对象中的一个计数器加一&#xff0c;引用失效就减一。在任何时刻引用计数…

QT实现GIF动图显示(小白版,可直接copy使用)

需要你自己提前设置好动图的位置&#xff0c;本例中存放于"/Users/PLA/PLA/PLA.gif widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMovie> #include <QLabel>class Widget : public QWidget {Q_OBJECTpublic:explicit Wid…