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

news2024/11/28 2:35:05

实现图例效果

获取最大值方法:

    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)
    },

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构——(单)链表

文章目录 1. 结构 2. 链表的分类 1. 单链表 2. 双链表 3. 循环单链表 4. 循环双链表 3. 优缺点 4. 单链表函数 5. 单链表代码实现 1. 结构 逻辑结构 链表是一种线性结构&#xff0c;由一系列结点&#xff08;Node&#xff09;组成。每个结点包含一个数据元素和一个指…

Linux库概念及相关编程(动态库-静态库)

Linux库概念及相关编程 分文件编程案例 分文件编程是指将程序按功能模块划分成不同的文件进行编写&#xff0c;这种方法有以下好处&#xff1a; 功能责任划分&#xff1a;每个文件对应一个功能模块&#xff0c;职责明确&#xff0c;易于理解和维护。方便调试&#xff1a;可以…

绝地求生PUBG点击开始游戏一直在加载不读条计时间的解决办法

绝地求生PUBG作为一款引领潮流的大逃杀游戏&#xff0c;凭借其紧张刺激的对抗体验赢得了全球玩家的喜爱。 即使是游戏已经上线很长时间了&#xff0c;但是游戏现在依旧是很火爆&#xff0c;还有很多玩家下载游戏进行游玩。然而&#xff0c;一些为玩家在游戏中遇到了点击开始游戏…

java版本ERP管理系统源码 Spring Cloud ERP_ERP系统_erp软件_ERP管理系统

在当今数字化时代&#xff0c;企业对高效、稳定且易于扩展的管理系统的需求日益增长。为了满足这一需求&#xff0c;我们精心打造了一款基于Java技术的ERP&#xff08;Enterprise Resource Planning&#xff09;管理系统。该系统充分利用了Spring Cloud Alibaba、Spring Boot、…

Butterfly主题文章标题改成转动小风车

效果 标题级别不同小风车颜色不同&#xff0c;鼠标移入会有转动变慢及变色效果。 新建css 建议在/source下创建诸如img/css/js等文件夹&#xff0c;存放文章或网站用的素材&#xff0c;分门别类后续也方便维护。 Hexo打包的时候&#xff0c;会自动把/source下的文件&#…

JavaScript基础知识5(对象)

JavaScript基础知识5&#xff08;对象&#xff09; 对象创建对象使用对象字面量使用 new Object() 访问和修改属性点表示法方括号表示法 动态添加和删除属性添加属性删除属性 对象方法对象的遍历常用属性和方法数学常量数学函数三角函数 使用示例生成随机整数计算圆的面积求最大…

Zabbix 配置 VMware 监控

Zabbix监控VMware 官方文档&#xff1a;https://www.zabbix.com/documentation/current/en/manual/vm_monitoring Zabbix 可以使用低级发现规则自动发现 VMware 虚拟机管理程序和虚拟机&#xff0c;并根据预定义的主机原型创建主机来监控它们。Zabbix 还包括用于监控 VMware …

VirtualBox的windows server 2016设置主机和虚拟机共享文件夹

文章目录 安装步骤1. windows server 2016安装增强功能2.上述安装完成之后&#xff0c;需要做共享文件夹&#xff0c;在宿主机&#xff0c;新建一个test文件夹&#xff0c;做共享设置&#xff0c;如下图&#xff1a;3.然后打开虚拟机&#xff0c;设置文件共享 安装步骤 1. win…

字节码编程javassist之定义方法和返回值

写在前面 源码 。 本文看下如何使用javassist来定义方法和返回值。 1&#xff1a;源码 package com.dahuyou.javassist.generateFieldAndMethod;import javassist.*;import java.lang.reflect.Method;public class JustDoIt222 {public static void main(String[] args) thr…

跨平台Ribbon UI组件QtitanRibbon全新发布v6.7.0——支持Qt 6.6.3

没有Microsoft在其办公解决方案中提供的界面&#xff0c;就无法想象现代应用程序&#xff0c;这个概念称为Ribbon UI&#xff0c;目前它是使应用程序与时俱进的主要属性。QtitanRibbon是一款遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件&#xff0c;QtitanRibb…

SOLIDWORKS分期许可(订阅形式),降低前期的投入成本!

SOLIDWORKS 分期许可使您能够降低前期软件成本&#xff0c;同时提供对 SOLIDWORKS 新版本和升级程序的即时访问&#xff0c;以及在每个期限结束时调整产品的灵活性&#xff0c;帮助您跟上市场需求和竞争压力的步伐。 目 录&#xff1a; ★ 1 什么是SOLIDWORKS分期许可 ★ 2 …

Cube-Studio:开源大模型全链路一站式中台

开源项目&#xff0c;欢迎star哦&#xff0c;https://github.com/data-infra/cube-studio 一款真正意义的 LLMOps 框架 LLMOps&#xff08;Large Language Model Operations&#xff09;是一个涵盖了大型语言模型&#xff08;如GPT系列&#xff09;开发、部署、维护和优化的一…

【EI会议/稳定检索】2024年应用数学、化学研究与物理工程国际会议(AMPE 2024)

2024 International Conference on Applied Mathematics, Chemical Research, and Physical Engineering 2024年应用数学、化学研究与物理工程国际会议(AMPE 2024) 【会议信息】 会议简称&#xff1a;AMPE 2024 大会时间&#xff1a;点击查看 截稿时间&#xff1a;官网查看 大…

pp 二 物料bom (CS01 CS02 CS03)

02&#xff1a;bom建了以后不能做生产&#xff0c;也不能下达计划 03&#xff1a;不能下达成本&#xff0c;下达订单 bom里面的存储地点高于物料主数据里面的存储地点&#xff08;mrp视图2&#xff09; 生产存储地点作为组件角度是一个发料得存储地点 但是作为一个成品则是成…

Restore Equipment

Restore Equipment 魔兽世界 - 盗号申请 - 恢复装备流程 魔兽和网易真的不行啊 1&#xff09;这个装备本来就是兑换的竟然可以卖NPC 2&#xff09;针对这个情况竟然无法挽回 3&#xff09;设计理念真的不得不吐槽一下 4&#xff09;策划真的不咋样&#xff0c;要是有机会我要自…

mssql查询历史执行过的语句日志

SELECT deqs.creation_time,dest.text AS [SQL Text],deqs.execution_count,deqs.total_elapsed_time,deqs.total_worker_time FROM sys.dm_exec_query_stats AS deqs CROSS APPLY sys.dm_exec_sql_text(deqs.sql_handle) AS dest--where dest.text like %这个是我的条件&#…

数学建模----滑翔伞伞翼面积的设计及运动状态描述

摘要 滑翔伞作为一项融合了挑战、冒险和刺激于一体的运动&#xff0c;近年来在全球范围内受到了广泛的关注。滑翔伞在救援、探险、体育、娱乐、环保和交通等领域的应用展现了其重要价值。然而&#xff0c;中国在滑翔伞领域尚未取得突破&#xff0c;缺乏全球影响力和竞争力。因此…

Keepalived+LVS实现负责均衡,高可用的集群

Keepalived的设计目标是构建高可用的LVS负载均衡群集&#xff0c;可以调用ipvsadm工具来创建虚拟服务器&#xff0c;管理服务器池&#xff0c;而不仅仅用作双机热备。使用Keepalived构建LVS群集更加简便易用&#xff0c;主要优势体现在&#xff1a;对LVS负责调度器实现热备切换…

iPad电容笔什么牌子好?2024最值得买的五款高性价比电容笔推荐!

现在平板和电容笔在一定程度上可以替代传统的笔和纸&#xff0c;不仅减少纸张浪费&#xff0c;还可以导入教材和习题册。只需携带它们就无需携带厚重的书本&#xff0c;这种环保、便捷、方便的特点吸引了越来越多的用户。但电容笔品牌的不断涌现&#xff0c;也让用户更加难以抉…

零基础STM32单片机编程入门(七)定时器PWM波输出实战含源码视频

文章目录 一.概要二.PWM产生框架图三.CubeMX配置一个TIME输出1KHZ&#xff0c;占空比50%PWM波例程1.硬件准备2.创建工程3.测量波形结果 四.CubeMX工程源代码下载五.讲解视频链接地址六.小结 一.概要 脉冲宽度调制(PWM)&#xff0c;是英文“Pulse Width Modulation”的缩写&…