ECharts Y轴5等分终极解决方案 - 动态适配缩放场景

问题背景

在ECharts可视化项目中，实现Y轴5等分是一个常见需求。网上大多数案例都是初始计算出最大值maxValue，然后设置interval = maxValue/5。

但这种方法存在一个问题：在有滚动条的场景下，可视区域数据的最大值并不是初始所有数据的最大值。

解决方案

ECharts的yAxis.max属性支持多种格式：

number
string
Function

我们需要使用函数形式：

复制代码

max: function(val) {
  // val包含可视区域的最小值和最大值
  return getMaxValue(val.max);
}

核心算法实现

复制代码

function getMaxValue(val) {
  const len = String(val).length;
  const logVal = Math.pow(10, len);
  let maxValue = logVal;

  if (Number(val) === Math.pow(10, len - 1)) {
    maxValue = logVal;
  } else {
    for (let i = 3; i >= 1; i--) {
      if (val <= logVal * i / 4) {
        maxValue = logVal * i / 4;
      }
    }
  }
  return maxValue;
}

算法说明

根据value长度取得可能的最大值：以10为底，字符长度次方。例如225 → 1000
判断是否为1、10、100、1000等情况，这些情况最大值就是自身
其他情况，判断最大值的3/4、2/4、1/4，取与value最接近又能在ECharts中5等分的最大值

计算示例：225

225 ≠ 1000 → 1000
225 ≤ 750 → 750
225 ≤ 500 → 500
225 ≤ 250 → 250

完整示例代码

复制代码

// 生成测试数据
let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let data = [[base, Math.random() * 300]];
for (let i = 1; i < 20000; i++) {
  let now = new Date((base += oneDay));
  data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
}

// 获取5等分最大值函数
function getMaxValue(val) {
  const len = String(val).length;
  const logVal = Math.pow(10, len);
  let maxValue = logVal;

  if (String(val) === Math.pow(10, len - 1)) {
    maxValue = logVal;
  } else {
    for (let i = 3; i >= 1; i--) {
      if (val <= logVal * i / 4) {
        maxValue = logVal * i / 4;
      }
    }
  }

  return maxValue;
}

// ECharts配置项
const option = {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    left: 'center',
    text: 'Large Area Chart'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'time',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    min: 0,
    max: function(value) {
      return getMaxValue(value.max);
    }
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 20
    },
    {
      start: 0,
      end: 20
    }
  ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      symbol: 'none',
      areaStyle: {},
      data: data
    }
  ]
};

实现效果

动态计算Y轴最大值，确保在任何缩放状态下都能保持5等分
支持大数据量场景下的平滑缩放
自动适应不同数值范围

ECharts Y轴5等分终极解决方案 - 动态适配缩放场景 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿技术分享