echarts的dataZoom详解及用法

一.两个type类型

1.区别和相同点

两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。

2.dataZoom中的几个重要的属性

1.start和end
默认进来时滚动条的长度，为0和100是就是长度最大

2.handleIcon
滚动条手柄的样式，如果用图片的话，需要正方形的图片才会正常展示

3.showDetail
拖拽是是否显示详细数值信息，就是滚动条两边显示的信息

4.xAxisIndex
这个是一个数组，是滚动条展示哪个X轴的属性，谁在前，展示谁

3.dataZoom利用

因为需求提出想要自适应X轴的间隔，还不想要X轴interval的auto，所以利用dataZoom的事件来完成这一需求，代码如下

zoomEcharts(params) {
                let total = this.xAxisData.length;
                let maxData;
                let maxInter;
                if(this.activeTab2 === '1') {
                    maxData = 10;
                    maxInter = 9;
                }else if(this.activeTab2 === '3'){
                    maxData = 6;
                    maxInter = 5;
                }else if(this.activeTab2 === '2'){
                    maxData = 6;
                    maxInter = 5;
                }
                if(params.batch){
                    this.option.dataZoom[0].start = params.batch[0].start;
                    this.option.dataZoom[0].end =  params.batch[0].end;
                    let percent = (params.batch[0].end - params.batch[0].start)/100;
                    let currentData = Math.ceil(percent * total);
                    let inter = Math.ceil((currentData - maxData) / maxInter);
                    if(currentData <= maxData) {
                        this.interval = 0
                        this.option.xAxis[0].axisLabel.interval = 0;
                    }else {
                        this.interval = inter;
                        this.option.xAxis[0].axisLabel.interval = inter;
                    }
                }else if(params.start){
                    this.option.dataZoom[0].start = params.start;
                    this.option.dataZoom[0].end =  params.end;
                    let percent = (params.end - params.start)/100;
                    let currentData = Math.ceil(percent * total);
                    let inter = Math.ceil((currentData - maxData) / maxInter);
                    if(currentData <= maxData) {
                        this.interval = 0
                        this.option.xAxis[0].axisLabel.interval = 0;
                    }else {
                        this.interval = inter;
                        this.option.xAxis[0].axisLabel.interval = inter;
                    }
                }else if(params.end){
                    this.option.dataZoom[0].start = params.start;
                    this.option.dataZoom[0].end =  params.end;
                    let percent = (params.end - params.start)/100;
                    let currentData = Math.ceil(percent * total);
                    let inter = Math.ceil((currentData - maxData) / maxInter);
                    if(currentData <= maxData) {
                        this.interval = 0
                        this.option.xAxis[0].axisLabel.interval = 0;
                    }else {
                        this.interval = inter;
                        this.option.xAxis[0].axisLabel.interval = inter;
                    }
                }           
            },