echarts中双y轴刻度线对齐的问题

ゝ一世哀愁。 2023-01-03 04:27 266阅读 0赞

*  splitNumber设置分割的段数，必须一致
 *  设置的max一定是大于或等于数据最大值，计算找出数据中最大值向上取整
 *  interval强制设置坐标轴分割间隔，控制两边刻度比例一样才能保持刻度线对齐

// consumption 和 throughputList 是API返回的数据
    yAxis: [{ 
            // name: '左轴',
            type: 'value',
            min: 0,
            splitNumber: 5,
            interval: Math.ceil(Math.ceil(Math.max(...consumption)) / 5),
            max:Math.ceil(Math.ceil(Math.max(...consumption)) / 5) * 5,
            splitLine: { 
              lineStyle: { 
                color: '#ccc'
              }
            }
          },
          { 
            // name: '右轴',
            type: 'value',
            min: 0,
            splitNumber: 5,
            interval: Math.ceil(Math.ceil(Math.max(...throughputList)) / 5),
            max: Math.ceil(Math.ceil(Math.max(...throughputList)) / 5) * 5,
            splitLine: { 
              lineStyle: { 
                color: '#ccc'
              }
            },
            axisLabel: { 
              textStyle: { 
                color: '#000'
              }
            }
          }
        ],

如图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: /images/20221119/af43ed574fd344b7a6c471e3375ae663.png

发表评论取消回复

表情：

评论列表（有 0 条评论，266人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts自定义y轴刻度信息

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

朱雀/ 2023年07月17日 06:05/ 0 赞/ 256 阅读

相关 Echarts设置y轴的刻度只显示整数

![20210422114619391.png][] ![20210422114632558.png][] > minInterval: 1,//y轴的刻度只

Dear 丶/ 2023年01月15日 10:24/ 0 赞/ 352 阅读

相关 echarts中双y轴刻度线对齐的问题

splitNumber设置分割的段数，必须一致设置的max一定是大于或等于数据最大值，计算找出数据中最大值向上取整 interval强制设置坐标轴分割间隔，

ゝ一世哀愁。/ 2023年01月03日 04:27/ 0 赞/ 267 阅读

相关 echarts 隐藏y轴x轴刻度

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

以你之姓@/ 2022年12月09日 01:54/ 0 赞/ 432 阅读

相关 echarts折线图展示两个Y轴，同时使两个y轴刻度线重合

统一前效果：插件根据传入的数据自动归置两个Y轴的刻度最大值max和分段interval的属性值。所以我们统一双Y轴刻度分段统一的入手点也就是这两个属性值。 ![在这里插入

àì夳堔傛蜴生んèń/ 2022年11月29日 12:51/ 0 赞/ 763 阅读

相关双Y轴echarts

[https://www.makeapie.com/editor.html?c=xE1oQek3jr][https_www.makeapie.com_editor.html_c

待我称王封你为后i/ 2022年11月10日 14:17/ 0 赞/ 337 阅读

相关如何处理echats双y轴刻度不一致（不对齐）问题

> 双y轴刻度不一致处理之前，如下图所示 > ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

我不是女神ヾ/ 2022年10月17日 00:35/ 0 赞/ 545 阅读

相关 echarts双y轴对齐

import as echarts from 'echarts'; var chartDom = document.getElementById('

「爱情、让人受尽委屈。」/ 2022年09月03日 00:10/ 0 赞/ 374 阅读

相关 Echarts（五）双y轴0刻度线不对齐解决思路demo

option = { xAxis: { type: 'category', data: ['Mon',

蔚落/ 2022年05月17日 09:53/ 0 赞/ 715 阅读

相关 Echarts实现双y轴

转载自：[https://blog.csdn.net/njueyupeng/article/details/77839897?fps=1&locationNum=1][htt

浅浅的花香味﹌/ 2022年05月13日 05:46/ 0 赞/ 994 阅读