echarts柱狀圖區域縮放可拖動參數配置

 

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

　　

 如果數據量過大，拖拽時候會造成柱子擠在一塊連一片

解決辦法 將zoomLock設置成true

dataZoom: [
   {
      type: 'slider',
      show: true,
      start: 0,
      end: 5,
      bottom: 0,
      height: 36,
      xAxisIndex: [0],
      zoomLock: true
    }
]