echarts實現(xiàn)橫向和縱向滾動條(使用dataZoom)

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

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

前言

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

1、橫向滾動條

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

2、縱向滾動條

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