08-Echarts配置系列之：dataZoom 区域缩放组件

       将Echarts 中的 dataZoom 区域缩放配置简单归纳，快速的学习预览配置它的属性。

       dataZoom 可以自由选择展示数据范围的情况下都可以使用 dataZoom 组件，用于增强增强图表的交互性，能够根据需求动态地调整图表显示的数据范围，从而更好地理解和分析数据。

       我这边上传代码文件在文章中好像是需要 VIP 或者 花钱才能下载，所有打算将使用的示例代码就直接放在文章中算了。

一、dataZoom 区域缩放配置

1. inside 内置型区域缩放配置

option={
    //  inside 表示数据区域缩放组件将被放置在坐标系内部，默认为该值。当鼠标在坐标系区域内滚动时，可以通过拖拽选择数据区域进行缩放。
    //  slider 表示数据区域缩放组件将以滑动条的形式放置在坐标系下方。滑动条可以手动拖动或点击选择数据区域进行缩放。 
    //  both  表示同时使用 'inside' 和 'slider' 两种方式的数据区域缩放组件，用户既可以在坐标系内部进行缩放，也可以通过滑动条进行缩放。
    xAxis: [
        {...}, // 第一个 xAxis
        {...}, // 第二个 xAxis
        {...}, // 第三个 xAxis
        {...}  // 第四个 xAxis
    ],
    yAxis: [
        {...}, // 第一个 yAxis
        {...}, // 第二个 yAxis
        {...}, // 第三个 yAxis
        {...}  // 第四个 yAxis
    ],
    dataZoom:{
        type:'inside',                         //指定数据区域缩放组件的类型
        //当类型为  inside 可生效的配置
        id:'1',                                // 组件ID 
        disAbled:true,                         // 是否开启缩放功能
        xAxisIndex:[0,1],                      // 控制 X 轴，例如控制 第一个和第二个轴 xAxis 可缩放
        yAxisIndex:1,                          // 控制 Y 轴，例如控制 第二个 yAxis 可缩放
        radiusAxisIndex:1,                     // 控制极坐标中的第二个 radius 轴 
        angleAxisIndex:1,                      // 控制极坐标中的第二个 angle 轴               
        filterMode:'filter',                   // 数据过滤，来优化数据展示
        //百分比值，都通用
        start:40,                              // 数据展示窗口的初始数据
        end:80,                                // 数据展示窗口的结束数据
        minSpan:50,                            // 窗口的最小值
        maxSpan:50,                            // 窗口的最大值
        //绝对值吗，一般用在具体数值的轴
        startValue:20,                         // 数据展示窗口的初始数据
        endValue:80,                           // 数据展示窗口的结束数据
        minValueSpan:100,                      // 窗口的最小值
        maxValueSpan:100,                      // 窗口的最大值
        
        orient:'horizontal',                   // 缩放是水平缩放还是竖直缩放
        zoomLock:true,                         // 是否固定当前窗口，将缩放修改为左右偏移窗口
        throttle:100,                          // 触发视图刷新的频率。
        rangeMode:[30,70],                     // 缩放范围，当设置 start 等时为百分比 比例，若设置了startValue 等时为绝对值
        zoomOnMouseWhell:'ctrl',               // 如何触发缩放，如鼠标滚轮、 ctrl + 滚轮
        moveOnMouseMove:true,                  // 缩放功能为平移时，如何移动鼠标来触发平移窗口,
        moveOnMouseWhell:true,                 // 缩放功能为平移时，如何操作鼠标滚轮来触发偏移窗口
        preventDefaultMouseMove:true,          // 是否阻止 mousemove 事件的默认行为
        
        //当类型为  slider 可生效的配置
     },
}

2. slider 滑动条形式缩放配置

option={
    //  inside 表示数据区域缩放组件将被放置在坐标系内部，默认为该值。当鼠标在坐标系区域内滚动时，可以通过拖拽选择数据区域进行缩放。
    //  slider 表示数据区域缩放组件将以滑动条的形式放置在坐标系下方。滑动条可以手动拖动或点击选择数据区域进行缩放。 
    //  both  表示同时使用 'inside' 和 'slider' 两种方式的数据区域缩放组件，用户既可以在坐标系内部进行缩放，也可以通过滑动条进行缩放。
    dataZoom:{
        type:'slider',                          //指定数据区域缩放组件的类型 
        //当类型为 slider 可生效的配置
        id:'1',                                 // 组件ID
        show:true,                              // 是否显示
        backgroundColor:'red',                  // 组件的背景颜色
        // 数据阴影的配置
        dataBackground:{
            // 阴影的线条样式        
            lineStyle:{
                 color:'red',                    // 线的颜色
                 width:2,                        // 线宽
                 type:'solid',                   // 线的类型
                 dashOffset:10,                  // 线的类型为 虚线时，虚线的 偏移量
                 cap:'butt',                     // 指定线段末端的图形
                 join:'bevel',                   // 线段两端连接形状
                 miterLimit:10,                  // join 为 miter 时，斜接面比例
                 shadowBlur:10,                  // 线的阴影大小 
                 shadowColor:'red',              // 线的阴影颜色
                 shadowOffsetX:10,               // 阴影水平方向的偏移量
                 shadowOffsetY:10,               // 阴影竖直方向的偏移量
                 opacity:0.5,                    // 阴影透明度                       
            },
            // 阴影填充样式
            areaStyle:{
                 color:'red',                    // 填充颜色
                 shadowBlur:10,                  // 阴影大小
                 shadowColor:'red',              // 阴影颜色
                 shadowOffsetX:10,               // 阴影水平方向偏移量
                 shadowOffsetY:10,               // 阴影竖直方向偏移量
                 opacity:0.8,                    // 阴影透明度
            },       
        },
        // 选中部分数据的阴影样式
        selectedDataBackground:{
             // ··· 配置与 dataBackground 内容一致                 
        },
        fillerColor:'red',                        // 选中范围的填充颜色
        borderColor:'red',                        // 滑动块的边框颜色        
        borderRadius:5,                           // 滑动块的圆角 
        
        //缩放手柄配置
        handleIcon:'image://图片路径',             // 缩放手柄 icon 形状，可选择该属性自带的图标，网上的png格式才生效
        handleSize:32,                            // 缩放手柄的大小
        //缩放手柄样式，如果是自定义的图片，可能以下配置会被覆盖无效
        handleStyle:{
            color:'red',                          // 图形颜色
            borderColor:'red',                    // 图形描边
            borderWidth:2,                        // 图形描边宽度
            borderType:'dashed',                  // 图形描边类型
            borderDashOffset:10,                  // 描边类型为虚线时的虚线偏移量
            borderCap:'butt',                     // 指定线段末端的图形
            borderJoin:'bevel',                   // 线段连接图形  
            borderMiterLimit:10,                  // borderJoin 为 miter 时，斜接面 比例
            shadowColor:'red',                    // 图形阴影颜色
            shadowBlur:10,                        // 图形阴影大小 
            shadowOffsetX:10,                     // 图形阴影在水平方向上的偏移
            shadowOffsetY:10,                     // 图形阴影在竖直方向上的偏移
            opacity:0.4,                          // 图形透明度                                                                                                    
        },

        //移动手柄配置
        moveHandleIcon:'image://图片路径',         // 移动手柄中间的icon ，网上的png格式生效，jpg不行
        moveHandleSize:32,                        //  移动手柄大小
        //移动手柄样式
        moveHandleStyle:{
             // ··· 配置与上面的缩放手柄样式(handleStyle) 内容一致     
        },
        labelPreacision:'auto',                   // 拖拽时显示范围值 label 的精度
        labelFormatter:'{value}单位字符',          // label的格式化器
        showDetail:true,                          // 拖拽时是否显示 label 数值
        showDataShadow:true,                      // 是否显示数据阴影
        realtime:true,                            // 在缩放范围时，缩放实时更新系列图表
        //  label 字体设置
        textStyle:{
            color:'red',                          // 字体颜色
            fontStyle:'normal',                   // 字体风格
            fontWeight:'normal',                  // 字体粗细
            fontFamily:'Arial',                   // 字体系列
            fontSize:12,                          // 字体大小
            lineHeight:32,                        // 行高
            width:50,                             // 文本显示宽度
            height:50,                            // 文本显示高度
            textBorderColor:'red',                // 文字描边颜色
            textBorderWidth:20,                   // 文字描边宽度
            textBorderType:'solid',               // 文字描边类型
            textBorderDashOffset:10,              // 文字描边为虚线时，虚线的偏移量
            textShadowColor:'red',                // 文字阴影颜色
            textShadowBlur:10,                    // 文字阴影长度
            textShadowOffsetX:10,                 // 文字阴影水平偏移量
            textShaodwOffsetY:10,                 // 文字阴影竖直偏移量
            overflow:'truncate',                  // 文本超出宽度之后的配置，换行 || 截断等
            ellipsis:'···',                       // 文本超出长度，且为截断时，文本尾部展示内容                
        },
        // 配置缩放控制的轴
        xAxisIndex:0,                             // 组件控制的 X 轴
        yAxisIndex:[0,1],                         // 组件控制 第一个和第二个 Y 轴
        radiusAxisIndex:2,                        // 组件控制的 radius 轴 
        angleAxisIndex:1,                         // 组件控制的 angle 轴
        
        filterMode:'filter',                      // 数据展示优化设置
        start:'10%',                              // 起始百分比
        end:'10%',                                // 结束百分比
        startValue:10,                            // 起始的绝对数值
        endValue:50,                              // 结束的绝对数值
        minSpan:10,                               // 限制窗口最小值百分比
        maxSpan:100,                              // 限制窗口的最大值百分比
        minValueSpan:10,                          // 限制窗口最小值绝对值
        maxValueSpan:100,                         // 限制窗口最大值绝对值
        orient:'vertical',                        // 布局方式，横着还是竖着展示，在直角坐标系中，同时配置了控制的轴 
        zoomLock:false,                           // 是否固定当前的缩放范围
        throttle:100,                             // 触发视图的刷新频率
        rangeMode:[10,80],                        // 限制缩放范围，当设置 start 等时为百分比 比例，若设置了startValue 等时为绝对值                                                                                     
        zlevel:1,                                 // 所有图形的 zlevel 值
        z:2,                                      // 所有图形的 z 值
        
        // 缩放滑动条的显示设置
        left:'auto',                              // 距离 Echarts 容器的左侧距离
        right:'auto',                             // 距离 Echarts 容器的右侧距离
        top:'auto',                               // 距离 Echarts 容器的上侧距离
        bottom:'auto',                            // 距离 Echarts 容器的底部距离
        width:'50%',                              // 缩放滑动条的宽度
        height:'50%',                             // 缩放滑动条的高度
        
        // 刷选功能设置，是否可以直接在滑动块中直接选择范围来显示数据，不通过缩放手柄 
        brushSelect:true,                         // 是否开启刷选功能
        // 刷选时，选中范围的样式
        brushStyle:{
            color:'red',                          // 选中范围颜色
            borderColor:'red',                    // 选中范围描边颜色
            borderWidth:5,                        // 选中范围描边宽度
            borderType:'solid',                   // 选中范围描边类型
            borderDashOffset:10,                  // 描边类型为虚线时，虚线的偏移量
            borderCap:'butt',                     // 指定线段末端图形
            borderJoin:'bevel',                   // 线段连接方式
            borderMiterLimit:50,                  // borderJoin 为 miter 时，斜接面比例
            shadowBlur:10,                        // 选中范围阴影大小
            shadowColor:'red',                    // 选中范围阴影颜色
            shadowOffsetX:10,                     // 选中范围阴影 水平上的偏移量
            shadowOffsetY:10,                     // 选中范围阴影 竖直上的偏移量
            opacity:0.6,                          // 透明度           
        }
        // 选中滑动块中的手柄时，突出的手柄高亮状态
        emphasis:{
            // 缩放手柄的高亮状态
            handleStyle:{
                // ··· 该配置与上面的缩放手柄样式 handleStyle 内容一致              
            },
            // 移动手柄的高亮状态
            moveHandleStyle:{
                // ··· 该配置与上面的缩放手柄氧            
            }        
        };              
     }    
}

二、解剖图：

1.内置缩放配置动态图

2.滑动条解剖图

 三、解剖图中的配置代码

使用方法：

1.内置缩放配置

option = {
  color: ["#3398DB"],
  title: {
    text: "Beijing AQI"
  },
  tooltip: {
    trigger: "axis"
  },
  grid:[{
    left:'0%',
    containLabel:true,
    top:'center',
    width:'50%',
    height:'60%',
  },{
    left:'55%',
    containLabel:true,
    top:'center',
    width:'50%',
    height:'60%',
  }],
  xAxis:[ {
   gridIndex:0,
    data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"]
  }, {
    gridIndex:1,
    data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"]
  }],
  yAxis: [{
    gridIndex:0,
    splitLine: {
      show: false
    }
  },{
   gridIndex:1,
    splitLine: {
      show: false
    }
  }],
  dataZoom: {
    start: 20,
    end:30,
    startValue:10,
    type: "inside",
    orient:'horizontal',
    zoomLock:true
  },
  series: [
    {
    xAxisIndex:0,
    yAxisIndex:0,
    name: "Beijing AQI",
    type: "bar",
    data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207]
  },{
    xAxisIndex:1,
    yAxisIndex:1,
    name: "Beijing AQI",
    type: "bar",
    data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207]
  }]
}

2.滑动条类型配置

option = {
  color: ["#3398DB"],
  grid:[
    {
    left:'5%',
    top:'8%',
    width:'90%',
    height:'50%',
   }],
  title: {
    text: "Beijing AQI"
  },
  tooltip: {
    trigger: "axis"
  },
  xAxis: [{
    data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"],
    gridIndex:0,
  },{
    data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"],
    gridIndex:0,
    
  }],
  yAxis:[ {
    gridIndex:0,
  }, {
    gridIndex:0,
  }],
  dataZoom: {
    type: "slider",
    textStyle:{
      color:'gold',
      fontSize:28,
    },
    backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
    ]),
    dataBackground:{
      lineStyle:{
        color:'red',
        width:4,
      },
      areaStyle:{
        color:'green',
        shadowBlur:0,
        opacity:0,
      },
     
    },
    borderRadius:10,
    borderColor:'red',
    handleIcon:'image://https://p2.ssl.qhimgs1.com/sdr/400__/t01c7d3fa7695fc7edc.png',
    handleSize:48,
    handleStyle:{
      borderColor:'red',
      borderWidth:2,
    },
    moveHandleIcon:'image://https://p2.ssl.qhimgs1.com/sdr/400__/t014e2e2e27361d2d58.png',
    moveHandleSize:48,
    width:'auto',
    height:'30%',
    bottom:'8%',
    brushSelect:true,
    brushStyle:{
      color:'#fff',
      borderColor:'red',
    },
    emphasis:{
      handleStyle:{
        color:'red',
      },
      moveHandleStyle:{
        color:'red',
      }
    }
    
   

  },
  series: [
    {
    name: "Beijing AQI",
    xAxisIndex:0,
    yAxisIndex:0,
    type: "bar",
    data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207]
  }]
}