echarts处理y轴最大小值根据数据动态处理、分割数和是否从0开始

news2024/9/20 2:25:05

方法

/**
 * 取整
 * @param value 输入值
 * @param scale 保留位数 正数是整数位,负数是小数位
 * @param isUpper true 向上取整  false向下取整
 * @returns
 */
const numberFix = (value, scale, isUpper) => {
    const moreThanZero = value >= 0
    value = Math.abs(value)
    if (scale == 0) {
      return value
    }
    if (scale > 0) {
      scale -= 1
    }
    let result
    if (moreThanZero) {
      result =
        numberFloorOrCeil(value / Math.pow(10, scale), isUpper) *
        Math.pow(10, scale)
    } else {
      result =
        -1 *
        numberFloorOrCeil(value / Math.pow(10, scale), !isUpper) *
        Math.pow(10, scale)
    }
    if (scale < 0) {
      result =
        numberFloorOrCeil(result * Math.pow(10, -1 * scale), isUpper) /
        Math.pow(10, -1 * scale)
    }
    return result
  }
  
  const numberFloorOrCeil = (value, isUpper) => {
    if (isUpper) {
      return Math.ceil(value)
    } else {
      return Math.floor(value)
    }
  }
  
  /**
   * 得到数字的尺寸
   * 0=>1
   * 5=>1
   * 10=>2
   * 123=>3
   * 0.5=>-1
   * 0.003=>-3
   * @param value
   * @returns {number}
   */
  const getNumberMaxScale = value => {
    const moreThanZero = value >= 0
    let absValue = Math.abs(value)
    if (absValue >= 1) {
      const valueStr = absValue + ''
      return valueStr.split('.')[0].length
    } else if (absValue > 0) {
      let scale = 0
      while (absValue < 1) {
        absValue *= 10
        scale -= 1
      }
      return scale
    } else {
      // 为0
      return 1
    }
  }
  
  /**
   *
   * @param valueArr 对象数组
   * @param splitNum 分割线数量
   * @param fromZero 是否从0开始
   * @param splitSmallerScale 分割数取整减少位数
   * @param splitMinScale 1是个位 2是10位,-1表示0.1级别,-2表示0.01级别,-3表示0.001级别; null就是不启用这个功能
   * @returns {{min: number, max: number, interval: number}}
   */
  const echartsSplit = (
    valueArr,
    splitNum = 5,
    fromZero = true,
    splitSmallerScale = 0,
    splitMinScale = null
  ) => {
    valueArr = [...valueArr]
    if (fromZero) {
      valueArr.push(0)
    }
    let maxValue = Math.max(...valueArr)
    let minValue = Math.min(...valueArr)
  
    const maxMoreThanZero = maxValue >= 0
    const minMoreThanZero = minValue >= 0
    let totalDiff = maxValue - minValue
    let totalDiffScale = getNumberMaxScale(totalDiff / splitNum)
    let splitScale = totalDiffScale - splitSmallerScale
    if (splitMinScale != null && splitScale < splitMinScale) {
      splitScale = splitMinScale
    }
    splitScale = splitScale == 0 ? -1 : splitScale
    let minResult = numberFix(minValue, splitScale, false)
    let splitValue = (maxValue - minResult) / splitNum
    let splitResult = numberFix(splitValue, splitScale, true)
    // 如果所有数据值都一样的特殊情况处理
    if (splitResult == 0) {
      // 如果所有数据都一样且都为0,则最小值为0
      minResult = minResult == 0 ? 0 : minResult - 1
      splitResult = 1
    }
    let maxResult = minResult + splitResult * splitNum
  
    return {
      min: Math.round(minResult * 100000000) / 100000000,
      max: Math.round(maxResult * 100000000) / 100000000,
      interval: Math.round(splitResult * 100000000) / 100000000
    }
  }
  export default echartsSplit
  

使用

import echartsSplit from '@/utils/echartsSplit'

setOptions(list) {
	  const wData = []
      const qData = []
      const drpData = []
      series.forEach((item) => {
        if (item.name.indexOf('流量') > -1) {
          qData.push(...item.data.filter((value) => value))
        } else if (item.name.indexOf('水位') > -1) {
          wData.push(...item.data.filter((value) => value))
        } else {
          drpData.push(...item.data.filter((value) => value))
        }
      })
      this.options.yAxis = yAxis.map((item, index) => {
        const data = index === 0 ? drpData : index === 1 ? wData : qData
        const obj = echartsSplit(data, 5, false)
        return {
          ...item,
          min: obj.min,
          max: obj.max,
          interval: obj.interval
        }
      })
      this.options = { ...this.options }
}

效果

在这里插入图片描述

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

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

相关文章

HarmonyOS NEXT 应用运行异常记录与解决(持续整理版)

问题一 App Launch Failed to get the device apiVersion. 解决方案 进入到设备管理&#xff0c;点击对应开启的模拟器设备&#xff0c;先将模拟器关闭&#xff0c;然后点击查出掉用户数据&#xff0c;再重启。 重启之后&#xff0c;一般能解决。如果遇到还是显示拿不到apiVer…

关于GeoTools技术架构知识简介

目录 前言 一、GeoTools架构说明 1、GeoTools Library 2、各模块说明 3、GeoTools插件 4、GeoTools的扩展功能 5、GeoTools的xml支持 二、从Geotools的源码看架构 1、GeoTools源码 2、各功能模块介绍 3、以library来看相关组件 三、总结 前言 作为使用Java语言开发的…

CAD图纸怎么加密?推荐5个有效防止图纸泄露的方法

随着技术的发展&#xff0c;CAD图纸成为了设计和工程领域不可或缺的一部分。然而&#xff0c;这些图纸往往包含敏感信息&#xff0c;一旦泄露可能会给企业带来严重的商业损失或知识产权问题。因此&#xff0c;采取有效的加密和保护措施至关重要。下面将介绍五种有效的方法来保护…

DBMS-2.1 数据库设计(1)——数据库设计与数据模型

本文章的素材与知识均来自于李国良老师的数据库管理系统课程。 数据库设计和数据模型 一.数据模型 1.概念 &#xff08;1&#xff09;数据库结构的基础就是数据模型。数据模型是用于描述数据间的联系、数据语义(即数据操作)、一致性(完整性)约束的概念和工具的集合。 2.分…

海外合规|新加坡网络安全认证计划简介(一)

新加坡网络安全局&#xff08;CSA&#xff09;为组织制定了网络安全认证计划&#xff0c;旨在表彰具有良好网络安全实践的组织。Cyber Essentials 标志表彰已实施网络卫生措施的组织&#xff0c;而 Cyber Trust 标志则是表彰具有全面网络安全措施和实践的组织的卓越标志。这些标…

【递归、回溯专题(三)】记忆化搜索题集

文章目录 1. 斐波那契数2. 不同路径2. 不同路径3. 最长递增子序列4. 猜数字大小II 1. 斐波那契数 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#x…

逻辑器件输出高阻态时,输出端口的电平是什么状态呢?

高阻态是逻辑器件输出端口的一种状态&#xff0c;当端口处于高阻态时&#xff0c;输入端口的电平变化不会引起输出端口变化&#xff0c;不会对与之相连的后级输入端口或总线产生影响&#xff0c;对于总线架构的电路极为重要。   输出端口处于高阻态时&#xff0c;输出端口处于…

什么是分段和分页?

内存管理的必要性 很早之前计算机只能运行单个进程&#xff0c;就算运行批处理程序&#xff0c;也是棑好对&#xff0c;一个一个的进行处理&#xff0c;不存在多个进程并发运行&#xff0c;这时候内核对于内存管理相对比较简单&#xff0c;直接把物理内存地址拿过来是使用即可。…

网络编程TCP和UDP

将TCP的CS模型再敲一遍 TCP服务器 1->创建原始的套接字描述符 2->将原始套接字与主机ip绑定 3->将原始套接字设置监听状态 4->接收客户端连接&#xff0c;获取客户端信息&#xff0c;因为原始套接字被用了&#xff0c;所以创建新的套接字描述符用于客户端通信…

2区SCI仅52天直录!9月甄选SCI/SSCI合集(含各领域)

【SciencePub学术】我处SciencePub学术2024年9月SCI/SSCI/EI/CNKI刊源表已更新&#xff01;内含多本中科院TOP、CCF推荐以及进展超顺的优质期刊&#xff0c;最快1-2个月录用&#xff01; 计算机领域重点SCI 环境地质化学领域重点SCI 生物医学领域重点SCI 数学材料物理领域重点S…

拥有这些AI绘画网站,让你轻松告别手绘时代!

在这个充满无限可能的数字世界里&#xff0c;AI 绘画动漫网站已经成为了许多艺术家和设计师的新宠。从手绘时代的岁月如歌&#xff0c;到今天科技的飞速发展&#xff0c;我们已经可以用AI技术创作出令人惊叹的艺术作品&#xff0c;打开了全新的创作空间。接下来&#xff0c;就让…

图形化编程011

项目描述&#xff1a; 点击绿旗&#xff0c;点击空格键&#xff0c;角色向上游动&#xff0c;松开空格键&#xff0c;角色向下飘落。 浮游生物碰到角色会发出声音并隐藏&#xff0c;碰到舞台边缘会重新出现。 30秒后程序结束 。 拆解步骤&#xff1a; 1、添加背景和角色以及…

如何打造一个智能化的远程在线考试系统?

远程教育与在线考试已成为提升知识传播效率和学习灵活性的重要手段。 土著刷题在线考试系统&#xff0c;凭借其完善的多功能考试模块&#xff0c;为教育机构、学校乃至企业提供了一个智能化的远程在线考试解决方案。 接下来将介绍土著刷题在线考试系统如何助力用户构建一个高效…

第L3周:机器学习-逻辑回归

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标&#xff1a; 逻辑回归适用于分类问题&#xff0c;主要用于解决二分类或多分类的问题。比如&#xff1a;用户购买某商品的可能性&#xff0c;某病人患有某…

单端输入与差分输入

单端输入&#xff1a; 单端输入测量的是一根导线与地之间的电压差&#xff0c;然后将这个差值放大以提供输出。 然而&#xff0c;单端输入容易受到噪声的影响&#xff0c;因为承载信号的导线会吸收电背景噪声。此外&#xff0c;单端输入上的信号还可能受到地环路的影响。 例…

鸿蒙(API 12 Beta6版)图形【NativeDisplaySoloist开发指导】方舟2D图形服务

如果开发者想在独立线程中进行帧率控制的Native侧业务&#xff0c;可以通过DisplaySoloist来实现&#xff0c;如游戏、自绘制UI框架对接等场景。 开发者可以选择多个DisplaySoloist实例共享一个线程&#xff0c;也可以选择每个DisplaySoloist实例独占一个线程。 接口说明 函…

【MySQL00】【 杂七杂八】

文章目录 一、前言二、MySQL 文件1. 参数文件2. 日志文件3. 套接字文件4. pid 文件5. 表结构定义文件6. InnoDB 存储引擎文件 二、BTree 索引排序三、InnoDB 关键特性1. 插入缓冲1.1 Insert Buffer 和 Change Buffer1.1 缓冲合并 2. 两次写2. 自适应哈希索引3. 异步IO4. 刷新邻…

宝藏!《联盟现代控制特训班题库》(麒麟篇) 讲义部分:甄选内容

本文内容&#xff0c;全部选自自动化考研联盟的&#xff1a;初试《现代控制特性班题库》(麒麟篇)&#xff0c;分为讲义和习题两个部分&#xff0c;本文为讲义部分的甄选内容&#xff0c;一本书帮你学透现控。 目录 Part1&#xff1a;资料封面&目录 讲义部分目录 Part2&…

为什么很多人都还用着Win10 而不投向Win11的怀抱?

前言 自从Windows 11发布&#xff08;2021年6月&#xff09;不知不觉已经过去了3年了。在这三年期间&#xff0c;Windows 11经历了几个大版本的更新。 Windows 10从正式发布开始&#xff08;2015年7月&#xff09;至现在已经有9年的历史。而Windows 10的最后一个版本22H2即将在…

2024年河南省成人高考报名指南

2024年河南省成人高考报名指南 河南省成人高考预计9月初g网报名&#xff0c;一般一周时间结束&#xff0c;预计到9月中旬报名截止‼不清楚报名流程同学看过来&#xff0c;今天老师给大家详细介绍一下&#xff01; 想参加河南成人高考需要什么条件&#xff0c;具体的报名流程是什…