当前位置：首页 > web >正文

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

web 2025/8/11 19:22:03

问题背景

在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}]
};