问题

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

解决方案

  1. 最简单的做法,v5.3.0开始支持自动对齐,设置属性 alignTicks 的值为 true,即可实现自动对齐。

该属性用途:

在多个 y 轴为数值轴的时候,可以开启该配置项自动对齐刻度。只对valuelog类型的轴有效。
















  1. 后面的不用看了,除非想自己定义坐标轴左右的刻度 !!!

有几个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;
}

仍有问题

我没做数据规整,所以展示不好看,不懂来问我

结果

在这里插入图片描述

完整的代码

https://download.csdn.net/download/wzp20092009/86270082

完整好看的效果

在这里插入图片描述

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐