十、Echart圖表之 dataZoom區(qū)域縮放基本使用與配置大全

這篇具有很好參考價(jià)值的文章主要介紹了十、Echart圖表之 dataZoom區(qū)域縮放基本使用與配置大全。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

?? 作者主頁(yè)：??仙女不下凡??

?? 前言介紹：以下??內(nèi)容是我個(gè)人對(duì)于該技術(shù)的總結(jié)，如有不足與錯(cuò)誤敬請(qǐng)指正！

??Echart官網(wǎng)地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line

?? 歡迎點(diǎn)贊?? 收藏? 留言?? 相關(guān)賬號(hào)會(huì)持續(xù)發(fā)布關(guān)于文章Echart的相關(guān)文章歡迎持續(xù)關(guān)注！

?參照官網(wǎng)，dataZoom 中有兩個(gè)對(duì)象如下，這樣寫是因?yàn)?code>type分為 鼠標(biāo)滾動(dòng) 與 滑動(dòng)條 兩種縮放方式，當(dāng)type類型不同時(shí)，里面配置的屬性略有不同，請(qǐng)根據(jù)實(shí)際需求使用
十、Echart圖表之 dataZoom區(qū)域縮放基本使用與配置大全

dataZoom: [
  { type: 'inside' }, // 用哪種方式就寫哪個(gè)對(duì)象
  { type: 'slider' }
]

?其他屬性請(qǐng)參考一下內(nèi)容

/有值的都可視為默認(rèn)值/
dataZoom: [
  {
    type: 'inside', // 類型, inside表示鼠標(biāo)滾動(dòng)進(jìn)行縮放
    id: '', 
    disabled: false, // 是否停止組件的功能
    xAxisIndex: '', // 組件控制的 x軸, 默認(rèn)全部
    yAxisIndex: '', // 組件控制的 y軸
    radiusAxisIndex: '', // 組件控制的 radius軸
    angleAxisIndex: '', // 組件控制的 angle軸
    filterMode: '', // 可選值filter/weakFilter/empty/none，詳解如下
    start: 100, // 數(shù)據(jù)窗口范圍的起始百分比。范圍是：0~100, 表示0%~100%同下
    end: 100, // 數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是：0~100
    startValue: '', // 范圍的起始數(shù)值，若設(shè)置了inside.start則失效
    endValue: '', // 范圍的結(jié)束數(shù)值，若設(shè)置了inside.end則失效
    minSpan: 100, // 限制窗口大小的最小值（百分比值），取值范圍是0~100，設(shè)置inside.minValueSpan則失效
    maxSpan: 100, // 限制窗口大小的最小值（百分比值），取值范圍是0~100，設(shè)置inside.maxValueSpan則失效
    minValueSpan: '', // 用于限制窗口大小的最小值, 若時(shí)間軸上可設(shè)置為：3600*24*1000*5[時(shí)間軸接收的都是時(shí)間戳]表示5天,  在類目軸上可以設(shè)置為5表示5個(gè)類目
    maxValueSpan: '', // 用于限制窗口大小的最大值，用法同上
    orient: '', // 布局方式是橫還是豎，可選值horizontal[水平]/vertical[豎直]
    zoomLock: false, // 是否鎖定選擇區(qū)域的大小，若設(shè)置為true則鎖定選擇區(qū)域的大小，也就是說(shuō)，只能平移，不能縮放
    throttle: 100, // 設(shè)置觸發(fā)視圖刷新的頻率。單位為毫秒（ms）
    rangeMode: '', // 詳解如下
    zoomOnMouseWheel: true, // 觸發(fā)方式, 可選值true[直接鼠標(biāo)滾輪觸發(fā)，默認(rèn)]/false[滾輪不能觸發(fā)]/shift[按住shift和滾輪觸發(fā)]/ctrl[參考shift]/alt[參考shift]
    moveOnMouseMove: true, // 觸發(fā)數(shù)據(jù)窗口平移方式，可選值參考zoomOnMouseWheel
    moveOnMouseWheel: true, // 觸發(fā)數(shù)據(jù)窗口平移方式，可選值參考zoomOnMouseWheel
    preventDefaultMouseMove: true // 是否阻止mousemove事件的默認(rèn)行為。
  }, {
    type: 'slider', // 類型, slider表示滑動(dòng)條進(jìn)行縮放
    id: '',
    show: true, //是否顯示組件, 若設(shè)置為false，不顯示組件，但數(shù)據(jù)過(guò)濾功能還存在
    backgroundColor: 'rgba(47,69,84,0)', // 組件的背景顏色
    // 數(shù)據(jù)陰影的樣式
    dataBackground: {
      // 陰影線條樣式
      lineStyle: {
        color: '#d2dbee',
        width: 0.5,
        type: 'solid', // 可選值solid/solid/dotted
        dashOffset: 0, // 設(shè)置虛線的偏移量
        cap: 'butt', // 指定線段末端繪制方式，可選值butt[方形結(jié)束]/round[圓形結(jié)束]/square[以方形結(jié)束，但增加了一個(gè)寬度和線段相同，高度是線段厚度一半的矩形區(qū)域]
        join: 'bevel',
        miterLimit: 10,
        shadowBlur: 10, // 模糊大小
        shadowColor: 'rgba(0, 0, 0, 0.5)', //陰影顏色
        shadowOffsetX: 0 , //陰影水平方向上的偏移距離
        shadowOffsetY: 0 , //陰影垂直方向上的偏移距離
        opacity: 1
      },
      //陰影的填充樣式
      areaStyle: {
        color: 'd2dbee',
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 0 ,
        shadowOffsetY: 0 ,
        opacity: 0.2
      }
    }, 
    //選中部分?jǐn)?shù)據(jù)陰影的樣式
    selectedDataBackground: {
      lineStyle: {}, //同上dataBackground，選中部分陰影的線條樣式
      areaStyle: {}, //同上dataBackground，選中部分陰影的填充樣式
    },
    fillerColor: '', // rgba(167,183,204,0.4)
    borderColor: '#ddd', // #ddd
    handleIcon: '', // 
    handleSize: '100%', // 
    //兩側(cè)縮放手柄的樣式配置
    handleStyle: {
      color: '#fff', //圖形顏色
      borderColor: '#ACB8D1', //圖形描邊顏色
      borderWidth: 0, //描邊線寬
      borderType: 'solid', //描邊類型，可選類型solid/dashed/dotted/number數(shù)字/[number, number]數(shù)組
      borderDashOffset: 0, //設(shè)置虛線的偏移量, 可搭配borderType指定dash array實(shí)現(xiàn)靈活的虛線效果
      borderCap: 'butt', //指定線段末端的繪制方式，可選值butt[方形結(jié)束]/round[圓形結(jié)束]/square[以方形結(jié)束，增加了一個(gè)寬度和線段相同，高度是線段厚度一半的矩形區(qū)域]
      borderJoin: 'bevel', //設(shè)置2個(gè)長(zhǎng)度不為0的相連部分如何連接在一起，可選值bevel/round/miter
      borderMiterLimit: 10 , //設(shè)置斜接面限制比例, 當(dāng)borderJoin為miter時(shí)有效
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.5)',
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      opacity: 1
    },
    moveHandleIcon: '', //移動(dòng)手柄中間的 icon
    moveHandleSize: 7, //移動(dòng)手柄的尺寸高度
    //移動(dòng)手柄的樣式配置
    moveHandleStyle: {
      color: '#D2DBEE',
      borderColor: '#000',
      borderWidth: 0,
      borderType: 'solid',
      borderDashOffset: 0,
      borderCap: 'butt',
      borderJoin: 'bevel',
      borderMiterLimit: 10,
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.5)',
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      opacity: 1
    },
    labelPrecision: 'auto', //顯示label小數(shù)精度
    labelFormatter: '', //顯示label格式化器, 例labelFormatter: function (value) { return 'aaa' + value + 'bbb' }
    showDetail: true, //是否顯示detail，即拖拽時(shí)候顯示詳細(xì)數(shù)值信息
    showDataShadow: 'auto', //是否在 dataZoom-silder 組件中顯示數(shù)據(jù)陰影。數(shù)據(jù)陰影可以簡(jiǎn)單地反應(yīng)數(shù)據(jù)走勢(shì)
    realtime: true, //拖動(dòng)時(shí)，是否實(shí)時(shí)更新系列的視圖。如果設(shè)置為 false，則只在拖拽結(jié)束的時(shí)候更新
    textStyle: {
      color: '#333', //文字顏色
      fontStyle: 'normal', //文字字體風(fēng)格, 可選值normal/italic/oblique
      fontWeight: 'normal', //文字字體粗細(xì), 可選值'normal/bold/bolder/lighter/100|200|300|400...
      fontFamily: 'sans-serif',
      fontSize: 12,
      lineHeight: '',
      width: '',
      height: '',
      textBorderColor: '', //文字本身描邊顏色
      textBorderWidth: '', //文字本身描邊寬度
      textBorderType: 'solid', //文字本身描邊類型，可選類型solid/dashed/dotted/number數(shù)字/[number, number]數(shù)組
      textBorderDashOffset: 0, //設(shè)置虛線的偏移量，可搭配textBorderType指定dash array實(shí)現(xiàn)靈活的虛線效果
      textShadowColor: 'transparent', //文字本身陰影顏色
      textShadowBlur: 0, //文字本身陰影長(zhǎng)度
      textShadowOffsetX: 0, //文字本身陰影X偏移
      textShadowOffsetY: 0, //文字本身陰影Y偏移
      overflow: 'none', //文字超出寬度是否截?cái)嗷蛘邠Q行。配置width時(shí)有效
      ellipsis: '...' //在overflow配置為'truncate'的時(shí)候，可以通過(guò)該屬性配置末尾顯示的文本
    },
    xAxisIndex: '', // 同inside
    yAxisIndex: '', // 同inside
    radiusAxisIndex: '', // 同inside
    angleAxisIndex: '', // 同inside
    filterMode: 'filter', // 同inside
    start: 100, // 同inside
    end: 100, // 同inside
    startValue: '', // 同inside
    endValue: '', // 同inside
    minSpan: 100, // 同inside
    maxSpan: 100, // 同inside
    minValueSpan: '', // 同inside
    maxValueSpan: '', // 同inside
    orient: '', // 同inside
    zoomLock: false, // 同inside
    throttle: 100, // 同inside
    rangeMode: '', // 同inside, 詳解如下
    zlevel: 0, // 所有圖形的zlevel值
    z: 2,
    left: 'auto', //dataZoom-slider組件離容器左側(cè)距離
    top: '', //dataZoom-slider組件離容器上側(cè)距離
    right: '', //dataZoom-slider組件離容器右側(cè)距離
    bottom: '', //dataZoom-slider組件離容器下側(cè)距離
    width: '', //dataZoom-slider組件的寬度。豎直布局默認(rèn)30px，水平布局默認(rèn)自適應(yīng)。比left和right優(yōu)先級(jí)高
    height: '', //dataZoom-slider組件的高度。水平布局默認(rèn)30px，豎直布局默認(rèn)自適應(yīng)。比top和bottom優(yōu)先級(jí)高。
    brushSelect: true, //是否開啟刷選功能
    //刷選框樣式設(shè)置
    brushStyle: {
      color: 'rgba(135,175,274,0.15)',
      borderColor: '#000',
      borderWidth: 0,
      borderType: 'solid',
      borderDashOffset: 0,
      borderCap: 'butt',
      borderJoin: 'bevel',
      borderMiterLimit: 10,
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.5)',
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      opacity: 1,
    },
    //高亮樣式設(shè)置
    emphasis: {
      handleStyle: {
        color: 自適應(yīng),
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        borderDashOffset: 0,
        borderCap: 'butt',
        borderJoin: 'bevel',
        borderMiterLimit: 10,
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        opacity: 1
      },
      moveHandleStyle: {
        color: 自適應(yīng),
        borderColor: '#000',
        borderWidth: 0,
        borderType: 'solid',
        borderDashOffset: 0,
        borderCap: 'butt',
        borderJoin: 'bevel',
        borderMiterLimit: 10,
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        opacity: 1
      }
    }
  }
]

??解釋xAxisIndex、yAxisIndex、radiusAxisIndex、angleAxisIndex的含義及用法，以xAxisIndex為例

option: {
    xAxis: [
        {...}, // 第一個(gè) xAxis
        {...}, // 第二個(gè) xAxis
        {...}, // 第三個(gè) xAxis
        {...}  // 第四個(gè) xAxis
    ],
    dataZoom: [
        { // 第一個(gè) dataZoom 組件
            xAxisIndex: [0, 2] // 表示這個(gè) dataZoom 組件控制 第一個(gè) 和 第三個(gè) xAxis
        }, { // 第二個(gè) dataZoom 組件
            xAxisIndex: 3      // 表示這個(gè) dataZoom 組件控制 第四個(gè) xAxis
        }
    ]
}

?? dataZoom.filterMode詳解
filter：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被 過(guò)濾掉。即 會(huì) 影響其他軸的數(shù)據(jù)范圍。每個(gè)數(shù)據(jù)項(xiàng)，只要有一個(gè)維度在數(shù)據(jù)窗口外，整個(gè)數(shù)據(jù)項(xiàng)就會(huì)被過(guò)濾掉。
weakFilter：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被 過(guò)濾掉。即 會(huì) 影響其他軸的數(shù)據(jù)范圍。每個(gè)數(shù)據(jù)項(xiàng)，只有當(dāng)全部維度都在數(shù)據(jù)窗口同側(cè)外部，整個(gè)數(shù)據(jù)項(xiàng)才會(huì)被過(guò)濾掉。
empty：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)，被 設(shè)置為空。即 不會(huì) 影響其他軸的數(shù)據(jù)范圍。
none：不過(guò)濾數(shù)據(jù)，只改變數(shù)軸范圍。

??推薦相關(guān)文章：Echart圖表之基本使用及配置項(xiàng)

??推薦相關(guān)文章：Echart圖表之 title配置項(xiàng)大全

??推薦相關(guān)文章：Echart圖表之顏色color配置項(xiàng)大全

??推薦相關(guān)文章：Echart圖表之 X軸（xAxis）與 Y軸（yAxis）配置項(xiàng)大全

??推薦相關(guān)文章：Echart圖表之 legend圖例組件配置項(xiàng)大全

??推薦相關(guān)文章：Echart圖表之 tooltip提示框組件配置項(xiàng)大全

??推薦相關(guān)文章：Echart圖表之 toolbox工具欄組件配置項(xiàng)大全

??推薦相關(guān)文章：Echart圖表之 series盒須圖（箱體圖）基本使用與配置大全

??推薦相關(guān)文章：Echart圖表之 grid組件用法直角坐標(biāo)系內(nèi)繪圖網(wǎng)格基本使用與配置大全文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-410839.html

到了這里，關(guān)于十、Echart圖表之 dataZoom區(qū)域縮放基本使用與配置大全的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！