echart條形圖超多項列顯示固定列超出部分滾動條滾動顯示

主要需要設置

dataZoom

start: 1, end: 50 滾動條顯示的固定位置，

width:4,滾動條調整寬度

id: 'dataZoomY', 如果是條形圖需要設置此項

如果是x軸的柱狀圖設置;

 id: 'dataZoomX',

dataZoom: [
        //  {
        //     id: 'dataZoomX',
        //     type: 'inside',
        //     xAxisIndex: [0],
        //     filterMode: 'filter'
        // },
        {
            id: 'dataZoomY', 
            type: 'inside',
            yAxisIndex: [0],
            // filterMode: 'empty',
            // height: 120, 
            width:4,
            start: 1, end: 50
        }
        ],
        xAxis: [
          //Y軸的網格已值為准
          {
            type: "value",
            show: false,
          },
        ],
        series: [ 
...

 

設置　　

type: 'inside', 滾動條會不顯示，但是鼠標直接拖拽可實現滾動顯示下面的，需要注意的是這兩種對鼠標滾輪都不是直接實現滾動的（網頁的是鼠標放在區域內滾動滾輪直接滾動實現）