echarts 多y轴 数据有负数导致0刻度线不对齐

news2025/6/23 2:13:59

修改前:
在这里插入图片描述

let y1Data = [2.0, 4.9, 7.0, 23.2, 25.6, -76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
let y2Data = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
let rowNum = 6;
let max1 = y1Data.length != 0 ? Math.max(...y1Data) : 1;
let max2 = y2Data.length != 0 ? Math.max(...y2Data) : 1;
let min1 = y1Data.length != 0 ? Math.min(...y1Data) : 1;
let min2 = y2Data.length != 0 ? Math.min(...y2Data) : 1;

先分别读取出两个数组的最大值和最小值,如果数组的长度为0,为了方面后面的计算先设置值为1
rowNum 为理想的分段数,实际数量并不是真的这个。

let inter1 = Math.ceil((max1 - min1) / rowNum) || 1;
let inter2 = Math.ceil((max2 - min2) / rowNum) || 1;

然后分别计算出,每个数组在理想分段数下的每段实际间隔数inter

if (y1Data.length != 0) {
  min1 = Math.floor(min1 / inter1) * inter1;
  max1 = Math.ceil(max1 / inter1) * inter1;
}
if (y2Data.length != 0) {
  min2 = Math.floor(min2 / inter2) * inter2;
  max2 = Math.ceil(max2 / inter2) * inter2;
}

然后根据计算的实际分段间隔数去重新计算最大和最小数
目的是为了让最大和最小数刚好分段间隔成比例,这个时候的最大和最小数就是根据间隔比例来的

if (y2Data.length != 0 && y1Data.length != 0) {
  let maxNum1 = Math.floor(Math.abs(max1) / inter1)
  let minNum1 = Math.floor(Math.abs(min1) / inter1)
  let maxNum2 = Math.floor(Math.abs(max2) / inter2)
  let minNum2 = Math.floor(Math.abs(min2) / inter2)
  if (maxNum1 > maxNum2) {
    if (maxNum2 == 0) {
      max2 = maxNum1 * inter2 * 1
    } else {
      max2 = maxNum1 * inter2 * ((max2 || 1) / (Math.abs(max2) || 1))
    }
  } else if (maxNum1 < maxNum2) {
    if (maxNum1 == 0) {
      max1 = maxNum2 * inter1 * 1
    } else {
      max1 = maxNum2 * inter1 * ((max1 || 1) / (Math.abs(max1) || 1))
    }
  }
  if (minNum1 > minNum2) {
    if (minNum2 == 0) {
      min2 = minNum1 * inter2 * -1
    } else {
      min2 = minNum1 * inter2 * ((min2 || 1) / (Math.abs(min2) || 1))
    }
  } else if (minNum1 < minNum2) {
    if (minNum1 == 0) {
      min1 = minNum2 * inter1 * -1
    } else {
      min1 = minNum2 * inter1 * ((min1 || 1) / (Math.abs(min1) || 1))
    }
  }
}

先计算出每列的最大数占比数量和最小数占比数量,然后分别去对比,少数量的就根据分段间隔去补数量,保证两边的最大数列数和最小数列数相同,就可以保持一致的列刻度

yAxis: [
    {
      type: 'value',
      min: min1,
      max: max1,
      interval: inter1,
      splitNumber: rowNum,
    },
    {
      type: 'value',
      min: min2,
      max: max2,
      interval: inter2,
      splitNumber: rowNum,
    }
  ],

最后在yAxis上设置好上面计算的属性

完整代码如下:(图表渲染那块,只需要参考yAxis的配置就行

let y1Data = [2.0, 4.9, 7.0, 23.2, 25.6, -76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
let y2Data = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
let rowNum = 6;
let max1 = y1Data.length != 0 ? Math.max(...y1Data) : 1;
let max2 = y2Data.length != 0 ? Math.max(...y2Data) : 1;
let min1 = y1Data.length != 0 ? Math.min(...y1Data) : 1;
let min2 = y2Data.length != 0 ? Math.min(...y2Data) : 1;
let inter1 = Math.ceil((max1 - min1) / rowNum) || 1;
let inter2 = Math.ceil((max2 - min2) / rowNum) || 1;
if (y1Data.length != 0 && inter1 != 0) {
  min1 = Math.floor(min1 / inter1) * inter1;
  max1 = Math.ceil(max1 / inter1) * inter1;
}
if (y2Data.length != 0 && inter2 != 0) {
  min2 = Math.floor(min2 / inter2) * inter2;
  max2 = Math.ceil(max2 / inter2) * inter2;
}
if (y2Data.length != 0 && y1Data.length != 0) {
  let maxNum1 = Math.floor(Math.abs(max1) / inter1)
  let minNum1 = Math.floor(Math.abs(min1) / inter1)
  let maxNum2 = Math.floor(Math.abs(max2) / inter2)
  let minNum2 = Math.floor(Math.abs(min2) / inter2)
  if (maxNum1 > maxNum2) {
    if (maxNum2 == 0) {
      max2 = maxNum1 * inter2 * 1
    } else {
      max2 = maxNum1 * inter2 * ((max2 || 1) / (Math.abs(max2) || 1))
    }
  } else if (maxNum1 < maxNum2) {
    if (maxNum1 == 0) {
      max1 = maxNum2 * inter1 * 1
    } else {
      max1 = maxNum2 * inter1 * ((max1 || 1) / (Math.abs(max1) || 1))
    }
  }
  if (minNum1 > minNum2) {
    if (minNum2 == 0) {
      min2 = minNum1 * inter2 * -1
    } else {
      min2 = minNum1 * inter2 * ((min2 || 1) / (Math.abs(min2) || 1))
    }
  } else if (minNum1 < minNum2) {
    if (minNum1 == 0) {
      min1 = minNum2 * inter1 * -1
    } else {
      min1 = minNum2 * inter1 * ((min1 || 1) / (Math.abs(min1) || 1))
    }
  }
}

if (y1Data.length == 0) {
  max1 = 1
  min1 = 0
}
if (y2Data.length == 0) {
  max2 = 1
  min2 = 0
}

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Evaporation', 'Precipitation']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: min1,
      max: max1,
      interval: inter1,
      splitNumber: rowNum,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Evaporation',
      min: min2,
      max: max2,
      interval: inter2,
      splitNumber: rowNum,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: y1Data
    },
    {
      name: 'Precipitation',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: y2Data
    }
  ]
};

最终效果
在这里插入图片描述

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

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

相关文章

STM32CubeMX使用

一、新建工程 首先&#xff0c;打开STM32CubeMX&#xff0c;第一次使用的朋友可以点击右侧的CHECK FOR UPDATE和INSTALL/REMOVE检查一下软件更新并且找到对应芯片的固件库然后下载&#xff0c;软件和固件库都推荐是使用最新版的&#xff0c;这里不多介绍。 完毕之后点击File-&…

漏刻有时数据可视化Echarts组件开发(40)pictorialBar象形柱图

pictorialBar象形柱图 type&#xff1a;必须在ECharts 5.0以后的版本中设置&#xff0c;值为’pictorialBar’。name&#xff1a;系列名称&#xff0c;用于tooltip的显示&#xff0c;legend的图例筛选&#xff0c;在setOption更新数据和配置项时用于指定对应的系列。legendHov…

nodejs+vue+elementui实验室预约管理系统

简单的说 Node.js 就是运行在服务端的 JavaScript。 前端技术&#xff1a;nodejsvueelementui 前端&#xff1a;HTML5,CSS3、JavaScript、VUE实验室如何适应新的时代和新的潮流,开展有效的信息服务工作,完成时代赋予的新使命?本文就这一问题谈谈几点粗浅的看法.扩大业务范围,更…

HarmonyOS 远端状态订阅开发实例

IPC/RPC 提供对远端 Stub 对象状态的订阅机制&#xff0c; 在远端 Stub 对象消亡时&#xff0c;可触发消亡通知告诉本地 Proxy 对象。这种状态通知订阅需要调用特定接口完成&#xff0c;当不再需要订阅时也需要调用特定接口取消。使用这种订阅机制的用户&#xff0c;需要实现消…

金融新应用潮涌,银行如何加强数据安全韧性?

文 | 螳螂观察 作者 | 李永华 竞争白热化下&#xff0c;业务创新已经成为银行等金融企业普遍的追求。 以地方商业银行为代表&#xff0c;为了争夺市场、突破“大行”势能、让企业发展更进一步&#xff0c;新型应用正在快速落地&#xff0c;带来全新的竞争力。 但是&#xf…

Winform圆角用户控件的软件实现

1、文件结构 2、控件视图 3、程序代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Runtime.InteropServices; using System.Text; using System.Threading…

数码品牌这样做,教你实现用户增长

随着人工智能、移动互联网等新技术的不断发展&#xff0c;人们对数码产品的消费需求也在不断更新&#xff0c;这也给整个数码行业带来了消费与变革&#xff0c;在竞争激烈的数码市场上&#xff0c;数码品牌应该怎么做才能实现用户增长呢&#xff1f;可以试试软文&#xff0c;接…

UnityShaderLab —— 模型裁剪效果

首先定义一个裁剪范围&#xff0c; _DisappearOffset("offset",Range(-1,1)) 1 在顶点着色器中&#xff0c;取某个轴的值与裁剪的数相减存储在UV的z分量中 v2f vert (appdata v){v2f o;o.pos UnityObjectToClipPos(v.pos);o.uv.xy v.uv;o.uv.z _DisappearOffse…

02Linux各目录及每个目录的详细介绍

【常见目录说明】 目录/bin存放二进制可执行文件(ls,cat,mkdir等)&#xff0c;常用命令一般都在这里。/etc存放系统管理和配置文件/home存放所有用户文件的根目录&#xff0c;是用户主目录的基点&#xff0c;比如用户user的主目录就是/home/user&#xff0c;可以用~user表示/u…

app移动广告变现,开发者如何选择和管理聚合广告平台?

目前app广告变现成熟的变现体系由两部分组成&#xff0c;首先开发要选一个合适的广告聚合平台&#xff0c;对接SDK文档嵌入到app中&#xff0c;再基于此聚合广告平台&#xff0c;提升变现收益。 https://www.shenshiads.com/news_list 对于中小app&#xff0c;团队的资源有限…

WorkPlus安全专属的企业IM助力政企高效协作

在当今高度竞争的商业环境中&#xff0c;高效的内部沟通和协作成为企业取得成功的关键。企业IM系统因其便捷、安全和高效的特点&#xff0c;成为企业管理中不可或缺的一部分。WorkPlus作为领先品牌&#xff0c;在企业IM系统领域脱颖而出&#xff0c;为企业提供全面解决方案&…

FPGA coaxpress 2.0 ip

CoaXPress是一种高速串行接口技术&#xff0c;可以实现高带宽、长距离传输和多通道传输。CoaXPress图像采集卡通常具有多个CoaXPress接口&#xff0c;可以同时连接多个相机&#xff0c;实现多通道的图像采集。它们通常具有高速数据传输能力&#xff0c;可以实时采集和传输高分辨…

嵌入式养成计划-40----C++菱形继承--虚继承--多态--模板--异常

九十四、菱形继承 94.1 概念 菱形继承又称为钻石继承&#xff0c;是由公共基类派生出多个中间子类&#xff0c;又由中间子类共同派生出汇聚子类&#xff0c;汇聚子类会得到多份中间子类从公共基类继承下来的数据成员&#xff0c;会造成空间浪费&#xff0c;没有必要。 所以存…

MQ - 42 消息中台:搭建企业内部统一的消息服务

文章目录 导图概述统一的消息服务PaaS 化和中台化Pass VS 中台 方案比对PaaS 化的技术实现分析中台化的技术实现分析存储引擎的选择接入层协议设计接入层开发自定义 SDK 开发配套基础设施总结导图 概述 MQ - 02 基础篇_通讯协议我们知道了协议分为公有协议和私有协议。

墨者学院 Apache Struts2远程代码执行漏洞(S2-032)

命令执行 打开 web 页面&#xff1a; 利用Struts2工具进行远程命令执行

Linux 离线安装最新Python(3.12)设置独立virtualenv(venv)环境

目录 Linux安装最新Python 操作系统环境 1. 下载最新Python离线安装包 2. 安装最新Python 3. 验证 4. 卸载Python 设置独立virtualenv&#xff08;venv&#xff09;环境 1. 安装virtualenv 2. 设置独立venv 3. 在虚拟环境中安装pip依赖包 4. 卸载虚拟环境 Linux安装最…

【算法练习Day18】二叉搜索树的最小绝对差二叉搜索树中的众数 二叉树的最近公共祖先

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 二叉搜索树的最小绝对差二叉…

k8s相关的概念

1.1 K8S YAML文件详解 K8S Yaml 配置文件主要分为&#xff1a;基本标签、元数据标签、资源内容 三个部分&#xff0c;要想对K8S熟练的掌握&#xff0c;必须要了解YAML配置文件中常见的参数和指令的含义。 1&#xff09;基本标签主要是在文件起始位置&#xff0c;例如&#xff…

基于JAVA+SpringBoot+Vue的前后端分离的公益慈善服务平台

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着网络技术的发展&a…

2023年中国企业营销数字化行业发展趋势分析:企业营销数字化花费增速放缓[图]

随着通信设施和移动互联网的高速发展&#xff0c;中国MarTech市场也面临着一些挑战&#xff0c;在企业数字化转型的浪潮中&#xff0c;通过供需双方共同发力、技术能力不断升级和市场宏观环境的共同加持&#xff0c;助力中国企业营销数字化的发展。 中国企业营销数字化发展脉络…