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

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.rhkb.cn/news/115778.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

哈希表HashMap(基于vector和list)

C数据结构与算法实现&#xff08;目录&#xff09; 1 什么是HashMap&#xff1f; 我们这里要实现的HashMap接口不会超过标准库的版本&#xff08;是一个子集&#xff09;。 HashMap是一种键值对容器&#xff08;关联容器&#xff09;&#xff0c;又叫字典。 和其他容易一样…

Vue笔记

第一章&#xff1a;Vue环境搭建 1.搭建Vue环境 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><!-- 1.引入Vue.js--><script src"1.vue.js"></scr…

阿晨的运维笔记 | CentOS部署Docker

使用yum安装 # step 1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 # Step 2: 添加软件源信息 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo # Step 3: 更新并安装 …

LeetCode——无重复的最长子串(中等)

题目 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2: 输入: s "bbbbb" 输出: 1 解释: 因为…

利用随机数生成猜数字游戏【C语言】

猜数字游戏实现 游戏要求生成随机数rand 函数srand 函数time 函数 确定生成随机数的范围猜数字游戏实现 游戏要求 自动生成随机数的范围&#xff1a;0-99玩家猜数字&#xff0c;猜数字的过程中&#xff0c;根据猜测数据的大小给出大了或小了的反馈&#xff0c;直到猜对&#x…

面经:微服务

文章目录 参考资料一. 微服务概述1. CAP理论2. BASE理论3. SpringBoot 与 SpringCloud对比 二. 服务注册&#xff1a;Zookeeper,Eureka,Nacos,Consul1. Nacos两种健康检查方式&#xff1f;2. nacos中负责负载均衡底层是如何实现的3. Nacos原理4. 临时实例和持久化(非临时)实例 …

数据结构1

数据结构是计算机科学中存储和组织数据的一种方式&#xff0c;它定义了数据的表示方式和对数据进行操作的方法&#xff0c;常见的数据结构包括数组、栈、链表、队列、树、图等。 目录 一、常见的数据结构 1.数组 2.栈 3.队列 4.链表 5.树 6.图 一、常见的数据结构 1.数…

uniapp 项目实践总结(二)从零开始搭建一个项目

导语:本篇文章主要是项目方面的技术开发总结,新建一个项目可以选择使用可视化界面,也可以使用命令行搭建。 目录 可视化界面命令行搭建安卓开发环境苹果开发环境可视化界面 安装软件 使用官方推荐的 HbuilderX 软件,开发方式比较简单,内置相关环境以及终端,无需配置 no…

windows自带远程桌面连接的正确使用姿势

摘要 目前远程办公场景日趋广泛&#xff0c;对远程控制的需求也更加多样化&#xff0c;windows系统自带了远程桌面控制&#xff0c;在局域网内可以实现流程的远程桌面访问及控制。互联网使用远程桌面则通常需要使用arp等内网穿透软件&#xff0c;市场上teamviewer、Todesk、向…

进程管理死死的学

进程管理 文件属性 chattr【扩展】 chattr chattr i 文件名 # 添加权限 a 可追加&#xff0c;不可修改 i 只可查看 A 不修改访问时间 charrt -i 文件名 # 取消权限 -R 递归处理&#xff0c;将指令目录下的所有文件及子目录一并处理&#xff1b;lsattr 查看文件属性 lsattr …

《论文阅读21》Equivariant Multi-View Networks

一、论文 研究领域&#xff1a;计算机视觉 | 多视角数据处理中实现等变性论文&#xff1a;Equivariant Multi-View Networks ICCV 2019 论文链接视频链接 二、论文简述 在计算机视觉中&#xff0c;模型在不同视角下对数据&#xff08;例如&#xff0c;点云、图像等&#xff0…

Linux 操作系统实战视频课 - GPIO 基础介绍

文章目录 一、GPIO 概念说明二、视频讲解沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们将讲解 GPIO 。 一、GPIO 概念说明 ARM 平台中的 GPIO(通用输入/输出)是用于与外部设备进行数字输入和输出通信的重要硬件接口。ARM 平台的 GPIO 特性可以根据具体的芯…

Spring-TX 事务

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

Vulnhub系列靶机---JIS-CTF-VulnUpload-CTF01靶机

文章目录 1、网卡配置2、信息收集主机发现端口扫描目录扫描 3、漏洞探测4、漏洞利用一句话木马蚁剑 GetShellSSH连接提权 JIS文档说明 JIS-CTF-VulnUpload-CTF01靶机下载地址 该靶机有5个flag 1、网卡配置 开启靶机&#xff0c;看见加载的进度条按shift&#xff0c;看到如下界…

Astro 3.0 闪亮登场,让你轻松构建更快速、更流畅的前端应用

网站前端开发的领域不断演进&#xff0c;随着Astro 3.0的发布&#xff0c;它正在迈出巨大的一步。Astro 3.0引入了突破性的功能和增强功能&#xff0c;承诺改变我们构建和体验网络应用程序的方式。在本文中&#xff0c;我们将探讨Astro 3.0的主要亮点以及如何赋予开发人员创建更…

直播平台源码弹性云托管技术:稳定直播与降低成本的利器

在当今的互联网时代&#xff0c;直播平台源码层出不穷&#xff0c;直播平台源码不仅可以让人们获取最新的资讯、查找资料等信息获取&#xff0c;还能让人们在其中观看短视频、直播、与其他人聊天等互动放松&#xff0c;直播平台源码的受欢迎与平台人数的增加使得人们在选择直播…

【juc】读写锁ReentrantReadWriteLock

目录 一、说明二、读读不互斥2.1 代码示例2.2 截图示例 三、读写互斥3.1 代码示例3.2 截图示例 四、写写互斥4.1 代码示例4.2 截图示例 五、注意事项5.2.1 代码示例5.2.2 截图示例 一、说明 1.当读操作远远高于写操作时&#xff0c;使用读写锁让读读可以并发&#xff0c;来提高…

关于linux openssl的自签证书认证与nginx配置

自签文档链接 重点注意这块&#xff0c;不能写一样的&#xff0c;要是一样的话登录界面锁会报不安全 域名这块跟最后发布的一致 nginx配置的话 server {listen 443 ssl; //ssl 说明为https 默认端口为443server_name www.skyys.com; //跟openssl设置的域名保持一致s…

ffmpeg把RTSP流分段录制成MP4,如果能把ffmpeg.exe改成ffmpeg.dll用,那音视频开发的难度直接就降一个维度啊

比如&#xff0c;原来我们要用ffmpeg录一段RTSP视频流转成MP4&#xff0c;我们有两种方案&#xff1a; 方案一&#xff1a;可以使用以下命令将rtsp流分段存储为mp4文件 ffmpeg -i rtsp://example.com/stream -vcodec copy -acodec aac -f segment -segment_time 3600 -reset_t…

CSS中如何隐藏元素但保留其占位空间(display:none vs visibility:hidden)?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ display: none;⭐ visibility: hidden;⭐ 如何选择⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为…