小魚兒心語(yǔ)：除了生老病死，人生里真正重要的事，其實(shí)沒(méi)有幾件，沒(méi)必要為了小事愁容滿面，也沒(méi)必要去跟小人爭(zhēng)個(gè)長(zhǎng)短，記得對(duì)自己好點(diǎn)兒。

將Echarts 中的 dataZoom 區(qū)域縮放配置簡(jiǎn)單歸納，快速的學(xué)習(xí)預(yù)覽配置它的屬性。

dataZoom 可以自由選擇展示數(shù)據(jù)范圍的情況下都可以使用 dataZoom 組件，用于增強(qiáng)增強(qiáng)圖表的交互性，能夠根據(jù)需求動(dòng)態(tài)地調(diào)整圖表顯示的數(shù)據(jù)范圍，從而更好地理解和分析數(shù)據(jù)。

一、 inside 內(nèi)置型區(qū)域縮放配置

option={
    //  inside 表示數(shù)據(jù)區(qū)域縮放組件將被放置在坐標(biāo)系內(nèi)部，默認(rèn)為該值。當(dāng)鼠標(biāo)在坐標(biāo)系區(qū)域內(nèi)滾動(dòng)時(shí)，可以通過(guò)拖拽選擇數(shù)據(jù)區(qū)域進(jìn)行縮放。
    //  slider 表示數(shù)據(jù)區(qū)域縮放組件將以滑動(dòng)條的形式放置在坐標(biāo)系下方?；瑒?dòng)條可以手動(dòng)拖動(dòng)或點(diǎn)擊選擇數(shù)據(jù)區(qū)域進(jìn)行縮放。 
    //  both  表示同時(shí)使用 'inside' 和 'slider' 兩種方式的數(shù)據(jù)區(qū)域縮放組件，用戶既可以在坐標(biāo)系內(nèi)部進(jìn)行縮放，也可以通過(guò)滑動(dòng)條進(jìn)行縮放。
    xAxis: [
        {...}, // 第一個(gè) xAxis
        {...}, // 第二個(gè) xAxis
        {...}, // 第三個(gè) xAxis
        {...}  // 第四個(gè) xAxis
    ],
    yAxis: [
        {...}, // 第一個(gè) yAxis
        {...}, // 第二個(gè) yAxis
        {...}, // 第三個(gè) yAxis
        {...}  // 第四個(gè) yAxis
    ],
    dataZoom:{
        type:'inside',                         //指定數(shù)據(jù)區(qū)域縮放組件的類型
        //當(dāng)類型為  inside 可生效的配置
        id:'1',                                // 組件ID 
        disAbled:true,                         // 是否開啟縮放功能
        xAxisIndex:[0,1],                      // 控制 X 軸，例如控制 第一個(gè)和第二個(gè)軸 xAxis 可縮放
        yAxisIndex:1,                          // 控制 Y 軸，例如控制 第二個(gè) yAxis 可縮放
        radiusAxisIndex:1,                     // 控制極坐標(biāo)中的第二個(gè) radius 軸 
        angleAxisIndex:1,                      // 控制極坐標(biāo)中的第二個(gè) angle 軸               
        filterMode:'filter',                   // 數(shù)據(jù)過(guò)濾，來(lái)優(yōu)化數(shù)據(jù)展示
        //百分比值，都通用
        start:40,                              // 數(shù)據(jù)展示窗口的初始數(shù)據(jù)
        end:80,                                // 數(shù)據(jù)展示窗口的結(jié)束數(shù)據(jù)
        minSpan:50,                            // 窗口的最小值
        maxSpan:50,                            // 窗口的最大值
        //絕對(duì)值嗎，一般用在具體數(shù)值的軸
        startValue:20,                         // 數(shù)據(jù)展示窗口的初始數(shù)據(jù)
        endValue:80,                           // 數(shù)據(jù)展示窗口的結(jié)束數(shù)據(jù)
        minValueSpan:100,                      // 窗口的最小值
        maxValueSpan:100,                      // 窗口的最大值
        
        orient:'horizontal',                   // 縮放是水平縮放還是豎直縮放
        zoomLock:true,                         // 是否固定當(dāng)前窗口，將縮放修改為左右偏移窗口
        throttle:100,                          // 觸發(fā)視圖刷新的頻率。
        rangeMode:[30,70],                     // 縮放范圍，當(dāng)設(shè)置 start 等時(shí)為百分比 比例，若設(shè)置了startValue 等時(shí)為絕對(duì)值
        zoomOnMouseWhell:'ctrl',               // 如何觸發(fā)縮放，如鼠標(biāo)滾輪、 ctrl + 滾輪
        moveOnMouseMove:true,                  // 縮放功能為平移時(shí)，如何移動(dòng)鼠標(biāo)來(lái)觸發(fā)平移窗口,
        moveOnMouseWhell:true,                 // 縮放功能為平移時(shí)，如何操作鼠標(biāo)滾輪來(lái)觸發(fā)偏移窗口
        preventDefaultMouseMove:true,          // 是否阻止 mousemove 事件的默認(rèn)行為
        
        //當(dāng)類型為  slider 可生效的配置
     },
}

二、slider 滑動(dòng)條形式縮放配置

option={
    //  inside 表示數(shù)據(jù)區(qū)域縮放組件將被放置在坐標(biāo)系內(nèi)部，默認(rèn)為該值。當(dāng)鼠標(biāo)在坐標(biāo)系區(qū)域內(nèi)滾動(dòng)時(shí)，可以通過(guò)拖拽選擇數(shù)據(jù)區(qū)域進(jìn)行縮放。
    //  slider 表示數(shù)據(jù)區(qū)域縮放組件將以滑動(dòng)條的形式放置在坐標(biāo)系下方?；瑒?dòng)條可以手動(dòng)拖動(dòng)或點(diǎn)擊選擇數(shù)據(jù)區(qū)域進(jìn)行縮放。 
    //  both  表示同時(shí)使用 'inside' 和 'slider' 兩種方式的數(shù)據(jù)區(qū)域縮放組件，用戶既可以在坐標(biāo)系內(nèi)部進(jìn)行縮放，也可以通過(guò)滑動(dòng)條進(jìn)行縮放。
    dataZoom:{
        type:'slider',                          //指定數(shù)據(jù)區(qū)域縮放組件的類型 
        //當(dāng)類型為 slider 可生效的配置
        id:'1',                                 // 組件ID
        show:true,                              // 是否顯示
        backgroundColor:'red',                  // 組件的背景顏色
        // 數(shù)據(jù)陰影的配置
        dataBackground:{
            // 陰影的線條樣式        
            lineStyle:{
                 color:'red',                    // 線的顏色
                 width:2,                        // 線寬
                 type:'solid',                   // 線的類型
                 dashOffset:10,                  // 線的類型為 虛線時(shí)，虛線的 偏移量
                 cap:'butt',                     // 指定線段末端的圖形
                 join:'bevel',                   // 線段兩端連接形狀
                 miterLimit:10,                  // join 為 miter 時(shí)，斜接面比例
                 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,                    // 陰影透明度
            },       
        },
        // 選中部分?jǐn)?shù)據(jù)的陰影樣式
        selectedDataBackground:{
             // ··· 配置與 dataBackground 內(nèi)容一致                 
        },
        fillerColor:'red',                        // 選中范圍的填充顏色
        borderColor:'red',                        // 滑動(dòng)塊的邊框顏色        
        borderRadius:5,                           // 滑動(dòng)塊的圓角 
        
        //縮放手柄配置
        handleIcon:'image://圖片路徑',             // 縮放手柄 icon 形狀，可選擇該屬性自帶的圖標(biāo)，網(wǎng)上的png格式才生效
        handleSize:32,                            // 縮放手柄的大小
        //縮放手柄樣式，如果是自定義的圖片，可能以下配置會(huì)被覆蓋無(wú)效
        handleStyle:{
            color:'red',                          // 圖形顏色
            borderColor:'red',                    // 圖形描邊
            borderWidth:2,                        // 圖形描邊寬度
            borderType:'dashed',                  // 圖形描邊類型
            borderDashOffset:10,                  // 描邊類型為虛線時(shí)的虛線偏移量
            borderCap:'butt',                     // 指定線段末端的圖形
            borderJoin:'bevel',                   // 線段連接圖形  
            borderMiterLimit:10,                  // borderJoin 為 miter 時(shí)，斜接面 比例
            shadowColor:'red',                    // 圖形陰影顏色
            shadowBlur:10,                        // 圖形陰影大小 
            shadowOffsetX:10,                     // 圖形陰影在水平方向上的偏移
            shadowOffsetY:10,                     // 圖形陰影在豎直方向上的偏移
            opacity:0.4,                          // 圖形透明度                                                                                                    
        },
 
        //移動(dòng)手柄配置
        moveHandleIcon:'image://圖片路徑',         // 移動(dòng)手柄中間的icon ，網(wǎng)上的png格式生效，jpg不行
        moveHandleSize:32,                        //  移動(dòng)手柄大小
        //移動(dòng)手柄樣式
        moveHandleStyle:{
             // ··· 配置與上面的縮放手柄樣式(handleStyle) 內(nèi)容一致     
        },
        labelPreacision:'auto',                   // 拖拽時(shí)顯示范圍值 label 的精度
        labelFormatter:'{value}單位字符',          // label的格式化器
        showDetail:true,                          // 拖拽時(shí)是否顯示 label 數(shù)值
        showDataShadow:true,                      // 是否顯示數(shù)據(jù)陰影
        realtime:true,                            // 在縮放范圍時(shí)，縮放實(shí)時(shí)更新系列圖表
        //  label 字體設(shè)置
        textStyle:{
            color:'red',                          // 字體顏色
            fontStyle:'normal',                   // 字體風(fēng)格
            fontWeight:'normal',                  // 字體粗細(xì)
            fontFamily:'Arial',                   // 字體系列
            fontSize:12,                          // 字體大小
            lineHeight:32,                        // 行高
            width:50,                             // 文本顯示寬度
            height:50,                            // 文本顯示高度
            textBorderColor:'red',                // 文字描邊顏色
            textBorderWidth:20,                   // 文字描邊寬度
            textBorderType:'solid',               // 文字描邊類型
            textBorderDashOffset:10,              // 文字描邊為虛線時(shí)，虛線的偏移量
            textShadowColor:'red',                // 文字陰影顏色
            textShadowBlur:10,                    // 文字陰影長(zhǎng)度
            textShadowOffsetX:10,                 // 文字陰影水平偏移量
            textShaodwOffsetY:10,                 // 文字陰影豎直偏移量
            overflow:'truncate',                  // 文本超出寬度之后的配置，換行 || 截?cái)嗟?            ellipsis:'···',                       // 文本超出長(zhǎng)度，且為截?cái)鄷r(shí)，文本尾部展示內(nèi)容                
        },
        // 配置縮放控制的軸
        xAxisIndex:0,                             // 組件控制的 X 軸
        yAxisIndex:[0,1],                         // 組件控制 第一個(gè)和第二個(gè) Y 軸
        radiusAxisIndex:2,                        // 組件控制的 radius 軸 
        angleAxisIndex:1,                         // 組件控制的 angle 軸
        
        filterMode:'filter',                      // 數(shù)據(jù)展示優(yōu)化設(shè)置
        start:'10%',                              // 起始百分比
        end:'10%',                                // 結(jié)束百分比
        startValue:10,                            // 起始的絕對(duì)數(shù)值
        endValue:50,                              // 結(jié)束的絕對(duì)數(shù)值
        minSpan:10,                               // 限制窗口最小值百分比
        maxSpan:100,                              // 限制窗口的最大值百分比
        minValueSpan:10,                          // 限制窗口最小值絕對(duì)值
        maxValueSpan:100,                         // 限制窗口最大值絕對(duì)值
        orient:'vertical',                        // 布局方式，橫著還是豎著展示，在直角坐標(biāo)系中，同時(shí)配置了控制的軸 
        zoomLock:false,                           // 是否固定當(dāng)前的縮放范圍
        throttle:100,                             // 觸發(fā)視圖的刷新頻率
        rangeMode:[10,80],                        // 限制縮放范圍，當(dāng)設(shè)置 start 等時(shí)為百分比 比例，若設(shè)置了startValue 等時(shí)為絕對(duì)值                                                                                     
        zlevel:1,                                 // 所有圖形的 zlevel 值
        z:2,                                      // 所有圖形的 z 值
        
        // 縮放滑動(dòng)條的顯示設(shè)置
        left:'auto',                              // 距離 Echarts 容器的左側(cè)距離
        right:'auto',                             // 距離 Echarts 容器的右側(cè)距離
        top:'auto',                               // 距離 Echarts 容器的上側(cè)距離
        bottom:'auto',                            // 距離 Echarts 容器的底部距離
        width:'50%',                              // 縮放滑動(dòng)條的寬度
        height:'50%',                             // 縮放滑動(dòng)條的高度
        
        // 刷選功能設(shè)置，是否可以直接在滑動(dòng)塊中直接選擇范圍來(lái)顯示數(shù)據(jù)，不通過(guò)縮放手柄 
        brushSelect:true,                         // 是否開啟刷選功能
        // 刷選時(shí)，選中范圍的樣式
        brushStyle:{
            color:'red',                          // 選中范圍顏色
            borderColor:'red',                    // 選中范圍描邊顏色
            borderWidth:5,                        // 選中范圍描邊寬度
            borderType:'solid',                   // 選中范圍描邊類型
            borderDashOffset:10,                  // 描邊類型為虛線時(shí)，虛線的偏移量
            borderCap:'butt',                     // 指定線段末端圖形
            borderJoin:'bevel',                   // 線段連接方式
            borderMiterLimit:50,                  // borderJoin 為 miter 時(shí)，斜接面比例
            shadowBlur:10,                        // 選中范圍陰影大小
            shadowColor:'red',                    // 選中范圍陰影顏色
            shadowOffsetX:10,                     // 選中范圍陰影 水平上的偏移量
            shadowOffsetY:10,                     // 選中范圍陰影 豎直上的偏移量
            opacity:0.6,                          // 透明度           
        }
        // 選中滑動(dòng)塊中的手柄時(shí)，突出的手柄高亮狀態(tài)
        emphasis:{
            // 縮放手柄的高亮狀態(tài)
            handleStyle:{
                // ··· 該配置與上面的縮放手柄樣式 handleStyle 內(nèi)容一致              
            },
            // 移動(dòng)手柄的高亮狀態(tài)
            moveHandleStyle:{
                // ··· 該配置與上面的縮放手柄氧            
            }        
        };              
     }    
}

三、示例代碼

1、內(nèi)置縮放配置

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、滑動(dòng)條類型配置

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]
  }]
}

大家根據(jù)具體的用戶需求進(jìn)行調(diào)整即可，http://www.itdecent.cn/p/c93103ff982e 這篇文章中有我在項(xiàng)目中使用到的具體示例，大家可以移步進(jìn)行參考，希望可以幫助到大家o(￣▽￣)ブ