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

UChart图标 y轴取整

news 2025/6/7 9:49:47

Uchart y轴取整

思路

1. 核心逻辑：向上取整到最近的 5 的倍数

2. 为什么这样设计？

3. 示例验证

4. 注意事项

5. 总结

Uchart y轴取整

由于max最大值的约束自动计算的会出现小数

针对需要y轴显示整数的情况，如显示次数，文章提出了一种策略。首先确定y轴的最大值为数据中的最大值，然后将这个最大值调整为最接近的5的倍数，确保y轴刻度为整数且能完整包含所有数据

一些数据需要y轴为整数，比如y轴数据为次数

思路

y轴设置分为n段，调整y轴最大值为与数据最大相近的n的倍数

let seriesData = newData.series || [];const ArrayData = seriesData.reduce((acc, curr) => acc.concat(curr?.data || []),[]);    const yMaxData = Math.max(...ArrayData) || 0; //数据中的最大值// 3 % 5 = 3 → 5 - 3 = 2 → 3 + 2 = 5// const max = yMaxData + 5 - (yMaxData % 5); // 多留 5 单位空间// Math.ceil(10 / 5) * 5 = 10  ceil 大于等于 x 的最小整数。const max = Math.ceil(yMaxData / 5) * 5; // 无额外空间that.setData({["opts.yAxis.data[0].max"]: max,});

这个表达式 chartOpt.yAxis.data[0].max = yMaxData + 5 - yMaxData % 5 的目的是为了将 Y 轴的最大值（max）设置为一个 大于数据最大值（yMaxData）且是 5 的倍数 的“整齐”数值。以下是详细解释：

1. 核心逻辑：向上取整到最近的 5 的倍数

yMaxData % 5：计算 yMaxData 除以 5 的余数（结果范围是 0 到 4）。
5 - (yMaxData % 5)：计算距离下一个 5 的倍数还差多少（如果余数是 0，结果为 5；余数是 1，结果为 4；以此类推）。
yMaxData + (5 - yMaxData % 5)：将当前数据最大值 yMaxData 向上“补齐”到下一个 5 的倍数。

2. 为什么这样设计？

确保 Y 轴最大值略大于数据最大值：
图表需要留出一定的视觉缓冲空间，避免数据点（如柱状图顶部）紧贴坐标轴边界。表达式确保 max > yMaxData。
生成“整齐”的刻度值：
5 的倍数（如 0, 5, 10, 15...）作为坐标轴刻度更易读，比任意数值（如 12, 17, 23）更直观。
动态适应数据变化：
无论 yMaxData 是多少，表达式都能自动计算下一个合适的 5 的倍数。

3. 示例验证

`yMaxData`	计算步骤	结果 (`max`)
`12`	`12 % 5 = 2` → `5 - 2 = 3` → `12 + 3 = 15`	`15`
`17`	`17 % 5 = 2` → `5 - 2 = 3` → `17 + 3 = 20`	`20`
`10`	`10 % 5 = 0` → `5 - 0 = 5` → `10 + 5 = 15`	`15`
`3`	`3 % 5 = 3` → `5 - 3 = 2` → `3 + 2 = 5`	`5`

4. 注意事项

当 yMaxData 已是 5 的倍数时（如 10），结果会是 yMaxData + 5（即 15）。这刻意多留了 5 单位的空间，避免数据紧贴边界。
替代写法：
可用更简洁的 Math.ceil(yMaxData / 5) * 5 实现相同效果，但需注意两者在边界行为的差异：
```
// 当 yMaxData=10 时：
Math.ceil(10 / 5) * 5 = 10; // 无额外空间
yMaxData + 5 - (10 % 5) = 15; // 多留 5 单位空间
```
原表达式优先保证留出空间，而 Math.ceil 可能让数据贴边（需额外处理）。