合肥学校网站建设,焦作市网站建设哪家好,wordpress文章详细页,wordpress主题添加后台设置选项dataZoom-slider
滑动条型数据区域缩放组件#xff08;dataZoomInside#xff09;
滑动条型数据区域缩放组件提供了数据缩略图显示#xff0c;缩放#xff0c;刷选#xff0c;拖拽#xff0c;点击快速定位等数据筛选的功能。下图显示了该组件可交互部分 所有属性
data…dataZoom-slider
滑动条型数据区域缩放组件dataZoomInside
滑动条型数据区域缩放组件提供了数据缩略图显示缩放刷选拖拽点击快速定位等数据筛选的功能。下图显示了该组件可交互部分 所有属性
dataZoom-slider. type slider
string
dataZoom-slider. id
string
组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
dataZoom-slider. show true 试一试
boolean
是否显示 组件。如果设置为 false不会显示但是数据过滤的功能还存在。
dataZoom-slider. backgroundColor rgba(47,69,84,0) 试一试
Color
组件的背景颜色。 dataZoom-slider. dataBackground
Object
数据阴影的样式。 dataZoom-slider.dataBackground. lineStyle
Object
阴影的线条样式
所有属性
{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity } dataZoom-slider.dataBackground. areaStyle
Object
阴影的填充样式
所有属性
{ color , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity } dataZoom-slider. selectedDataBackground
Object 从 v5.0.0 开始支持 选中部分数据阴影的样式。 dataZoom-slider.selectedDataBackground. lineStyle
Object
选中部分阴影的线条样式
所有属性
{ color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity } dataZoom-slider.selectedDataBackground. areaStyle
Object
选中部分阴影的填充样式
所有属性
{ color , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
dataZoom-slider. fillerColor rgba(167,183,204,0.4) 试一试
Color
选中范围的填充颜色。
dataZoom-slider. borderColor #d2dbee 试一试
Color
边框颜色。
dataZoom-slider. borderRadius 3 试一试
numberArray
圆角半径单位px支持传入数组分别指定 4 个圆角半径。 如:
borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] //顺时针左上右上右下左下dataZoom-slider. handleIcon 试一试
string
两侧缩放手柄的 icon 形状支持路径字符串默认为
M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z可以通过 image://url 设置为图片其中 URL 为图片的链接或者 dataURI。
URL 为图片链接例如
image://http://example.website/a/b.pngURL 为 dataURI 例如
image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7可以通过 path:// 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式不用担心因为缩放而产生锯齿或模糊而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如
path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8zdataZoom-slider. handleSize 100% 试一试
numberstring
控制手柄的尺寸可以是像素大小也可以是相对于 dataZoom 组件宽度的百分比默认跟 dataZoom 宽度相同。 dataZoom-slider. handleStyle
Object
两侧缩放手柄的样式配置。 dataZoom-slider.handleStyle. color #fff 试一试
Color
图形的颜色。 支持使用rgb(255,255,255)rgba(255,255,255,1)#fff等方式设置为纯色也支持设置为渐变色和纹理填充具体见option.color dataZoom-slider.handleStyle. borderColor #ACB8D1 试一试
Color
图形的描边颜色。支持的颜色格式同 color不支持回调函数。 dataZoom-slider.handleStyle. borderWidth 试一试
number
描边线宽。为 0 时无描边。 dataZoom-slider.handleStyle. borderType solid 试一试
stringnumberArray
描边类型。
可选
soliddasheddotted
自 v5.0.0 开始也可以是 number 或者 number 数组用以指定线条的 dash array配合 borderDashOffset 可实现更灵活的虚线效果。
例如
{borderType: [5, 10],borderDashOffset: 5
}dataZoom-slider.handleStyle. borderDashOffset 试一试
number 从 v5.0.0 开始支持 用于设置虚线的偏移量可搭配 borderType 指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。 dataZoom-slider.handleStyle. borderCap butt 试一试
string 从 v5.0.0 开始支持 用于指定线段末端的绘制方式可以是
butt: 线段末端以方形结束。round: 线段末端以圆形结束。square: 线段末端以方形结束但是增加了一个宽度和线段相同高度是线段厚度一半的矩形区域。
默认值为 butt。 更多详情可以参考 MDN lineCap。 dataZoom-slider.handleStyle. borderJoin bevel 试一试
string 从 v5.0.0 开始支持 用于设置2个长度不为0的相连部分线段圆弧曲线如何连接在一起的属性长度为0的变形部分其指定的末端和控制点在同一位置会被忽略。
可以是
bevel: 在相连部分的末端填充一个额外的以三角形为底的区域 每个部分都有各自独立的矩形拐角。round: 通过填充一个额外的圆心在相连部分末端的扇形绘制拐角的形状。 圆角的半径是线段的宽度。miter: 通过延伸相连部分的外边缘使其相交于一点形成一个额外的菱形区域。这个设置可以通过 borderMiterLimit 属性看到效果。
默认值为 bevel。 更多详情可以参考 MDN lineJoin。 dataZoom-slider.handleStyle. borderMiterLimit 10 试一试
number 从 v5.0.0 开始支持 用于设置斜接面限制比例。只有当 borderJoin 为 miter 时 borderMiterLimit 才有效。
默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。
更多详情可以参考 MDN miterLimit。 dataZoom-slider.handleStyle. shadowBlur 试一试
number
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例
{shadowColor: rgba(0, 0, 0, 0.5),shadowBlur: 10
}dataZoom-slider.handleStyle. shadowColor 试一试
Color
阴影颜色。支持的格式同color。 dataZoom-slider.handleStyle. shadowOffsetX 试一试
number
阴影水平方向上的偏移距离。 dataZoom-slider.handleStyle. shadowOffsetY 试一试
number
阴影垂直方向上的偏移距离。 dataZoom-slider.handleStyle. opacity 1 试一试
number
图形透明度。支持从 0 到 1 的数字为 0 时不绘制该图形。
dataZoom-slider. moveHandleIcon 试一试
string 从 v5.0.0 开始支持 移动手柄中间的 icon支持路径字符串默认为
M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z可以通过 image://url 设置为图片其中 URL 为图片的链接或者 dataURI。
URL 为图片链接例如
image://http://example.website/a/b.pngURL 为 dataURI 例如
image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7可以通过 path:// 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式不用担心因为缩放而产生锯齿或模糊而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如
path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8zdataZoom-slider. moveHandleSize 7 试一试
number 从 v5.0.0 开始支持 移动手柄的尺寸高度。 dataZoom-slider. moveHandleStyle
Object 从 v5.0.0 开始支持 移动手柄的样式配置。 dataZoom-slider.moveHandleStyle. color #D2DBEE 试一试
Color
图形的颜色。 支持使用rgb(255,255,255)rgba(255,255,255,1)#fff等方式设置为纯色也支持设置为渐变色和纹理填充具体见option.color dataZoom-slider.moveHandleStyle. borderColor #000 试一试
Color
图形的描边颜色。支持的颜色格式同 color不支持回调函数。 dataZoom-slider.moveHandleStyle. borderWidth 试一试
number
描边线宽。为 0 时无描边。 dataZoom-slider.moveHandleStyle. borderType solid 试一试
stringnumberArray
描边类型。
可选
soliddasheddotted
自 v5.0.0 开始也可以是 number 或者 number 数组用以指定线条的 dash array配合 borderDashOffset 可实现更灵活的虚线效果。
例如
{borderType: [5, 10],borderDashOffset: 5
}dataZoom-slider.moveHandleStyle. borderDashOffset 试一试
number 从 v5.0.0 开始支持 用于设置虚线的偏移量可搭配 borderType 指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。 dataZoom-slider.moveHandleStyle. borderCap butt 试一试
string 从 v5.0.0 开始支持 用于指定线段末端的绘制方式可以是
butt: 线段末端以方形结束。round: 线段末端以圆形结束。square: 线段末端以方形结束但是增加了一个宽度和线段相同高度是线段厚度一半的矩形区域。
默认值为 butt。 更多详情可以参考 MDN lineCap。 dataZoom-slider.moveHandleStyle. borderJoin bevel 试一试
string 从 v5.0.0 开始支持 用于设置2个长度不为0的相连部分线段圆弧曲线如何连接在一起的属性长度为0的变形部分其指定的末端和控制点在同一位置会被忽略。
可以是
bevel: 在相连部分的末端填充一个额外的以三角形为底的区域 每个部分都有各自独立的矩形拐角。round: 通过填充一个额外的圆心在相连部分末端的扇形绘制拐角的形状。 圆角的半径是线段的宽度。miter: 通过延伸相连部分的外边缘使其相交于一点形成一个额外的菱形区域。这个设置可以通过 borderMiterLimit 属性看到效果。
默认值为 bevel。 更多详情可以参考 MDN lineJoin。 dataZoom-slider.moveHandleStyle. borderMiterLimit 10 试一试
number 从 v5.0.0 开始支持 用于设置斜接面限制比例。只有当 borderJoin 为 miter 时 borderMiterLimit 才有效。
默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。
更多详情可以参考 MDN miterLimit。 dataZoom-slider.moveHandleStyle. shadowBlur 试一试
number
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例
{shadowColor: rgba(0, 0, 0, 0.5),shadowBlur: 10
}dataZoom-slider.moveHandleStyle. shadowColor 试一试
Color
阴影颜色。支持的格式同color。 dataZoom-slider.moveHandleStyle. shadowOffsetX 试一试
number
阴影水平方向上的偏移距离。 dataZoom-slider.moveHandleStyle. shadowOffsetY 试一试
number
阴影垂直方向上的偏移距离。 dataZoom-slider.moveHandleStyle. opacity 0.7 试一试
number
图形透明度。支持从 0 到 1 的数字为 0 时不绘制该图形。
dataZoom-slider. labelPrecision auto 试一试
numberstring
显示label的小数精度。默认根据数据自动决定。
dataZoom-slider. labelFormatter
stringFunction
显示的label的格式化器。 如果为 string表示模板例如aaaa{value}bbbb其中{value}会被替换为实际的数值。 如果为 Function表示回调函数例如
/*** param {*} value 如果 axis.type 为 category则 value 为 axis.data 的 index。* 否则 value 是当前值。* param {strign} valueStr 内部格式化的结果。* return {string} 返回最终的label内容。*/
labelFormatter: function (value) {return aaa value bbb;
}dataZoom-slider. showDetail true 试一试
boolean
是否显示detail即拖拽时候显示详细数值信息。
dataZoom-slider. showDataShadow auto 试一试
string
是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
dataZoom-slider. realtime true 试一试
boolean
拖动时是否实时更新系列的视图。如果设置为 false则只在拖拽结束的时候更新。 dataZoom-slider. textStyle
Object dataZoom-slider.textStyle. color #333 试一试
Color
dataZoom 文字的颜色。 dataZoom-slider.textStyle. fontStyle normal 试一试
string
dataZoom 文字字体的风格。
可选
normalitalicoblique dataZoom-slider.textStyle. fontWeight normal 试一试
stringnumber
dataZoom 文字字体的粗细。
可选
normalboldbolderlighter100 | 200 | 300 | 400... dataZoom-slider.textStyle. fontFamily sans-serif 试一试
string
dataZoom 文字的字体系列。
还可以是 serif , monospace, Arial, Courier New, Microsoft YaHei, ... dataZoom-slider.textStyle. fontSize 12 试一试
number
dataZoom 文字的字体大小。 dataZoom-slider.textStyle. lineHeight 试一试
number
行高。
rich 中如果没有设置 lineHeight则会取父层级的 lineHeight。例如
{lineHeight: 56,rich: {a: {// 没有设置 lineHeight则 lineHeight 为 56}}
}dataZoom-slider.textStyle. width 试一试
number
文本显示宽度。 dataZoom-slider.textStyle. height 试一试
number
文本显示高度。 dataZoom-slider.textStyle. textBorderColor 试一试
Color
文字本身的描边颜色。 dataZoom-slider.textStyle. textBorderWidth 试一试
number
文字本身的描边宽度。 dataZoom-slider.textStyle. textBorderType solid 试一试
stringnumberArray
文字本身的描边类型。
可选
soliddasheddotted
自 v5.0.0 开始也可以是 number 或者 number 数组用以指定线条的 dash array配合 textBorderDashOffset 可实现更灵活的虚线效果。
例如
{textBorderType: [5, 10],textBorderDashOffset: 5
}dataZoom-slider.textStyle. textBorderDashOffset 试一试
number 从 v5.0.0 开始支持 用于设置虚线的偏移量可搭配 textBorderType 指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。 dataZoom-slider.textStyle. textShadowColor transparent 试一试
Color
文字本身的阴影颜色。 dataZoom-slider.textStyle. textShadowBlur 试一试
number
文字本身的阴影长度。 dataZoom-slider.textStyle. textShadowOffsetX 试一试
number
文字本身的阴影 X 偏移。 dataZoom-slider.textStyle. textShadowOffsetY 试一试
number
文字本身的阴影 Y 偏移。 dataZoom-slider.textStyle. overflow none 试一试
string
文字超出宽度是否截断或者换行。配置width时有效
truncate 截断并在末尾显示ellipsis配置的文本默认为...break 换行breakAll 换行跟break不同的是在英语等拉丁文中breakAll还会强制单词内换行 dataZoom-slider.textStyle. ellipsis ...
string
在overflow配置为truncate的时候可以通过该属性配置末尾显示的文本。
dataZoom-slider. xAxisIndex
numberArray
设置 dataZoom-slider 组件控制的 x轴即xAxis是直角坐标系中的概念参见 grid。
不指定时当 dataZoom-slider.orient 为 horizontal时默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值建议显式指定。
如果是 number 表示控制一个轴如果是 Array 表示控制多个轴。
例如有如下 ECharts option
option: {xAxis: [{...}, // 第一个 xAxis{...}, // 第二个 xAxis{...}, // 第三个 xAxis{...} // 第四个 xAxis],dataZoom: [{ // 第一个 dataZoom 组件xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis},{ // 第二个 dataZoom 组件xAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 xAxis}]
}dataZoom-slider. yAxisIndex
numberArray
设置 dataZoom-slider 组件控制的 y轴即yAxis是直角坐标系中的概念参见 grid。
不指定时当 dataZoom-slider.orient 为 vertical时默认控制和 dataZoom 平行的第一个 yAxis。但是不建议使用默认值建议显式指定。
如果是 number 表示控制一个轴如果是 Array 表示控制多个轴。
例如有如下 ECharts option
option: {yAxis: [{...}, // 第一个 yAxis{...}, // 第二个 yAxis{...}, // 第三个 yAxis{...} // 第四个 yAxis],dataZoom: [{ // 第一个 dataZoom 组件yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis},{ // 第二个 dataZoom 组件yAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 yAxis}]
}dataZoom-slider. radiusAxisIndex
numberArray
设置 dataZoom-slider 组件控制的 radius 轴即radiusAxis是直角坐标系中的概念参见 polar。
如果是 number 表示控制一个轴如果是 Array 表示控制多个轴。
例如有如下 ECharts option
option: {radiusAxis: [{...}, // 第一个 radiusAxis{...}, // 第二个 radiusAxis{...}, // 第三个 radiusAxis{...} // 第四个 radiusAxis],dataZoom: [{ // 第一个 dataZoom 组件radiusAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 radiusAxis},{ // 第二个 dataZoom 组件radiusAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 radiusAxis}]
}dataZoom-slider. angleAxisIndex
numberArray
设置 dataZoom-slider 组件控制的 angle 轴即angleAxis是直角坐标系中的概念参见 polar。
如果是 number 表示控制一个轴如果是 Array 表示控制多个轴。
例如有如下 ECharts option
option: {angleAxis: [{...}, // 第一个 angleAxis{...}, // 第二个 angleAxis{...}, // 第三个 angleAxis{...} // 第四个 angleAxis],dataZoom: [{ // 第一个 dataZoom 组件angleAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 angleAxis},{ // 第二个 dataZoom 组件angleAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 angleAxis}]
}dataZoom-slider. filterMode filter 试一试
string
dataZoom 的运行原理是通过 数据过滤 以及在内部设置轴的显示窗口来达到 数据窗口缩放 的效果。
数据过滤模式dataZoom.filterMode的设置不同效果也不同。
可选值为 filter当前数据窗口外的数据被 过滤掉。即 会 影响其他轴的数据范围。每个数据项只要有一个维度在数据窗口外整个数据项就会被过滤掉。 weakFilter当前数据窗口外的数据被 过滤掉。即 会 影响其他轴的数据范围。每个数据项只有当全部维度都在数据窗口同侧外部整个数据项才会被过滤掉。 empty当前数据窗口外的数据被 设置为空。即 不会 影响其他轴的数据范围。 none: 不过滤数据只改变数轴范围。
如何设置由用户根据场景和需求自己决定。经验来说 当『只有 X 轴 或 只有 Y 轴受 dataZoom 组件控制』时常使用 filterMode: filter这样能使另一个轴自适应过滤后的数值范围。 当『X 轴 Y 轴分别受 dataZoom 组件控制』时 如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』比如在『双数值轴散点图』中那么两个轴可都设为 filterMode: empty。 如果 X 轴为主Y 轴为辅比如在『柱状图』中需要『拖动 dataZoomX 改变 X 轴过滤柱子时Y 轴的范围也自适应剩余柱子的高度』『拖动 dataZoomY 改变 Y 轴过滤柱子时X 轴范围不受影响』那么就 X轴设为 filterMode: filterY 轴设为 filterMode: empty即主轴 filter辅轴 empty。
下面是个具体例子
option {dataZoom: [{id: dataZoomX,type: slider,xAxisIndex: [0],filterMode: filter},{id: dataZoomY,type: slider,yAxisIndex: [0],filterMode: empty}],xAxis: {type: value},yAxis: {type: value},series{type: bar,data: [// 第一列对应 X 轴第二列对应 Y 轴。[12, 24, 36],[90, 80, 70],[3, 9, 27],[1, 11, 111]]}
}上例中dataZoomX 的 filterMode 设置为 filter。于是假设当用户拖拽 dataZoomX不去动 dataZoomY导致其 valueWindow 变为 [2, 50] 时dataZoomX 对 series.data 的第一列进行遍历窗口外的整项去掉最终得到的 series.data 为
[// 第一列对应 X 轴第二列对应 Y 轴。[12, 24, 36],// [90, 80, 70] 整项被过滤掉因为 90 在 dataWindow 之外。[3, 9, 27]// [1, 11, 111] 整项被过滤掉因为 1 在 dataWindow 之外。
]过滤前series.data 中对应 Y 轴的值有 24、80、9、11过滤后只剩下 24 和 9那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示如果 Y 轴没有被设置 min、max 固定其显示范围的话。
所以filterMode: filter 的效果是过滤数据后使另外的轴也能自动适应当前数据的范围。
再从头来上例中 dataZoomY 的 filterMode 设置为 empty。于是假设当用户拖拽 dataZoomY不去动 dataZoomX导致其 dataWindow 变为 [10, 60] 时dataZoomY 对 series.data 的第二列进行遍历窗口外的值被设置为 empty 即替换为 NaN这样设置为空的项其所对应柱形在 X 轴还有占位只是不显示出来。最终得到的 series.data 为
[// 第一列对应 X 轴第二列对应 Y 轴。[12, 24, 36],[90, NaN, 70], // 设置为 empty (NaN)[3, NaN, 27], // 设置为 empty (NaN)[1, 11, 111]
]这时series.data 中对应于 X 轴的值仍然全部保留不受影响为 12、90、3、1。那么用户对 dataZoomY 的拖拽操作不会影响到 X 轴的范围。这样的效果对于离群点outlier过滤功能比较清晰。
如下面的例子 dataZoom-slider. start 试一试
number
数据窗口范围的起始百分比。范围是0 ~ 100。表示 0% ~ 100%。
dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。
关于坐标轴范围axis extent和 dataZoom-slider.start 的关系的更多信息请参见dataZoom-slider.rangeMode。
dataZoom-slider. end 100 试一试
number
数据窗口范围的结束百分比。范围是0 ~ 100。
dataZoom-slider.start 和 dataZoom-slider.end 共同用 百分比 的形式定义了数据窗口范围。
关于坐标轴范围axis extent和 dataZoom-slider.end 的关系的更多信息请参见dataZoom-slider.rangeMode。
dataZoom-slider. startValue
numberstringDate
数据窗口范围的起始数值。如果设置了 dataZoom-slider.start 则 startValue 失效。
dataZoom-slider.startValue 和 dataZoom-slider.endValue 共同用 绝对数值 的形式定义了数据窗口范围。
注意如果轴的类型为 category则 startValue 既可以设置为 axis.data 数组的 index也可以设置为数组值本身。 但是如果设置为数组值本身会在内部自动转化为数组的 index。
关于坐标轴范围axis extent和 dataZoom-slider.startValue 的关系的更多信息请参见dataZoom-slider.rangeMode。
dataZoom-slider. endValue
numberstringDate
数据窗口范围的结束数值。如果设置了 dataZoom-slider.end 则 endValue 失效。
dataZoom-slider.startValue 和 dataZoom-slider.endValue 共同用 绝对数值 的形式定义了数据窗口范围。
注意如果轴的类型为 category则 endValue 即可以设置为 axis.data 数组的 index也可以设置为数组值本身。 但是如果设置为数组值本身会在内部自动转化为数组的 index。
关于坐标轴范围axis extent和 dataZoom-slider.endValue 的关系的更多信息请参见dataZoom-slider.rangeMode。
dataZoom-slider. minSpan 试一试
number
用于限制窗口大小的最小值百分比值取值范围是 0 ~ 100。
如果设置了 dataZoom-slider.minValueSpan 则 minSpan 失效。
dataZoom-slider. maxSpan 试一试
number
用于限制窗口大小的最大值百分比值取值范围是 0 ~ 100。
如果设置了 dataZoom-slider.maxValueSpan 则 maxSpan 失效。
dataZoom-slider. minValueSpan
numberstringDate
用于限制窗口大小的最小值实际数值。
如在时间轴上可以设置为3600 * 24 * 1000 * 5 表示 5 天。 在类目轴上可以设置为 5 表示 5 个类目。
dataZoom-slider. maxValueSpan
numberstringDate
用于限制窗口大小的最大值实际数值。
如在时间轴上可以设置为3600 * 24 * 1000 * 5 表示 5 天。 在类目轴上可以设置为 5 表示 5 个类目。
dataZoom-slider. orient 试一试
string
布局方式是横还是竖。不仅是布局方式对于直角坐标系而言也决定了缺省情况控制横向数轴还是纵向数轴。
可选值为 horizontal水平。 vertical竖直。
dataZoom-slider. zoomLock 试一试
boolean
是否锁定选择区域或叫做数据窗口的大小。
如果设置为 true 则锁定选择区域的大小也就是说只能平移不能缩放。
dataZoom-slider. throttle 100 试一试
number
设置触发视图刷新的频率。单位为毫秒ms。
如果 animation 设为 true 且 animationDurationUpdate 大于 0可以保持 throttle 为默认值 100或者设置为大于 0 的值否则拖拽时有可能画面感觉卡顿。
如果 animation 设为 false 或者 animationDurationUpdate 设为 0且在数据量不大时拖拽时画面感觉卡顿可以把尝试把 throttle 设为 0 来改善。
dataZoom-slider. rangeMode
Array
形式为[rangeModeForStart, rangeModeForEnd]。
例如 rangeMode: [value, percent]表示 start 值取绝对数值end 取百分比。
每项可选值为value, percent
value 模式处于此模式下坐标轴范围axis extent总只会被dataZoom.startValue and dataZoom.endValue 决定而不管数据是多少以及不管axis.min 和 axis.max 怎么设置。percent 模式处于此模式下100 代表 100% 的 [dMin, dMax]。这里 dMin 表示如果 axis.min 设置了就是 axis.min否则是 data.extent[0]dMax 表示如果 axis.max 设置了就是 axis.max否则是 data.extent[1]。[dMin, dMax] 乘以 percent 的结果得到坐标轴范围axis extent。
默认情况下rangeMode 总是被自动设定。如果指定了 option.start/option.end 那么就设定为 percent如果指定了 option.startValue/option.endValue 那么就设定为 value。以及当用户用不用操作触发视图改变时rangeMode 也可能会相应得变化如通过 toolbox.dataZoom 触发视图改变时rangeMode 会自动被设置为 value通过 dataZoom-inside 和 dataZoom-slider 触发视图改变时会自动被设置为 percent。
如果我们手动在 option 中设定了 rangeMode那么它只在 start 和 startValue 都设置了或者 end 和 endValue 都设置了才有意义。所以通常我们没必要在 option 中指定 rangeMode。
举例一个使用场景当我们使用动态数据时即周期性得通过 setOption 来改变数据如果 rangeMode 在 value 模式dataZoom 的窗口会一直保持在一个固定的值区间无论数据怎么改变添加了多少如果 rangeMode 在 percent 模式窗口会随着数据的添加而改变假设 axis.min 和 axis.max 没有被设置。
dataZoom-slider. zlevel
number
所有图形的 zlevel 值。
zlevel用于 Canvas 分层不同zlevel值的图形会放置在不同的 Canvas 中Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁例如有动画的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
dataZoom-slider. z 2
number
组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低而且不会创建新的 Canvas。
dataZoom-slider. left auto 试一试
stringnumber
dataZoom-slider组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值可以是像 20% 这样相对于容器高宽的百分比也可以是 left, center, right。
如果 left 的值为 left, center, right组件会根据相应的位置自动对齐。
dataZoom-slider. top auto 试一试
stringnumber
dataZoom-slider组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值可以是像 20% 这样相对于容器高宽的百分比也可以是 top, middle, bottom。
如果 top 的值为 top, middle, bottom组件会根据相应的位置自动对齐。
dataZoom-slider. right auto 试一试
stringnumber
dataZoom-slider组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值可以是像 20% 这样相对于容器高宽的百分比。
默认自适应。
dataZoom-slider. bottom auto 试一试
stringnumber
dataZoom-slider组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值可以是像 20% 这样相对于容器高宽的百分比。
默认自适应。
dataZoom-slider. width 试一试
stringnumber
dataZoom-slider 组件的宽度。竖直布局默认 30水平布局默认自适应。
比 left 和 right 优先级高。
dataZoom-slider. height 试一试
stringnumber
dataZoom-slider 组件的高度。水平布局默认 30竖直布局默认自适应。
比 top 和 bottom 优先级高。
dataZoom-slider. brushSelect true
boolean 从 v5.0.0 开始支持 是否开启刷选功能。在下图的 brush 区域你可以按住鼠标左键后框选出选中部分。 dataZoom-slider. brushStyle
Object 从 v5.0.0 开始支持 刷选框样式设置。 dataZoom-slider.brushStyle. color rgba(135,175,274,0.15) 试一试
Color
图形的颜色。 支持使用rgb(255,255,255)rgba(255,255,255,1)#fff等方式设置为纯色也支持设置为渐变色和纹理填充具体见option.color dataZoom-slider.brushStyle. borderColor #000 试一试
Color
图形的描边颜色。支持的颜色格式同 color不支持回调函数。 dataZoom-slider.brushStyle. borderWidth 试一试
number
描边线宽。为 0 时无描边。 dataZoom-slider.brushStyle. borderType solid 试一试
stringnumberArray
描边类型。
可选
soliddasheddotted
自 v5.0.0 开始也可以是 number 或者 number 数组用以指定线条的 dash array配合 borderDashOffset 可实现更灵活的虚线效果。
例如
{borderType: [5, 10],borderDashOffset: 5
}dataZoom-slider.brushStyle. borderDashOffset 试一试
number 从 v5.0.0 开始支持 用于设置虚线的偏移量可搭配 borderType 指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。 dataZoom-slider.brushStyle. borderCap butt 试一试
string 从 v5.0.0 开始支持 用于指定线段末端的绘制方式可以是
butt: 线段末端以方形结束。round: 线段末端以圆形结束。square: 线段末端以方形结束但是增加了一个宽度和线段相同高度是线段厚度一半的矩形区域。
默认值为 butt。 更多详情可以参考 MDN lineCap。 dataZoom-slider.brushStyle. borderJoin bevel 试一试
string 从 v5.0.0 开始支持 用于设置2个长度不为0的相连部分线段圆弧曲线如何连接在一起的属性长度为0的变形部分其指定的末端和控制点在同一位置会被忽略。
可以是
bevel: 在相连部分的末端填充一个额外的以三角形为底的区域 每个部分都有各自独立的矩形拐角。round: 通过填充一个额外的圆心在相连部分末端的扇形绘制拐角的形状。 圆角的半径是线段的宽度。miter: 通过延伸相连部分的外边缘使其相交于一点形成一个额外的菱形区域。这个设置可以通过 borderMiterLimit 属性看到效果。
默认值为 bevel。 更多详情可以参考 MDN lineJoin。 dataZoom-slider.brushStyle. borderMiterLimit 10 试一试
number 从 v5.0.0 开始支持 用于设置斜接面限制比例。只有当 borderJoin 为 miter 时 borderMiterLimit 才有效。
默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。
更多详情可以参考 MDN miterLimit。 dataZoom-slider.brushStyle. shadowBlur 试一试
number
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例
{shadowColor: rgba(0, 0, 0, 0.5),shadowBlur: 10
}dataZoom-slider.brushStyle. shadowColor 试一试
Color
阴影颜色。支持的格式同color。 dataZoom-slider.brushStyle. shadowOffsetX 试一试
number
阴影水平方向上的偏移距离。 dataZoom-slider.brushStyle. shadowOffsetY 试一试
number
阴影垂直方向上的偏移距离。 dataZoom-slider.brushStyle. opacity 1 试一试
number
图形透明度。支持从 0 到 1 的数字为 0 时不绘制该图形。 dataZoom-slider. emphasis
Object 从 v5.0.0 开始支持 高亮样式设置。 dataZoom-slider.emphasis. handleStyle
Object
所有属性
{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity } dataZoom-slider.emphasis. moveHandleStyle
Object dataZoom-slider.emphasis.moveHandleStyle. color 自适应 试一试
Color
图形的颜色。 支持使用rgb(255,255,255)rgba(255,255,255,1)#fff等方式设置为纯色也支持设置为渐变色和纹理填充具体见option.color dataZoom-slider.emphasis.moveHandleStyle. borderColor #000 试一试
Color
图形的描边颜色。支持的颜色格式同 color不支持回调函数。 dataZoom-slider.emphasis.moveHandleStyle. borderWidth 试一试
number
描边线宽。为 0 时无描边。 dataZoom-slider.emphasis.moveHandleStyle. borderType solid 试一试
stringnumberArray
描边类型。
可选
soliddasheddotted
自 v5.0.0 开始也可以是 number 或者 number 数组用以指定线条的 dash array配合 borderDashOffset 可实现更灵活的虚线效果。
例如
{borderType: [5, 10],borderDashOffset: 5
}dataZoom-slider.emphasis.moveHandleStyle. borderDashOffset 试一试
number 从 v5.0.0 开始支持 用于设置虚线的偏移量可搭配 borderType 指定 dash array 实现灵活的虚线效果。
更多详情可以参考 MDN lineDashOffset。 dataZoom-slider.emphasis.moveHandleStyle. borderCap butt 试一试
string 从 v5.0.0 开始支持 用于指定线段末端的绘制方式可以是
butt: 线段末端以方形结束。round: 线段末端以圆形结束。square: 线段末端以方形结束但是增加了一个宽度和线段相同高度是线段厚度一半的矩形区域。
默认值为 butt。 更多详情可以参考 MDN lineCap。 dataZoom-slider.emphasis.moveHandleStyle. borderJoin bevel 试一试
string 从 v5.0.0 开始支持 用于设置2个长度不为0的相连部分线段圆弧曲线如何连接在一起的属性长度为0的变形部分其指定的末端和控制点在同一位置会被忽略。
可以是
bevel: 在相连部分的末端填充一个额外的以三角形为底的区域 每个部分都有各自独立的矩形拐角。round: 通过填充一个额外的圆心在相连部分末端的扇形绘制拐角的形状。 圆角的半径是线段的宽度。miter: 通过延伸相连部分的外边缘使其相交于一点形成一个额外的菱形区域。这个设置可以通过 borderMiterLimit 属性看到效果。
默认值为 bevel。 更多详情可以参考 MDN lineJoin。 dataZoom-slider.emphasis.moveHandleStyle. borderMiterLimit 10 试一试
number 从 v5.0.0 开始支持 用于设置斜接面限制比例。只有当 borderJoin 为 miter 时 borderMiterLimit 才有效。
默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。
更多详情可以参考 MDN miterLimit。 dataZoom-slider.emphasis.moveHandleStyle. shadowBlur 试一试
number
图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
示例
{shadowColor: rgba(0, 0, 0, 0.5),shadowBlur: 10
}dataZoom-slider.emphasis.moveHandleStyle. shadowColor 试一试
Color
阴影颜色。支持的格式同color。 dataZoom-slider.emphasis.moveHandleStyle. shadowOffsetX 试一试
number
阴影水平方向上的偏移距离。 dataZoom-slider.emphasis.moveHandleStyle. shadowOffsetY 试一试
number
阴影垂直方向上的偏移距离。 dataZoom-slider.emphasis.moveHandleStyle. opacity 1 试一试
number
图形透明度。支持从 0 到 1 的数字为 0 时不绘制该图形。
