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

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的倍数计算、间隔求取