Echarts学习（1） dataZoom

今天开始学习Echarts，作为一个O js 基础的人，我想着就以博客的形式记录我了解了的内容，也给同样境况的人提供一点帮助。官网的实例有很高的参考价值，我这里也算是对官网的实例做得有自己经验的小笔记吧！
dataZoom是用来给图表提供放大缩小和位置移动功能的，这个功能可以通过滚动鼠标滚轮实现，也可以通过拉Echarts提供的滑块实现。

dataZoom: [//对于dataZoom组件，若未设置xAxisIndex或yAxisIndex，则默认控制x轴。
                {
                    type: 'slider',//slider类型的dataZoom含有外置的滑块，只能通过移动滑块改变图表的位置
                    xAxisIndex: 0, //控制x轴
                    start: 10, 	// 初始位置 左边界在 10% 的位置 
                    end: 60 	// 初始位置 右边界在 60% 的位置
                },
                {
                    type: 'inside',// inside 类型 dataZoom 组件，能在坐标系内进行拖动
                    xAxisIndex: 0,//控制x轴
                    start: 10,
                    end: 60
                },
                {
                    type: 'slider',//slider 型 dataZoom 组件
                    yAxisIndex: 0,
                    start: 30,
                    end: 80
                },
                {
                    type: 'inside',// inside 型 dataZoom 组件
                    yAxisIndex: 0,
                    start: 30,
                    end: 80
                }
            ]

通过上述代码，可以实现图表横纵坐标通过滑块或者直接在坐标系内拖动而放大缩小改变位置。