快捷導(dǎo)航

echarts實(shí)現(xiàn)橫向和縱向滾動(dòng)條(使用dataZoom)

更新時(shí)間：2023年08月14日 10:25:09 作者：牧碼島

這篇文章主要給大家介紹了關(guān)于echarts使用dataZoom實(shí)現(xiàn)橫向和縱向滾動(dòng)條的相關(guān)資料,最近項(xiàng)目中使用到echarts圖表,當(dāng)數(shù)據(jù)過(guò)多時(shí)需要添加橫向滾動(dòng)條,需要的朋友可以參考下

前言

使用echarts會(huì)遇到這種情況，以柱狀圖為例子，當(dāng)數(shù)據(jù)過(guò)多時(shí)，echarts圖就會(huì)堆疊在一起，看起來(lái)十分難看。通常解決辦法是通過(guò)減小barWidth值來(lái)縮小柱子寬度，但是若數(shù)據(jù)達(dá)到上百條，這場(chǎng)面是相當(dāng)壯觀。另一個(gè)很常用的就是在外部容器div添加overflow: scroll;，這確實(shí)能解決一些問(wèn)題，但是若是數(shù)據(jù)量過(guò)少，就會(huì)顯的非常稀疏，經(jīng)歷過(guò)的都懂。言歸正傳，以上都不是最佳解決方式，echarts其實(shí)已經(jīng)為提供好相應(yīng)的API配置了，無(wú)論是橫向滾動(dòng)還是縱向滾動(dòng)，dataZoom都能滿足。

1、橫向滾動(dòng)條

dataZoom: [
    {
        // 設(shè)置滾動(dòng)條的隱藏與顯示
        show: true,
        // 設(shè)置滾動(dòng)條類型
        type: "slider",
        // 設(shè)置背景顏色
        backgroundColor: "rgb(19, 63, 100)",
        // 設(shè)置選中范圍的填充顏色
        fillerColor: "rgb(16, 171, 198)",
        // 設(shè)置邊框顏色
        borderColor: "rgb(19, 63, 100)",
        // 是否顯示detail，即拖拽時(shí)候顯示詳細(xì)數(shù)值信息
        showDetail: false,
        // 數(shù)據(jù)窗口范圍的起始數(shù)值
        startValue: 0,
        // 數(shù)據(jù)窗口范圍的結(jié)束數(shù)值（一頁(yè)顯示多少條數(shù)據(jù)）
        endValue: 5,
        // empty：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被設(shè)置為空。
        // 即不會(huì)影響其他軸的數(shù)據(jù)范圍
        filterMode: "empty",
        // 設(shè)置滾動(dòng)條寬度，相對(duì)于盒子寬度
        width: "50%",
        // 設(shè)置滾動(dòng)條高度
        height: 8,
        // 設(shè)置滾動(dòng)條顯示位置
        left: "center",
        // 是否鎖定選擇區(qū)域（或叫做數(shù)據(jù)窗口）的大小
        zoomLoxk: true,
        // 控制手柄的尺寸
        handleSize: 0,
        // dataZoom-slider組件離容器下側(cè)的距離
        bottom: 3,
    },
    {
        // 沒(méi)有下面這塊的話，只能拖動(dòng)滾動(dòng)條，
        // 鼠標(biāo)滾輪在區(qū)域內(nèi)不能控制外部滾動(dòng)條
        type: "inside",
        // 滾輪是否觸發(fā)縮放
        zoomOnMouseWheel: false,
        // 鼠標(biāo)滾輪觸發(fā)滾動(dòng)
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
    },
]

2、縱向滾動(dòng)條

dataZoom: [
    {
        // 設(shè)置滾動(dòng)條的隱藏或顯示
        show: true,
        // 設(shè)置類型
        type: "slider",
        // 設(shè)置背景顏色
        backgroundColor: "rgb(19, 63, 100)",
        // 設(shè)置選中范圍的填充顏色
        fillerColor: "rgb(16, 171, 198)",
        // 設(shè)置邊框顏色
        borderColor: "rgb(19, 63, 100)",
        // 是否顯示detail，即拖拽時(shí)候顯示詳細(xì)數(shù)值信息
        showDetail: false,
        // 數(shù)據(jù)窗口范圍的起始數(shù)值
        startValue: 0,
        // 數(shù)據(jù)窗口范圍的結(jié)束數(shù)值（一頁(yè)顯示多少條數(shù)據(jù)）
        endValue: 5,
        // 控制哪個(gè)軸，如果是number表示控制一個(gè)軸，
        // 如果是Array表示控制多個(gè)軸。此處控制第二根軸
        yAxisIndex: [0, 1],
        // empty：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被設(shè)置為空。
        // 即不會(huì)影響其他軸的數(shù)據(jù)范圍
        filterMode: "empty",
        // 滾動(dòng)條高度
        width: 8,
        // 滾動(dòng)條顯示位置
        height: "80%",
        // 距離右邊
        right: 3,
        // 控制手柄的尺寸
        handleSize: 0,
        // 是否鎖定選擇區(qū)域（或叫做數(shù)據(jù)窗口）的大小
        zoomLoxk: true,
        // 組件離容器上側(cè)的距離
        // 如果top的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊
        top: "middle",
    },
    {
        // 沒(méi)有下面這塊的話，只能拖動(dòng)滾動(dòng)條，
        // 鼠標(biāo)滾輪在區(qū)域內(nèi)不能控制外部滾動(dòng)條
        type: "inside",
        // 控制哪個(gè)軸，如果是number表示控制一個(gè)軸，
        // 如果是Array表示控制多個(gè)軸。此處控制第二根軸
        yAxisIndex: [0, 1],
        // 滾輪是否觸發(fā)縮放
        zoomOnMouseWheel: false,
        // 鼠標(biāo)移動(dòng)能否觸發(fā)平移
        moveOnMouseMove: true,
        // 鼠標(biāo)滾輪能否觸發(fā)平移
        moveOnMouseWheel: true,
    },
]

總結(jié)

到此這篇關(guān)于echarts使用dataZoom實(shí)現(xiàn)橫向和縱向滾動(dòng)條的文章就介紹到這了,更多相關(guān)echarts實(shí)現(xiàn)橫向和縱向滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: