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;
});
}
list.push(
type
? {
max,
min,
type,
}
: {}
);
});
list.forEach((item) => {
if (item.max > 0) {
const maxDigit = Math.floor(Math.log(Math.abs(item.max)) / Math.log(10)) - 1 // 根据求最大值以10为底的对数计算最大值得位数(不用管是不是小数,都是可以实现的)
// Math没有以10为底的对数求法,这里用了对数的换底公式
// 减1是因为省略了一步,如果直接用位数继续下面的计算,求出来的最大值可能会比数据真实的最大值大太多,图形一般会集中分布在grid的下方
// 减去一位再进行计算,计算所得的最大值一般会比数据的最大值低一位,这样图形整体就比较丰满,一般距离图表顶部一格左右
const maxMultiple = Math.pow(10, maxDigit)
// 用pow方法记录我们需要最终精确地位数
tem.max = Math.ceil((Math.abs(item.max) * 1.2) / maxMultiple) * maxMultiple
// 先将数据最大值放大1.2倍(根据自己的需要),在利用之前的记录的精度对齐向上取整,这样就能获取到你想要的数据(10, 100, 5000, 0.3, 0.005, ...)
} else {
item.max = 0
// 这里如果最大值<= 0,我直接取0, 根据需求自己确定
}
if (item.min >= 0) {
item.min = 0
} else {
const minDigit = Math.floor(Math.log(-item.min) / Math.log(10)) - 1
const minMultiple = Math.pow(10, minDigit)
tem.min = -Math.ceil((Math.abs(item.min) * 1.2) / minMultiple) * minMultiple
// 这里只给最小值为负时设置的算法,因为为正时直接赋值为0,图形会更好
}
// 设置Interval,我这里所有的splitNumber都默认为5,也可以选择自己传入,一幅丰满且适用于多种多样是坐标系图就完成了
item.interval = (item.max - item.min) / 5
});
return list;
}
echarts绘图双y轴坐标如何对齐,且图形不触顶还很饱满
于 2024-03-14 14:49:42 首次发布