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

文章目录

• • • 1、原因
    • 2、思路
    • 3、解决方法
    • • 3.1、使用alignTicks解决
      • 3.2、结合min和max属性去配置interval属性
      • • 1、首先固定两边的分隔的段数。
        • 2、结合min和max属性去配置interval。

1、原因

刻度在显示时，分割段数不一样，导致左右的刻度线不一致，不能重合在一起。

2、思路

根据上面的原因去分析，要想左右的刻度线一致，分隔的段数是必须是一样的，这样才能重合。

3、解决方法

3.1、使用alignTicks解决

• 从 v5.3.0 开始支持

• 在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对’value’和’log’类型的轴有效。

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

• 效果展示
  

3.2、结合min和max属性去配置interval属性

1、首先固定两边的分隔的段数。

• 分别求出左边Y轴和右边Y轴的最大值max和最小值min，根据max和min之间的和去除以分隔的段数，分别算出左边Y轴和右边Y轴的分隔间隔。

在ECharts中有两个很重要的属性：

• interval：强制设置坐标轴分割间隔。

• splitNumber：坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

2、结合min和max属性去配置interval。

• 这是测试数据

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))

• 最大值向上取整，最小值向下取整，让显示的数据为10的倍数或100的倍数整数显示。

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

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'
        }
    }
],

• 效果展示