ECharts中dataZoom的使用，dataZoom滑块、手柄的高度调节

dataZoom是一个ECharts一个下滑块组件，里面有很多的属性，这里简单介绍一下。

先说如何调节dataZoom的高度：

dataZoom: [
		{	
			bottom: 10,//下滑块距离x轴底部的距离
		    height : 20,//下滑块手柄的高度调节
            type: 'slider',//类型,滑动块插件
            show: true,//是否显示下滑块
            xAxisIndex: [0],//选择的x轴
            start: 120, //初始数据显示多少
            end: 135    //初始数据最多显示多少
        }
    ]

属性解析目录：
1、type属性。
2、show属性。
3、showDetail属性。
4、textStyle.color属性。
5、slider.start 属性。
6、slider.end属性。
7、slider.orient属性
8、slider.zoomLock属性。
9、slider.left 属性。
10、slider.top属性。
11、slider.right属性。
12、slider.bottom属性。

1、dataZoom的slider的type属性。
两个值，第一个就是slider，作用是下滑块；另一个值是inside，作用是内侧下滑块。

type属性：
type =  'slider'; //表示下滑块。
type = 'inside' ;//内侧滑块。

2、show属性：

show = true; //显示组件。
show = flase; //不显示组件，但是数据过滤的功能还在。

3、showDetail属性：
拖拽时。是否显示详细数值信息。

showDetail = true；//显示。
showDetail = false；//不显示。

4、textStyle.color属性：
文字的颜色。

textStyle: {
color: "red",
fontWeight : "字体的粗细"，//可以输入属性，也可输入数值类型。数值类型为：normal、bold、boder、lighter
fontStyle: "字体的风格" ，//可选择 normal、italic、obloque
//这玩意没啥用，很少用到。
}

5、slider.start 属性：
窗口初始显示数据的范围。

start：' 0 ~ 100'   // 表示0% ~ 100%

6、slider.end属性：
窗口范围结束的百分比：

end : ' 0 ~ 100'  // 表示0% ~ 100%

7、slider.orient属性：
设置布局方式，两种，一横一竖

orient = horizontal; // 水平。
orient = vertical; //竖直。

8、slider.zoomLock属性：
是否锁定视图，或者说限制窗口的大小。

zoomLock : true //锁定选择的区域，不可以缩放，只能平移。不设置的话直接有默认值就行。

9、slider.left 属性：
组件距离容器左侧的距离。
默认自动：auto。

left  ：'0~100' // 他的值可以为数值，也可以是百分比。

10、slider.top属性：
组件距离容器上侧的距离。
默认自动：auto。

top ：'0~100' // 他的值可以为数值，也可以是百分比。

11、slider.right属性：
组件距离容器右侧的距离。
默认自动：auto。

right ：'0~100' // 他的值可以为数值，也可以是百分比。

12、slider.bottom属性：
组件距离容器下侧的距离。
默认自动：auto。

bottom ：'0~100' // 他的值可以为数值，也可以是百分比。