echarts柱狀圖實現橫向拖動展示數據

在使用echarts柱狀圖時，如果數據過多，圖的顯示不會那么直觀，有的橫坐標會被隱藏，如下圖所示：

 想實現可以通過橫向滾動條拖動展示數據，看了官方文檔，實現的效果如下

具體代碼：就是添加這個代碼就可以了

dataZoom: [
    {
        id: 'dataZoomX',
        type: 'slider',
        xAxisIndex: [0],
        filterMode: 'filter'
    },
    {
        id: 'dataZoomY',
        type: 'slider',
        yAxisIndex: [0],
        filterMode: 'empty'
    }
],

 

官方說明dataZoom 組件就是用於區域縮放，可以關注細節的數據信息，或者概覽數據整體

dataZoom 現有三種類型：內置型，滑動條型，框選型。上圖的效果選用的是滑動條型

dataZoom: [
    //1.橫向使用滾動條
    {
        type: 'slider',//有單獨的滑動條，用戶在滑動條上進行縮放或漫游。inside是直接可以是在內部拖動顯示
        show: true,//是否顯示 組件。如果設置為 false，不會顯示，但是數據過濾的功能還存在。
        start: 0,//數據窗口范圍的起始百分比0-100
        end: 50,//數據窗口范圍的結束百分比0-100
        xAxisIndex: [0],// 此處表示控制第一個xAxis，設置 dataZoom-slider 組件控制的 x軸 可是已數組[0,2]表示控制第一，三個；xAxisIndex: 2 ，表示控制第二個。yAxisIndex屬性同理
        bottom: -10 //距離底部的距離
    },
    //2.在內部可以橫向拖動
    {
        type: 'inside',// 內置於坐標系中
        start: 0,
        end: 30,
        xAxisIndex: [0]
    },
    //3.縱向使用滾動條
    {
        type: 'slider',
        show: true,
        yAxisIndex: [0],//設置組件控制的y軸
        left: '93%',//距離左側的距離 可以使百分比，也可以是像素 left: '30'（30像素）
        start: 29,
        end: 36
    },
    //4.在內部可以縱向拖動
    {
        type: 'inside',
        yAxisIndex: [0],
        start: 29,
        end: 36
    }
],

 

dataZoom 組件的具體使用可以參考官方文檔 https://echarts.apache.org/zh/option.html#dataZoom