效果如下图

项目中遇到这个需求,需要支持负数情况下两侧0刻度对齐,且空白地方不能过多,且刻度值不要使用计算出来的随机数,使用整数

如果只是0刻度对齐正常设置:alignTicks:true 即可,版本需要5.3.0 才可,不过我的是5.4.3版本,却不生效,没找到原因,于是自己手写了适配,设置了min和max

这是我Y轴的配置

下面是获取左侧和右侧最大值,和最小值方法

const axisOpts = {};
if (hasNegative) {
// 左侧数据
const max0 = Math.max(...amountList);
const min0 = Math.min(...amountList);
// 右侧数据
const max1 = Math.max(...rateList);
const min1 = Math.min(...rateList); // 计算比例
const range0 = max0 - min0;
const range1 = max1 - min1;
let ratio = 1;
if (range1 !== 0) {
ratio = range0 / range1;
} // 计算左侧轴的临时范围,强制包含0
const Lmin = Math.min(min0, ratio * min1, 0);
const Lmax = Math.max(max0, ratio * max1, 0);
// 整齐化左侧轴的范围
const Lmin_nice = this.roundToNiceNumber(Lmin, false);
        const Lmax_nice = this.roundToNiceNumber(Lmax, true);

        // 计算右侧轴的范围
const Rmin_nice = Lmin_nice / ratio;
const Rmax_nice = Lmax_nice / ratio; // 设置坐标轴选项
axisOpts.min = [Lmin_nice, Rmin_nice];
axisOpts.max = [Lmax_nice, Rmax_nice];
}
roundToNiceNumber(value, isMax) {
if (value === 0) return 0; const absValue = Math.abs(value);
const sign = value > 0 ? 1 : -1; // 计算数量级
const exponent = Math.floor(Math.log10(absValue));
const fraction = absValue / Math.pow(10, exponent); // 整齐的分数:1, 2, 5, 10 改为了 1,2,4,5,6,8
const breakpoints = [1, 2, 3, 4, 5, 6, 8, 9, 10];
const niceFraction = breakpoints.find(v => v >= fraction) || 10; let niceValue = niceFraction * Math.pow(10, exponent) * sign; // 根据是最大值还是最小值调整
if (isMax) {
if (value > 0) {
// 对于最大值,向上取整到niceValue的整数倍
niceValue = Math.ceil(value / niceValue) * niceValue;
} else {
// 对于负数的最大值,向下取整(因为负数越大,绝对值越小)
niceValue = Math.floor(value / niceValue) * niceValue;
}
} else {
if (value > 0) {
// 对于正数的最小值,向下取整
niceValue = Math.floor(value / niceValue) * niceValue;
} else {
// 对于负数的最小值,向上取整
niceValue = Math.ceil(value / niceValue) * niceValue;
}
} return niceValue;
},

  上面是配置的计算min,max设置值的方法

Echarts双Y轴,有负数情况下,0对齐实现的更多相关文章

  1. echarts:双y轴图表刻度均匀分布问题

    今天分享一个小问题,内容不多. 双y轴图表中,为了图表的美观,经常会隐藏一侧的y轴刻度线,仅显示一侧的刻度线.那么问题就来了,两个y轴的数据数值大小不同,常常会导致刻度线的刻度分布不均匀,该如何解决呢 ...

  2. echarts 双Y轴图表

    直接代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. echarts双y轴折线图柱状图混合实时更新图

    先看下效果,自己用ps做了张gif图,发现很好玩啊..不喜勿喷 自己下载个echarts.min.js 直接上代码: <!DOCTYPE html><html><head ...

  4. echarts使用笔记四:双Y轴

    1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...

  5. echarts统计图Y轴(或X轴)文字过长问题解决

    echarts 统计图Y轴文字过长 在使用echarts时,出现数值非常大,Y轴又显示不下的情况就需要压缩Y轴数值刻度. 解决方法: yAxis: { type: 'value', axisLabel ...

  6. 绘制复数图形和双y轴图形

    clearclct=0:0.1:2*pi;x=sin(t);y=cos(t);z=x+i*y;subplot(1,3,1)plot(t,z,'r') %注:这种方式下,不论参数t,z哪个是复数,都将忽 ...

  7. matlab画二维直方图以及双y轴坐标如何修改另一边y轴的颜色

    1.首先讲一下如何用hist画二维直方图 x=[- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...

  8. Python教程:matplotlib 绘制双Y轴曲线图

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:数据皮皮侠 双X轴的可以理解为共享y轴 ax1=ax.twiny() ...

  9. Python实现双X轴双Y轴绘图

    诈尸人口回归.这一年忙着灌水忙到头都掉了,最近在女朋友的提醒下终于想起来博客的账号密码,正好今天灌水的时候需要画一个双X轴双Y轴的图,研究了两小时终于用Py实现了.找资料的过程中没有发现有系统的文章, ...

  10. highchart 设置双Y轴坐标 双x轴坐标方法

    我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...

随机推荐

  1. rtl8723bs/ds 蓝牙和wifi共存造成蓝牙的卡顿解决方案.

    首先.先确认 POWER_SAVING 这个宏是否打开,如果打开了请关掉,因为这个功能是路由器把对应的设备的流量包存储在路由器上,然后到一定的包的数量的时候,分发给嵌入式设备.如果这样可能造成天线通过 ...

  2. lingo 练习 二

    简介 练习测试 KeyPoints: 条件过滤的应用,循环乘法的应用 EX1.求sets中前几个数的和 model: data: N=6; enddata sets: number/1..N/:x; ...

  3. 【备】C#四舍五入常识备份

       /// <summary>        /// 真正的四舍五入        /// </summary>        /// <param name=&quo ...

  4. ETL数据集成丨为什么没有做好ETL的BI工具最终都会失败?

    随着数字化转型,企业越来越重视数据的价值和利用.商业智能(Business Intelligence,BI)作为一种数据分析和决策支持的重要工具,被广泛应用于各行各业.然而,对于BI项目的成功实施,E ...

  5. SciTech-BigDataAIML-Algorithm: Github的Hello 算法项目

    先记录一下,好不好再读: https://github.com/krahets/hello-algo 关于本书 本项目旨在打造一本开源免费.新手友好的数据结构与算法入门教程. 全书采用动画图解,内容清 ...

  6. Python 潮流周刊#111:Django迎来 20 周年、OpenAI 前员工分享工作体验(摘要)

    本周刊由 Python猫 出品,精心筛选国内外的 400+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  7. haproxy搭建负载均衡

    一.haproxy部署LB集群 1.haproxy介绍 支持四层和七层的负载均衡 支持acl功能,访问控制 支持图形化监控 多种调度算法 2.算法介绍 3.主配置文件 4.haproxy部署LB实验 ...

  8. unity纯净版下载地址

    真的服了,unity居然做成这个鸟样,夹带广告,一天一激活... 民间整理的纯净版下载地址 https://unityitellyou.github.io/#/

  9. liunx下自动备份文件夹

    由于系统会实时产生文件(如图片),为了保证数据不会因为系统崩溃或者黑客入侵等原因导致数据丢失,如果使用OSS等文件服务可以不用考虑备份的问题,如果是自己弄的文件服务还是对文件进行定时备份也是有必要的. ...

  10. 在优麒麟上使用Electron开发桌面应用

    摘自:https://www.cnblogs.com/uu58250/p/12796443.html Electron是由Github开发,用HTML.CSS和JavaScript来构建跨平台桌面应用 ...