vue中使用echarts繪制雙Y軸圖表時刻度沒有對齊的兩種解決方法(最新方案)

更新時間：2024年03月13日 09:38:52 作者：鄒榮樂

這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時，刻度沒有對齊的兩種解決方法,主要原因是因為刻度在顯示時，分割段數(shù)不一樣，導致左右的刻度線不一致，不能重合在一起，下面給大家分享解決方法，需要的朋友可以參考下

1、原因

刻度在顯示時，分割段數(shù)不一樣，導致左右的刻度線不一致，不能重合在一起。

2、思路

根據(jù)上面的原因去分析，要想左右的刻度線一致，分隔的段數(shù)是必須是一樣的，這樣才能重合。

3、解決方法

3.1、使用alignTicks解決

從 v5.3.0 開始支持
在多個 y 軸為數(shù)值軸的時候，可以開啟該配置項自動對齊刻度。只對’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、首先固定兩邊的分隔的段數(shù)。

分別求出左邊Y軸和右邊Y軸的最大值max和最小值min，根據(jù)max和min之間的和去除以分隔的段數(shù)，分別算出左邊Y軸和右邊Y軸的分隔間隔。

在ECharts中有兩個很重要的屬性：

interval：強制設置坐標軸分割間隔。
splitNumber：坐標軸的分割段數(shù)，需要注意的是這個分割段數(shù)只是個預估值，最后實際顯示的段數(shù)會在這個基礎上根據(jù)分割后坐標軸刻度顯示的易讀程度作調整。

2、結合min和max屬性去配置interval。

這是測試數(shù)據(jù)

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

最大值向上取整，最小值向下取整，讓顯示的數(shù)據(jù)為10的倍數(shù)或100的倍數(shù)整數(shù)顯示。

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

效果展示