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，来不显示这个组件

 

---