echart dataZoom實現滾動條

 dataZoom 組件 用於區域縮放，從而能自由關注細節的數據信息，或者概覽數據整體，或者去除離羣點的影響。https://www.echartsjs.com/zh/option.html#dataZoom

dataZoom:[
        {
            start:100,//默認爲0
               end: 80,//默認爲100
               type: 'slider',
               show: true,
               yAxisIndex: [0],//設置 dataZoom-slider 組件控制的 y軸
               handleSize: 0,//滑動條的 左右2個滑動條的大小
               left: 950, //左邊的距離
               realtime:false,//拖動時，是否實時更新系列的視圖。如果設置爲 false，則只在拖拽結束的時候更新。
               top:0,
               right: 40,//右邊的距離
               bottom: 26,//右邊的距離
               minValueSpan:10,//用於限制窗口大小的最小值（實際數值）。
               maxValueSpan:12,//用於限制窗口大小的最大值（實際數值）。
               fillerColor:'#ccc',// 選中範圍的填充顏色。
               backgroundColor: '#ddd',//兩邊未選中的滑動條區域的顏色
               showDataShadow: false,//是否顯示數據陰影 默認auto
               showDetail: false,//即拖拽時候是否顯示詳細數值信息 默認true
               filterMode: 'none',//

            }
    
        ],

filterMode 

• 'filter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其他軸的數據範圍。每個數據項，只要有一個維度在數據窗口外，整個數據項就會被過濾掉。

• 'weakFilter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其他軸的數據範圍。每個數據項，只有當全部維度都在數據窗口同側外部，整個數據項纔會被過濾掉。

• 'empty'：當前數據窗口外的數據，被 設置爲空。即 不會 影響其他軸的數據範圍。

• 'none': 不過濾數據，只改變數軸範圍。

---

 當數據小不需要滾動條的時候，可以通過判斷data的length，設置 dataZoom 中的show爲false，來不顯示這個組件

 

---