快捷導(dǎo)航

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

更新時(shí)間：2024年03月13日 09:38:52 作者：鄒榮樂(lè)

這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時(shí)，刻度沒(méi)有對(duì)齊的兩種解決方法,主要原因是因?yàn)榭潭仍陲@示時(shí)，分割段數(shù)不一樣，導(dǎo)致左右的刻度線不一致，不能重合在一起，下面給大家分享解決方法，需要的朋友可以參考下

1、原因

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

2、思路

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

3、解決方法

3.1、使用alignTicks解決

從 v5.3.0 開(kāi)始支持
在多個(gè) y 軸為數(shù)值軸的時(shí)候，可以開(kāi)啟該配置項(xiàng)自動(dòng)對(duì)齊刻度。只對(duì)’value’和’log’類型的軸有效。

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

效果展示

3.2、結(jié)合min和max屬性去配置interval屬性

1、首先固定兩邊的分隔的段數(shù)。

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

在ECharts中有兩個(gè)很重要的屬性：

interval：強(qiáng)制設(shè)置坐標(biāo)軸分割間隔。
splitNumber：坐標(biāo)軸的分割段數(shù)，需要注意的是這個(gè)分割段數(shù)只是個(gè)預(yù)估值，最后實(shí)際顯示的段數(shù)會(huì)在這個(gè)基礎(chǔ)上根據(jù)分割后坐標(biāo)軸刻度顯示的易讀程度作調(diào)整。

2、結(jié)合min和max屬性去配置interval。

這是測(cè)試數(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]

計(jì)算最大值和最小值

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

計(jì)算分隔間隔

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

效果展示

到此這篇關(guān)于vue中使用echarts繪制雙Y軸圖表時(shí)，刻度沒(méi)有對(duì)齊的兩種解決方法的文章就介紹到這了,更多相關(guān)vue echarts繪制雙Y軸圖表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: