echarts实现双y轴(多y轴)刻度间距动态保持一致

Posted 2022-12-29

1.在项目中实现双y轴效果如下

存在的问题就是左右双y轴的辅助线splitLine没有保持一致，显得有点乱，针对次问题，特意拎出来单独总结一下

2.实现过程

在实现echarts双y轴(多y轴)刻度间距保持一致的问题，需要涉及到一些简单的计算过程，主要是最大值、最小的、向上取整、倍数等计算过程

2.1 求一个数的向上最近的且为5(也可以是其他的数)的倍数的整数

let a = 12let b = Math.ceil(a / 5) * 5 // 15
let a = 18let b = Math.ceil(a / 5) * 5 // 20
javascript

2.2 求一个数的向下最近的且为5(也可以是其他数)的倍数的整数

let a = 12let b = Math.floor(a / 5) * 5 // 10
let a = 18let b = Math.floor(a / 5) * 5 // 15
let a = -8let b = Math.floor(a / 5) * 5 // -10
JavaScript

2.3 实现双y轴刻度间距保持一致

有了上面的基础，就可以实现双y轴刻度间距动态保持一致了

const myChart = echarts.init(document.getElementById(main));
// 数据都为整数类型const yData1 = [79, 85, 224, 218, 121, 147, 280]const yData2 = [94, 300, 345, 320, 400, 601, 821]
// 1. 找出最大值 和 最小值let max1 = Math.max.apply(null, yData1)let max2 = Math.max.apply(null, yData2)let min1 = Math.min.apply(null, yData1)let min2 = Math.min.apply(null, yData2)
console.log(max1, max1)console.log(max2, max2)console.log(min1, min1)console.log(min2, min2)
// 2. 最大值: 向上取整, 且为5的倍速let newMax1 = Math.ceil(max1 / 5) * 5 // note: 关键代码let newMax2 = Math.ceil(max2 / 5) * 5 // note: 关键代码
// 3. 最小值: 向下取整, 且为5的倍数let newMin1 = Math.floor( min1 / 5) * 5 // note: 关键代码let newMin2 = Math.floor( min2 / 5) * 5 // note: 关键代码

console.log(newMax1, newMax1)console.log(newMax2, newMax2)console.log(newMin1, newMin1)console.log(newMin2, newMin2)let part = 5 // 分5段let interval1 = (newMax1 - newMin1) / 5  // note: 这个地方是用: 最大值 - 最小值let interval2 = (newMax2 - newMin2) / 5 // note: 这个地方是用: 最大值 - 最小值console.log(interval1, interval1)console.log(interval2, interval2)
const option =   xAxis:     type: category,    data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]  ,  yAxis: [    type: value,    min: newMin1,    max: newMax1,    interval: interval1,    splitLine:       lineStyle:         color: red            ,     type: value,    min: newMin2,    max: newMax2,    interval: interval2,    splitLine:       lineStyle:         color: green            ],  series: [    data: yData1,    type: line  ,     data: yData2,    type: line,    yAxisIndex: 1  ];myChart.setOption(option);
JavaScript

2.4 效果如下

此时无论怎么改变数据，左右两侧的y轴的辅助线都会重合保持一致

2.5 核心代码说明

3.总结

1. 最大值、最小值获取、向上最近取整且为5的倍数计算、间隔求取