dataZoom

dataZoomx 组件 用于对数据进行区域缩放，从而能自由关注细节的数据信息，或者概览数据整体。

内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中。

滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条操作。

框选型数据区域缩放组件（dataZoomSelect）：全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。

    dataZoom 主要是对 数轴（axis） 进行操作。
    可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 或 dataZoom.radiusAxisIndex 或 dataZoom.angleAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
    dataZoom 组件可 同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。
    dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。
    数据过滤模式的设置不同，效果也不同，参见：dataZoom.filterMode。
    dataZoom 的数据窗口范围的设置，目前支持两种形式：
    百分比形式：参见 dataZoom.start 和 dataZoom.end。
    绝对数值形式：参见 dataZoom.startValue 和 dataZoom.endValue。

• dataZoom[i]-inside: 内置型数据区域缩放组件（dataZoomInside）
  • 所谓『内置』，即内置在坐标系中。
  • dataZoom[i]-inside.type: [ default: 'inside' ]
  • dataZoom[i]-inside.xAxisIndex:

      设置 dataZoom-inside 组件控制的 x轴（即xAxis，是直角坐标系中的概念，参见 grid）。
      不指定时，当 dataZoom-inside.orient 为 'horizontal'时，默认控制所有 xAxis。
      如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
    

    option: {

      xAxis: [
          {...}, // 第一个 xAxis
          {...}, // 第二个 xAxis
          {...}, // 第三个 xAxis
          {...}  // 第四个 xAxis
      ],
      dataZoom: [
          { // 第一个 dataZoom 组件
              xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
          },
          { // 第二个 dataZoom 组件
              xAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 xAxis
          }
      ]
    

    }
  • dataZoom[i]-inside.yAxisIndex:

      设置 dataZoom-inside 组件控制的 y轴（即yAxis，是直角坐标系中的概念，参见 grid）。
      不指定时，当 dataZoom-inside.orient 为 'vertical'时，默认控制所有 yAxis。
      如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
      option: {
          yAxis: [
              {...}, // 第一个 yAxis
              {...}, // 第二个 yAxis
              {...}, // 第三个 yAxis
              {...}  // 第四个 yAxis
          ],
          dataZoom: [
              { // 第一个 dataZoom 组件
                  yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis
              },
              { // 第二个 dataZoom 组件
                  yAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 yAxis
              }
          ]
      }
    

  • dataZoom[i]-inside.angleAxisIndex:

      设置 dataZoom-inside 组件控制的 角度轴（即angleAxis，是极坐标系中的概念，参见 polar）。
      不指定时，默认控制所有 angleAxis。
      如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
      option: {
          angleAxis: [
              {...}, // 第一个 angleAxis
              {...}, // 第二个 angleAxis
              {...}, // 第三个 angleAxis
              {...}  // 第四个 angleAxis
          ],
          dataZoom: [
              { // 第一个 dataZoom 组件
                  angleAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 angleAxis
              },
              { // 第二个 dataZoom 组件
                  angleAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 angleAxis
              }
          ]
      }
    

  • dataZoom[i]-inside.radiusAxisIndex:

      设置 dataZoom-inside 组件控制的 半径轴（即radiusAxis，是极坐标系中的概念，参见 polar）。
      不指定时，默认控制所有 radiusAxis。
      如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
      option: {
          radiusAxis: [
              {...}, // 第一个 radiusAxis
              {...}, // 第二个 radiusAxis
              {...}, // 第三个 radiusAxis
              {...}  // 第四个 radiusAxis
          ],
          dataZoom: [
              { // 第一个 dataZoom 组件
                  radiusAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 radiusAxis
              },
              { // 第二个 dataZoom 组件
                  radiusAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 radiusAxis
              }
          ]
      }
    

  • dataZoom[i]-inside.filterMode: dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。 数据过滤模式的设置不同，效果也不同。

      可选值为：
      'filter'
      数据窗口外的数据，被 过滤掉。这个配置项是最常用的。
      'empty'
      数据窗口外的数据，被 设置为空。 与『过滤掉』的区别是，『设置为空』的数据当空数据展示，也就是说还会占有位置。
    

  • dataZoom[i]-inside.start: 数据窗口范围的起始百分比。范围是：0 ~ 100。
  • dataZoom[i]-inside.end: 数据窗口范围的结束百分比。范围是：0 ~ 100。dataZoom-inside.start 和 dataZoom-inside.end 共同用 百分比 的形式定义了数据窗口范围。
  • dataZoom[i]-inside.startValue: 数据窗口范围的起始数值。定义了 startValue 时，则 dataZoom-inside.start 失效。
  • dataZoom[i]-inside.endValue: 数据窗口范围的结束数值。定义了 endValue 时，则 dataZoom-inside.end 失效。dataZoom-inside.startValue 和 dataZoom-inside.endValue 共同用 绝对数值 的形式定义了数据窗口范围。
  • dataZoom[i]-inside.orient: 布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。

      可选值为：
      'horizontal'：水平。
      'vertical'：竖直。
    

  • dataZoom[i]-inside.zoomLock: 是否锁定选择区域（或叫做数据窗口）的大小。 如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
  • dataZoom[i]-inside.throttle: [ default: 100 ] 设置触发视图刷新的频率。单位为毫秒（ms）。一般不需要更改这个值。
• dataZoom[i]-slider: 滑动条型数据区域缩放组件（dataZoomSlider）
  • dataZoom[i]-slider.type: [ default: 'slider' ]
  • dataZoom[i]-slider.show: 是否显示 组件。如果设置为false，不会显示，但是数据过滤的功能还存在。
  • dataZoom[i]-slider.backgroundColor: 组件的背景颜色。
  • dataZoom[i]-slider.dataBackgroundColor: 数据阴影的背景颜色。
  • dataZoom[i]-slider.fillerColor: 选中范围的填充颜色。
  • dataZoom[i]-slider.handleColor: 控制手柄的颜色。
  • dataZoom[i]-slider.handleSize: 控制手柄的尺寸。
  • dataZoom[i]-slider.labelPrecision: 显示label的小数精度。默认根据数据自动决定。
  • dataZoom[i]-slider.labelFormatter:

      显示的label的格式化器。
      如果为 string，表示模板，例如：aaaa{value}bbbb，其中{value}会被替换为实际的数值。
      如果为 Function，表示回调函数，例如：
      labelFormatter: function (value) {
          return 'aaa' + value + 'bbb'; // 返回最终的label内容。
      }
    

  • dataZoom[i]-slider.showDetail: 是否显示label，即拖拽时候显示详细数值信息。
  • dataZoom[i]-slider.showDataShadow: 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单得反应数据走势。
  • dataZoom[i]-slider.realtime: 拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。
  • dataZoom[i]-slider.textStyle:

      dataZoom[i]-slider.textStyle.color, dataZoom[i]-slider.textStyle.fontStyle,
      dataZoom[i]-slider.textStyle.fontWeight, dataZoom[i]-slider.textStyle.fontFamily,
      dataZoom[i]-slider.textStyle.fontSize
    

  • dataZoom[i]-slider.xAxisIndex:

      设置 dataZoom-slider 组件控制的 x轴（即xAxis，是直角坐标系中的概念，参见 grid）。
      不指定时，当 dataZoom-slider.orient 为 'horizontal'时，默认控制所有 xAxis。
      如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
      option: {
          xAxis: [
              {...}, // 第一个 xAxis
              {...}, // 第二个 xAxis
              {...}, // 第三个 xAxis
              {...}  // 第四个 xAxis
          ],
          dataZoom: [
              { // 第一个 dataZoom 组件
                  xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
              },
              { // 第二个 dataZoom 组件
                  xAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 xAxis
              }
          ]
      }
    

  • dataZoom[i]-slider.yAxisIndex: 设置 dataZoom-slider 组件控制的 y轴
  • dataZoom[i]-slider.angleAxisIndex: 设置 dataZoom-slider 组件控制的 角度轴
  • dataZoom[i]-slider.radiusAxisIndex: 设置 dataZoom-slider 组件控制的 半径轴
  • dataZoom[i]-slider.filterMode:

      [ default: 'filter' ]
      dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。
      数据过滤模式的设置不同，效果也不同。
      可选值为：
      'filter'
      数据窗口外的数据，被 过滤掉。这个配置项是最常用的。
      'empty'
      数据窗口外的数据，被 设置为空。 与『过滤掉』的区别是，『设置为空』的数据当空数据展示，也就是说还会占有位置。
    

  • dataZoom[i]-slider.start: 数据窗口范围的起始百分比。范围是：0 ~ 100。
  • dataZoom[i]-slider.end: 数据窗口范围的结束百分比。范围是：0 ~ 100。
  • dataZoom[i]-slider.startValue: 数据窗口范围的起始数值。定义了 startValue 时，则 dataZoom-slider.start 失效。
  • dataZoom[i]-slider.endValue: 数据窗口范围的结束数值。定义了 endValue 时，则 dataZoom-slider.end 失效。
  • dataZoom[i]-slider.orient: 布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。

      可选值为：
      'horizontal'：水平。
      'vertical'：竖直。
    

  • dataZoom[i]-slider.zoomLock:是否锁定选择区域（或叫做数据窗口）的大小。 如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
  • dataZoom[i]-slider.throttle: 设置触发视图刷新的频率。单位为毫秒（ms）。一般不需要更改这个值。
  • dataZoom[i]-slider.zlevel: 组件的所有图形的 zlevel 值。
  • dataZoom[i]-slider.z: 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
  • dataZoom[i]-slider.left: dataZoom-slider组件离容器左侧的距离。
  • dataZoom[i]-slider.top: dataZoom-slider组件离容器上侧的距离。
  • dataZoom[i]-slider.right: dataZoom-slider组件离容器右侧的距离。
  • dataZoom[i]-slider.bottom: dataZoom-slider组件离容器下侧的距离。