关于echarts的滚动条

之前在公司发现了一个,处理了一个echarts 柱状图可视化的一个数据过多一个功能 ，就用到了滚动效果废话不多说，直接上api

dataZoom:[ //区域缩放
{
　　id: 'dataZoomX',
　　show:true, //是否显示 组件。若是设置为 false，不会显示，可是数据过滤的功能还存在。
　　backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
　　type: 'slider', //slider表示有滑动块的，inside表示内置的
　　dataBackground:{ //数据阴影的样式。
　　　　lineStyle:mylineStyle, //阴影的线条样式
　　　　areaStyle:myareaStyle, //阴影的填充样式
　　},
　　fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
　　borderColor:"#ddd", //边框颜色。
　　filterMode: 'filter', //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其余轴的数据范围。每一个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
　　　　　　　　　　//'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其余轴的数据范围。每一个数据项，只有当所有维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
　　　　　　　　　　//'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其余轴的数据范围。
　　　　　　　　　　//'none': 不过滤数据，只改变数轴范围。
　　xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,能够用数组表示多个轴
　　yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,能够用数组表示多个轴
　　radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,能够用数组表示多个轴
　　angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,能够用数组表示多个轴
　　start: 30, //数据窗口范围的起始百分比,表示30%
　　end: 70, //数据窗口范围的结束百分比,表示70%
　　startValue:10, //数据窗口范围的起始数值
　　endValue:100, //数据窗口范围的结束数值。
　　orient:"horizontal", //布局方式是横仍是竖。不只是布局方式，对于直角坐标系而言，也决定了，缺省状况控制横向数轴仍是纵向数轴。'horizontal'：水平。'vertical'：竖直。
　　zoomLock:false, //是否锁定选择区域（或叫作数据窗口）的大小。若是设置为 true
　　则锁定选择区域的大小，也就是说，只能平移，不能缩放。
　　throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
　　zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
　　moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
　　left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
　　top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
　　right:"auto", //组件离容器右侧的距离,'20%'
　　bottom:"auto", //组件离容器下侧的距离,'20%'

},
{
　　id: 'dataZoomY',
　　type: 'inside',
　　filterMode: 'empty',
　　disabled:false, //是否中止组件的功能。
　　xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,能够用数组表示多个轴
　　yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,能够用数组表示多个轴
　　radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,能够用数组表示多个轴
　　angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,能够用数组表示多个轴
　　start: 30, //数据窗口范围的起始百分比,表示30%
　　end: 70, //数据窗口范围的结束百分比,表示70%
　　startValue:10, //数据窗口范围的起始数值
　　endValue:100, //数据窗口范围的结束数值。
　　orient:"horizontal", //布局方式是横仍是竖。不只是布局方式，对于直角坐标系而言，也决定了，缺省状况控制横向数轴仍是纵向数轴。'horizontal'：水平。'vertical'：竖直。
　　zoomLock:false, //是否锁定选择区域（或叫作数据窗口）的大小。若是设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
　　throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
　　zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
　　moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
}
]

上面是两种滚动状态都是以type来定义的。