解决Echarts中双坐标轴分割错位问题

news2024/11/20 16:34:21

1、处理函数

/**
 * @Description 刻度最大值
 * @date 2023-08-30
 * @param {any} isNaN(maxValue/1
 * @returns {any}
 */
export const getYAxisMax = (maxValue): number => {
  if (isNaN(maxValue / 1) || maxValue / 1 < 10) {
    return 10;
  }
  const max: any = Math.ceil(maxValue) + '';
  const itemValue: any = Math.ceil(max / 5) + '';
  const mins = Math.ceil(itemValue / Math.pow(10, itemValue.length - 1));
  const item: any = mins * Math.pow(10, itemValue.length - 1) + '';
  // item 需要是5的整数倍
  const res = Math.ceil(item / 5) * 5 * 5;
  return res;
};

2、完整的options

export const getOption= (chartData) => {
  const color: string[] = ['#C1EEFC', '#92B8E5', '#2AB84A'];
  const intervalMax = getYAxisMax(Math.max.apply(null, chartData.oKCellCountData));

  return {
    color,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    legend: {
      data: ['总电芯', 'OK电芯数', '工序良率'],
      icon: 'circle',
    },
    grid: {
      left: '5%',
      right: '5%',
      top: 50,
      bottom: 40,
    },
    xAxis: [
      {
        type: 'category',
        data: chartData.xAxisData,
        axisPointer: {
          type: 'shadow',
        },
        axisLabel: {
          rotate: 20, // 顺时针旋转 30 度
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量(个)',
        // min: 0,
        // max: 250,
        axisLabel: {
          formatter: '{value}',
        },
        interval: intervalMax / 5,
        max: intervalMax,
      },
      {
        type: 'value',
        name: '良率(%)',
        min: 0,
        max: 100,
        axisLabel: {
          formatter: '{value}',
        },
      },
    ],
    series: [
      {
        name: '总电芯',
        type: 'bar',
        barWidth: 12, // 设置柱子的宽度
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 设置单个数值
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + '个';
          },
        },
        data: chartData.totalCellsData,
      },
      {
        name: 'OK电芯数',
        type: 'bar',
        barWidth: 12, // 设置柱子的宽度
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // 设置单个数值
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + '个';
          },
        },
        data: chartData.oKCellCountData,
      },
      {
        name: '工序良率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + '%';
          },
        },
        data: chartData.processYieldData,
      },
    ],
  };
};

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

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

相关文章

Vue框架--Vue中el和data的两种写法

data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例&#xff0c;随后再通过vm.$mount(#root)指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择&#xff1a;目前哪种写法都可以&#xff0c;以后学习到组件时&#xff…

Redis-Cluster集群操作--添加节点

一、环境部署 部署好Redis-Cluster集群&#xff0c;参考上个本人的博客&#xff1a;Redis-Cluster集群的部署&#xff08;详细步骤&#xff09;_是胡也是福的博客-CSDN博客 新准备一台机器&#xff0c;修改主机名&#xff0c;关闭防火墙和selinux&#xff0c;参考&#xff1a…

stm32 iap sd卡升级

参考&#xff1a;STM32F4 IAP 跳转 APP问题_stm32程序跳转_古城码农的博客-CSDN博客 app程序改两个位置 1.程序首地址&#xff1a; 2.改中断向量表位移&#xff0c;偏移量和上面一样就可以 然后编译成bin文件就可以了

云原生Kubernetes:二进制部署K8S单Master架构(二)

目录 一、理论 1.K8S单Master架构 2.部署 master 组件 3.部署 Woker Node 组件 4.在master1节点上操作 5.在 node01 节点上操作 6.在 master01 节点上操作 7.在 node01 节点上操作 8.node02 节点部署&#xff08;方法一&#xff09; 二、实验 1.环境 2.部署 master …

使用Python对数据的操作转换

1、列表加值转字典 在Python中&#xff0c;将列表的值转换为字典的键可以使用以下代码&#xff1a; myList ["name", "age", "location"] myDict {k: None for k in myList} print(myDict) 输出&#xff1a; {name: None, age: None, loca…

10. 微积分 - 微分链式法则

文章目录 微分链式法则Hi, 大家好。我是茶桁。 我们上节课讲了导数,并且在最后预告了今天的内容。今天将会是两部分,一部分是「微分」,一部分是「链式法则」。 微分 微分,我们在导论里面提过。它和导数比较像,但是还是有差别的。实际的定义和内容都比较简单,我们先来看…

【数据结构——树】二叉树的遍历(前序、中序、后序、层序)迭代+递归

文章目录 二叉树的定义二叉树的遍历方式前序遍历递归DFS迭代&#xff08;栈&#xff09; 中序遍历递归DFS迭代&#xff08;栈&#xff09; 后序遍历递归DFS迭代&#xff08;栈&#xff09; 层序遍历迭代&#xff08;队列&#xff09; 二叉树的定义 二叉树是一种常见的树状数据…

MySQL表的增删查改以及基本查询样例

文章目录 表的增删查改创建表插入单行全列数据插入多行指定列数据插入失败则更新替换 select全列查询指定列查询查询字段为表达式为查询结果指定别名查询结果去重 where数学小于60的英语在70到100之间的名字为王开头的总分在 200 分以下的语文成绩 > 80 并且不姓王的 结果排…

IDEA设置文件编码

IDEA设置文件编码 File->Settings->Editor->File Encodings 均设置为utf-8 新项目 设置 文件编码 点击New Projects Setup 再点击Settings for New Projects File->Settings->Editor->File Encodings 均设置为utf-8

Spring-TX 事务

目录 一、事务的种类 二、Spring事务管理器 三、事务注解使用 四、事务注解属性 一、事务的种类 1.编程式事务 所谓编程式事务就是用代码手写事务&#xff0c;包含了事务的开始&#xff0c;具体事务&#xff0c;事务的提交和事务的回滚。在这期间就会产生一些冗余问题&am…

Redis 7 第六讲 主从模式(replica)

🌹🌹🌹 此篇开始进入高级篇范围(❤艸`❤) 理论 即主从复制,master以写为主,Slave以读为主。当master数据变化的时候,自动将新的数据异步同步到其它slave数据库。 使用场景 读写分离 容灾备份数据备份水平扩容主从架构 演示案例 注:masterauth、replicaof主…

pytorch如何使用Focal Loss

Focal loss 是 文章 Focal Loss for Dense Object Detection 中提出对简单样本的进行decay的一种损失函数。是对标准的Cross Entropy Loss 的一种改进。 FL对于简单样本&#xff08;p比较大&#xff09;回应较小的loss。 如论文中的图1&#xff0c; 在p0.6时&#xff0c; 标准的…

openGauss学习笔记-57 openGauss 高级特性-并行查询

文章目录 openGauss学习笔记-57 openGauss 高级特性-并行查询57.1 适用场景与限制57.2 资源对SMP性能的影响57.3 其他因素对SMP性能的影响57.4 配置步骤 openGauss学习笔记-57 openGauss 高级特性-并行查询 openGauss的SMP并行技术是一种利用计算机多核CPU架构来实现多线程并行…

使用Vue3和Vite升级你的Vue2+Webpack项目

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

十一、做高并发内存池项目过程中遇到的bug以及调试bug的方法和心得

十一、做高并发内存池项目过程中遇到的bug以及调试bug的方法和心得 第一个bug是内存问题&#xff0c;程序直接崩溃&#xff0c;问题出现在&#xff1a;GetOneSpan函数中的切分span的时候结尾的span1的next没有置空。 第二个bug是还小内存块给span的时候找不到小内存所属的spa…

深入理解 JVM 之——Java 内存区域与溢出异常

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 本篇为深入理解 Java 虚拟机第二章内容&#xff0c;推荐在学习前先掌握基础的 Linux 操作、编译原理、计算机组成原理等计算机基础以及扎实的 C/C 功底。 该系列的 GitHub 仓库&#xff1a;https://github…

LVS 实现四层负载均衡项目实战--DR模式(直接路由Direct Routing)

一、原理 负载均衡器和RS都使用同一个IP对外服务&#xff61;但只有DB对ARP请求进行响应,所有RS对本身这个IP的ARP请求保持静默&#xff61;也就是说,网关会把对这个服务IP的请求全部定向给DB,而DB收到数据包后根据调度算法,找出对应的RS,把目的MAC地址改为RS的MAC&#xff08…

MacOS 为指定应用添加指定权限(浏览器无法使用摄像头、麦克风终极解决方案)

起因&#xff1a;需要浏览器在线做一些测评&#xff0c;但我的 Chrome 没有摄像头/麦克风权限&#xff0c;并且在设置中是没有手动添加按钮的。 我尝试了重装软件&#xff0c;更新系统&#xff08;上面的 13.5 就是这么来的&#xff0c;我本来都半年懒得更新系统了&#xff09…

Tomcat安装及环境配置

一、首先确认自己是否已经安装JDK WinR打开运行&#xff0c;输入cmd回车&#xff0c;在DOS窗口中输入java 出现这些说明已经安装了&#xff0c;然后就是查看自己的版本 然后输入java -version 可以看到版本是1.8的 如果没有配置java环境变量&#xff0c;打开系统设置&#…

Linux安装JenkinsCLI

项目简介安装目录 mkdir -p /opt/jenkinscli && cd /opt/jenkinscli JenkinsCLI下载 wget http://<your-jenkins-server>/jnlpJars/jenkins-cli.jar # <your-jenkins-server> 替换为你的 Jenkins 服务器地址 JenkinsCLI授权 Dashboard-->Configure Glob…