• dataZoom 详细参数


     1 dataZoom:[ //区域缩放 
     2 { 
     3   id: 'dataZoomX', 
     4   show:true, //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。 
     5   backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色 
     6   type: 'slider', //slider表示有滑动块的,inside表示内置的 
     7   dataBackground:{ //数据阴影的样式。 
     8     lineStyle:mylineStyle, //阴影的线条样式 
     9     areaStyle:myareaStyle, //阴影的填充样式 
    10   }, 
    11   fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。 
    12   borderColor:"#ddd", //边框颜色。 
    13   filterMode: 'filter', //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。 
    14           //'weakFilter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只有当全部维度都在数据窗口同侧外部,整个数据项才会被过滤掉。 
    15           //'empty':当前数据窗口外的数据,被 设置为空。即 不会 影响其他轴的数据范围。 
    16           //'none': 不过滤数据,只改变数轴范围。 
    17   xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 
    18   yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 
    19   radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 
    20   angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 
    21   start: 30, //数据窗口范围的起始百分比,表示30% 
    22   end: 70, //数据窗口范围的结束百分比,表示70% 
    23   startValue:10, //数据窗口范围的起始数值 
    24   endValue:100, //数据窗口范围的结束数值。 
    25   orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。 
    26   zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 
    27   则锁定选择区域的大小,也就是说,只能平移,不能缩放。 
    28   throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。 
    29   zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。 
    30   moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。 
    31   left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%' 
    32   top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%' 
    33   right:"auto", //组件离容器右侧的距离,'20%' 
    34   bottom:"auto", //组件离容器下侧的距离,'20%' 
    35 
    36 }, 
    37 { 
    38   id: 'dataZoomY', 
    39   type: 'inside', 
    40   filterMode: 'empty', 
    41   disabled:false, //是否停止组件的功能。 
    42   xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴 
    43   yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴 
    44   radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴 
    45   angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴 
    46   start: 30, //数据窗口范围的起始百分比,表示30% 
    47   end: 70, //数据窗口范围的结束百分比,表示70% 
    48   startValue:10, //数据窗口范围的起始数值 
    49   endValue:100, //数据窗口范围的结束数值。 
    50   orient:"horizontal", //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。 
    51   zoomLock:false, //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。 
    52   throttle:100, //设置触发视图刷新的频率。单位为毫秒(ms)。 
    53   zoomOnMouseWheel:true, //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。 
    54   moveOnMouseMove:true, //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。 
    55 } 
    56 ]
  • 相关阅读:
    oracle学习笔记(十五) PL/SQL语法结构以及使用
    Jquery1
    DOM2
    DOM
    JS的使用
    登录
    数据库操作是sql的操作1
    数据库2_sqlHelper
    数据库1数据库常用指令
    C# 基础
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/echartsdatazoom.html
Copyright © 2020-2023  润新知