设置echarts双y轴线对齐以及0刻度线对齐

梓喻

已于 2022-08-06 13:57:59 修改

阅读量2.1k

点赞数

分类专栏： echarts 文章标签： echarts双y轴对齐 echarts0刻度线对齐 echarts刻度线 echarts的max echarts调整

于 2022-07-31 17:51:41 首次发布

本文链接：https://blog.csdn.net/wzp20092009/article/details/126088338

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客介绍了如何解决Echarts图表中0刻度线未对齐和左右Y轴刻度线不对齐的问题。通过获取所有Y轴的最大值和最小值，然后调整interval以确保刻度线均匀分布和0刻度线对齐。提供了详细的代码示例，包括处理不同情况的逻辑，例如顶部、底部和两者皆有的刻度线。完整代码链接可在文中找到，帮助开发者实现美观的图表展示。

摘要由CSDN通过智能技术生成

问题

echarts开发常有0刻度线没有对齐，左右y轴刻度线没有对齐
在这里插入图片描述

解决方案

有几个y轴坐标就找出最大值和最小值，保证interval均分以及0刻度线对齐即可

/**
 * @description 格式化输出最大值最小值
 * @param { array } arr series的data数据，有几个y轴传几个
 * @result 返回的是包含最大最小和interval数组，直接放到各y轴yAxis中
 */
function formateMaxMin(arr) {
  const list = [];
  if (arr && arr.length > 0) {
    let itemType = '';
    arr.forEach((itemArr, index) => {
      let max = 0;
      let min = 0;
      if (itemArr && itemArr.length > 0) {
        itemArr.forEach(each => {
          max = each > max ? each : max;
          min = each < min ? each : min;
        });
      }
      const type = min < 0 ? (max === 0 ? 'bottom' : 'all') : (max === 0 ? '' : 'top');
      itemType = itemType ? (type ? (type !== itemType ? 'all' : itemType) : itemType) : type;
      list.push(type ? {
        max, min, type
      } : {});
    });

    if (itemType === 'top') {
      list.forEach(item => {
        if (item.type) {
          item.interval = item.max / 8;
          delete item.type;
        } else {
          item.max = 100;
          item.interval = 100 / 8;
          item.min = 0;
        }
      });
    } else if (itemType === 'bottom') {
      list.forEach(item => {
        if (item.type) {
          item.interval = Math.abs(item.min) / 8;
          delete item.type;
        } else {
          item.max = 0;
          item.interval = 100 / 8;
          item.min = -100;
        }
      });
    } else if (itemType === 'all') {
      list.forEach(item => {
        const { type, max, min } = item;
        const absMin = Math.abs(min);
        if (type === 'top') {
          item.interval = max / 4;
          item.min = -max;
        } else if (type === 'bottom') {
          item.interval = absMin / 4;
          item.max = absMin;
        } else if (type === 'all') {
          if (max > absMin) {
            item.interval = max / 4;
            item.min = -max;
          } else {
            item.interval = absMin / 4;
            item.max = -min;
          }
        } else {
          item.max = 100;
          item.interval = 100 / 4;
          item.min = -100;
        }
        delete item.type;
      });
    }
    console.log(itemType, list, list);
  }

  return list;
}