dataZoom:[ //区域缩放
{
  id: 'dataZoomX',
  show:true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。
  backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
  type: 'slider', //slider表示有滑动块的,inside表示内置的
  dataBackground:{ //数据阴影的样式。
    lineStyle:mylineStyle, //阴影的线条样式
    areaStyle:myareaStyle, //阴影的填充样式
  },
  fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
  borderColor:"#ddd", //边框颜色。
  filterMode: 'filter', //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。
          //'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。
          //'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。
          //'none': 不过滤数据,只改变数轴范围。
  xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
  yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
  radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
  angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
  start: 30, //数据窗口范围的起始百分比,表示30%
  end: 70, //数据窗口范围的结束百分比,表示70%
  startValue:10, //数据窗口范围的起始数值
  endValue:100, //数据窗口范围的结束数值。
  orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
  zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true
  则锁定选择区域的大小,也就是说,只能平移,不能缩放。
  throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。
  zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
  moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
  left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
  top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
  right:"auto", //组件离容器右侧的距离,'20%'
  bottom:"auto", //组件离容器下侧的距离,'20%'

},
{
  id: 'dataZoomY',
  type: 'inside',
  filterMode: 'empty',
  disabled:false, //是否停止组件的功能。
  xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
  yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
  radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
  angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
  start: 30, //数据窗口范围的起始百分比,表示30%
  end: 70, //数据窗口范围的结束百分比,表示70%
  startValue:10, //数据窗口范围的起始数值
  endValue:100, //数据窗口范围的结束数值。
  orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
  zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
  throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。
  zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
  moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
}
]

dataZoom 详细参数的更多相关文章

  1. jQuery实现商品详情 详细参数页面切换

    利用index实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. $_SERVER的详细参数整理下

    PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行 脚本的文件名,与 document roo ...

  3. JQuery中Ajax详细参数使用案例

    JQuery中Ajax详细参数使用案例 参考文档:http://www.jb51.net/shouce/jquery1.82/ 参考文档:http://jquery.cuishifeng.cn/jQu ...

  4. 传奇身上装备升级系列脚本,以及UPGRADEITEMEX 脚本的详细参数解释

    UPGRADEITEMEX 脚本的详细参数解释如下: UPGRADEITEMEX 物品位置(0-12) 属性位置(0-14) 成功机率(0-100) 点数机率(0-255) 是否破碎(0,1) 物品位 ...

  5. 【原】rsync的详细参数

    rsync参数的具体解释如下: -v, --verbose 详细模式输出-q, --quiet 精简输出模式-c, --checksum 打开校验开关,强制对文件传输进行校验-a, --archive ...

  6. Liunx 环境下vsftpd的三种实现方法(超详细参数)

    以下文章介绍Liunx 环境下vsftpd的三种实现方法 ftp://vsftpd.beasts.org/users/cevans/vsftpd-2.0.3.tar.gz,目前已经到2.0.3版本.假 ...

  7. WebRTC内置debug工具,详细参数解读 chrome://webrtc-internals/

    为了确保这篇文章所写内容尽可能的准确,我决定请来Philipp Hancke来作为此篇文章的共同作者. 当你想要找到你WebRTC产品中的问题时,webrtc-internals是一个非常棒的工具,因 ...

  8. docker inspect获取详细参数的两种方法

    docker inspect xx 返回的是一个json格式的数据 以下为部分返回值 [ { "Id": "706813b0da107c4d43c61e3db9da908 ...

  9. Iphone各个型号机型的详细参数,尺寸和dpr以及像素

    1.iPhone尺寸规格 2.单位inch(英吋) 1 inch = 2.54cm = 25.4mm 3.iPhone手机宽高 上表中的宽高(width/height)为手机的物理尺寸,包括显示屏和边 ...

随机推荐

  1. img和父容器之间有间隙的问题

    在前端开发中,经常遇到在一个img外面套div的时候,div的大小和img的大小并不一样,在底部会有一段空白. 代码如下: <div> <img src = ''imgs/1.jpg ...

  2. 《跟我学IDEA》三、实用配置(行号、提示、代码等)

    上一篇博文我们介绍了idea如何配置一个maven,git,tomcat等,这一篇我们来进行一些常用设置,这些也正是idea可爱之处,大大提高了开发的效率. 第一节:idea常用配置显示行数.显示方法 ...

  3. HTTPS加密流程超详解(一)前期准备

    0.前言 前一阵子想写一个HTTPS的嗅探工具,之前只是大致了解SSL/TLS协议的加密流程,真正上起手来一步一步分析发现还是有点复杂的,于是我参考了wireshark的源码以及各种RFC,弄清楚了S ...

  4. IDEA热部署(三)---jetty插件调试(转)

    我们在开发的时候习惯对于项目的框架进行分层,在idea中对于不同的层,我们使用module来进行划分,不同的module之间是通过maven来进行依赖的. 我们的项目结构是这样的,admin是我们的w ...

  5. springboot整合redis

    springboot-整合redis   springboot学习笔记-4 整合Druid数据源和使用@Cache简化redis配置 一.整合Druid数据源 Druid是一个关系型数据库连接池,是阿 ...

  6. DDOS学习笔记(《破坏之王-DDOS攻击与防范深度剖析》)

           最近花了点时间把<破坏之王-DDOS攻击与防范深度剖析>看了一遍,坦白来说,这本书比较浅显,可以说是入门书,当然对于我这种对DDOS一知半解的人来说,也是一本不错的书,起码我 ...

  7. HTML状态码大全(301,404,500等)

    HTML状态码大全(301,404,500等)HTML状态码大全(301,404,500等)HTML状态码大全(301,404,500等)HTML状态码大全(301,404,500等) 这些状态码被分 ...

  8. php--php调java接口验签

    <?php namespace Fmall_cloud\Model; use Think\Model; class DealJavaModel extends Model { /** * @ti ...

  9. JavaWeb之数据源连接池(2)---C3P0

    我们接着<JavaWeb之数据源连接池(1)---DBCP>继续介绍数据源连接池. 首先,在Web项目的WebContent--->WEB-INF--->lib文件夹中添加C3 ...

  10. BZOJ 4553 Tjoi2016&Heoi2016 序列

    Tjoi2016&Heoi2016序列 Description 佳媛姐姐过生日的时候,她的小伙伴从某宝上买了一个有趣的玩具送给他.玩具上有一个数列,数列中某些项的值 可能会变化,但同一个时刻最 ...