vue中使用echarts绘制双Y轴图表时刻度没有对齐的两种解决方法(最新方案)

yAxis: [
    {
        type: 'value',
        name: '水量',
        alignTicks: true,
        axisLabel: {
            formatter: '{value} ml'
        }
    },
    {
        type: 'value',
        name: '温度',
        alignTicks: true,
        axisLabel: {
            formatter: '{value} °C'
        }
    }
],

let lData = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
let rData = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 92.0, 6.2]

let lMax = Number(Math.max(...lData))
let lMin = Number(Math.min(...lData))
let rMax = Number(Math.max(...rData))
let rMin = Number(Math.min(...rData))

lMax = Math.ceil(lMax / 100) * 100
lMin = Math.floor(lMin / 100) * 100
rMax = Math.ceil(rMax / 10) * 10
rMin = Math.floor(rMin / 10) * 10

let splitNumber = 10
let lInterval = lMax / splitNumber
let rInterval = rMax / splitNumber

yAxis: [
    {
        type: 'value',
        name: '水量',
        splitNumber:splitNumber,
        min: lMin,
        max: lMax,
        interval: lInterval,
        axisLabel: {
            formatter: '{value} ml'
        }
    },
    {
        type: 'value',
        name: '温度',
        splitNumber:splitNumber,
        min: rMin,
        max: rMax,
        interval: rInterval,
        axisLabel: {
            formatter: '{value} °C'
        }
    }
],