mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-14 17:01:14 +08:00
501 lines
45 KiB
JSON
501 lines
45 KiB
JSON
{
|
||
"id": {
|
||
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
|
||
},
|
||
"show": {
|
||
"desc": "\n\n<p>是否显示 组件。如果设置为 <code class=\"codespan\">false</code>，不会显示，但是数据过滤的功能还存在。</p>\n",
|
||
"uiControl": {
|
||
"type": "boolean",
|
||
"default": "true"
|
||
}
|
||
},
|
||
"backgroundColor": {
|
||
"desc": "\n\n<p>组件的背景颜色。</p>\n",
|
||
"uiControl": {
|
||
"type": "color",
|
||
"default": "rgba(47,69,84,0)"
|
||
}
|
||
},
|
||
"dataBackground": {
|
||
"desc": "<p>数据阴影的样式。</p>\n"
|
||
},
|
||
"dataBackground.lineStyle": {
|
||
"desc": "<p>阴影的线条样式</p>\n"
|
||
},
|
||
"dataBackground.lineStyle.color": {
|
||
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
||
"uiControl": {
|
||
"type": "color"
|
||
}
|
||
},
|
||
"dataBackground.lineStyle.width": {
|
||
"desc": "\n\n<p>线宽。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"value": "0.5",
|
||
"min": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"dataBackground.lineStyle.type": {
|
||
"desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n",
|
||
"uiControl": {
|
||
"type": "enum",
|
||
"default": "solid",
|
||
"options": "solid,dashed,dotted"
|
||
}
|
||
},
|
||
"dataBackground.lineStyle.shadowBlur": {
|
||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "",
|
||
"min": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"dataBackground.lineStyle.shadowColor": {
|
||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||
"uiControl": {
|
||
"type": "color",
|
||
"default": ""
|
||
}
|
||
},
|
||
"dataBackground.lineStyle.shadowOffsetX": {
|
||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"dataBackground.lineStyle.shadowOffsetY": {
|
||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"dataBackground.lineStyle.opacity": {
|
||
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "0.3",
|
||
"min": "0",
|
||
"max": "1",
|
||
"step": "0.01"
|
||
}
|
||
},
|
||
"dataBackground.areaStyle": {
|
||
"desc": "<p>阴影的填充样式</p>\n"
|
||
},
|
||
"dataBackground.areaStyle.color": {
|
||
"desc": "\n\n<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
||
"uiControl": {
|
||
"type": "color"
|
||
}
|
||
},
|
||
"dataBackground.areaStyle.shadowBlur": {
|
||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "",
|
||
"min": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"dataBackground.areaStyle.shadowColor": {
|
||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||
"uiControl": {
|
||
"type": "color",
|
||
"default": ""
|
||
}
|
||
},
|
||
"dataBackground.areaStyle.shadowOffsetX": {
|
||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"dataBackground.areaStyle.shadowOffsetY": {
|
||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"dataBackground.areaStyle.opacity": {
|
||
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "0.3",
|
||
"min": "0",
|
||
"max": "1",
|
||
"step": "0.01"
|
||
}
|
||
},
|
||
"fillerColor": {
|
||
"desc": "\n\n<p>选中范围的填充颜色。</p>\n",
|
||
"uiControl": {
|
||
"type": "color",
|
||
"default": "rgba(167,183,204,0.4)"
|
||
}
|
||
},
|
||
"borderColor": {
|
||
"desc": "\n\n<p>边框颜色。</p>\n",
|
||
"uiControl": {
|
||
"type": "color",
|
||
"default": "#ddd"
|
||
}
|
||
},
|
||
"handleIcon": {
|
||
"desc": "\n\n<p>手柄的 icon 形状，支持路径字符串，默认为：</p>\n<pre><code class=\"lang-js\">'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'\n</code></pre>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片，其中 URL 为图片的链接，或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如：</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如：</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如：</p>\n<pre><code>'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.8z'\n</code></pre><p>自定义 icon 见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=area-simple\" target=\"_blank\">示例 area-simple</a></p>\n",
|
||
"uiControl": {
|
||
"type": "icon"
|
||
}
|
||
},
|
||
"handleSize": {
|
||
"desc": "\n\n<p>控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。</p>\n",
|
||
"uiControl": {
|
||
"type": "percent",
|
||
"min": "0",
|
||
"step": "1",
|
||
"default": "100%"
|
||
}
|
||
},
|
||
"handleStyle": {
|
||
"desc": "<p>手柄的样式配置，见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=area-simple\" target=\"_blank\">示例 area-simple</a></p>\n"
|
||
},
|
||
"handleStyle.color": {
|
||
"desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
||
"uiControl": {
|
||
"type": "color"
|
||
}
|
||
},
|
||
"handleStyle.borderColor": {
|
||
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>，不支持回调函数。</p>\n",
|
||
"uiControl": {
|
||
"type": "color"
|
||
}
|
||
},
|
||
"handleStyle.borderWidth": {
|
||
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"value": "0",
|
||
"min": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"handleStyle.borderType": {
|
||
"desc": "\n\n<p>柱条的描边类型，默认为实线，支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n",
|
||
"uiControl": {
|
||
"type": "enum",
|
||
"default": "solid",
|
||
"options": "solid,dashed,dotted"
|
||
}
|
||
},
|
||
"handleStyle.shadowBlur": {
|
||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "",
|
||
"min": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"handleStyle.shadowColor": {
|
||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||
"uiControl": {
|
||
"type": "color",
|
||
"default": ""
|
||
}
|
||
},
|
||
"handleStyle.shadowOffsetX": {
|
||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"handleStyle.shadowOffsetY": {
|
||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"handleStyle.opacity": {
|
||
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "1",
|
||
"min": "0",
|
||
"max": "1",
|
||
"step": "0.01"
|
||
}
|
||
},
|
||
"labelPrecision": {
|
||
"desc": "\n\n<p>显示label的小数精度。默认根据数据自动决定。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"min": "0",
|
||
"step": "1"
|
||
}
|
||
},
|
||
"labelFormatter": {
|
||
"desc": "<p>显示的label的格式化器。</p>\n<ul>\n<li><p>如果为 <code class=\"codespan\">string</code>，表示模板，例如：<code class=\"codespan\">aaaa{value}bbbb</code>，其中<code class=\"codespan\">{value}</code>会被替换为实际的数值。</p>\n</li>\n<li><p>如果为 <code class=\"codespan\">Function</code>，表示回调函数，例如：</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">/**\n * @param {*} value 如果 axis.type 为 'category'，则 `value` 为 axis.data 的 index。\n * 否则 `value` 是当前值。\n * @param {strign} valueStr 内部格式化的结果。\n * @return {string} 返回最终的label内容。\n */\nlabelFormatter: function (value) {\n return 'aaa' + value + 'bbb';\n}\n</code></pre>\n"
|
||
},
|
||
"showDetail": {
|
||
"desc": "\n\n<p>是否显示detail，即拖拽时候显示详细数值信息。</p>\n",
|
||
"uiControl": {
|
||
"type": "boolean",
|
||
"default": "true"
|
||
}
|
||
},
|
||
"showDataShadow": {
|
||
"desc": "\n\n<p>是否在 <code class=\"codespan\">dataZoom-silder</code> 组件中显示数据阴影。数据阴影可以简单地反应数据走势。</p>\n",
|
||
"uiControl": {
|
||
"type": "boolean"
|
||
}
|
||
},
|
||
"realtime": {
|
||
"desc": "\n\n<p>拖动时，是否实时更新系列的视图。如果设置为 <code class=\"codespan\">false</code>，则只在拖拽结束的时候更新。</p>\n",
|
||
"uiControl": {
|
||
"type": "boolean",
|
||
"default": "true"
|
||
}
|
||
},
|
||
"textStyle.color": {
|
||
"desc": "\n\n<p>dataZoom 文字的颜色。</p>\n",
|
||
"uiControl": {
|
||
"type": "color",
|
||
"default": "#333"
|
||
}
|
||
},
|
||
"textStyle.fontStyle": {
|
||
"desc": "\n\n<p>dataZoom 文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
|
||
"uiControl": {
|
||
"type": "enum",
|
||
"default": "normal",
|
||
"options": "normal,italic,oblique"
|
||
}
|
||
},
|
||
"textStyle.fontWeight": {
|
||
"desc": "\n\n<p>dataZoom 文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
|
||
"uiControl": {
|
||
"type": "enum",
|
||
"default": "normal",
|
||
"options": "normal,bold,bolder,lighter"
|
||
}
|
||
},
|
||
"textStyle.fontFamily": {
|
||
"desc": "\n\n<p>dataZoom 文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n",
|
||
"uiControl": {
|
||
"type": "enum",
|
||
"default": "sans-serif",
|
||
"options": "sans-serif,serif,monospace,Arial,Courier New"
|
||
}
|
||
},
|
||
"textStyle.fontSize": {
|
||
"desc": "\n\n<p>dataZoom 文字的字体大小。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "12",
|
||
"min": "1",
|
||
"step": "1"
|
||
}
|
||
},
|
||
"textStyle.lineHeight": {
|
||
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"min": "0",
|
||
"step": "1",
|
||
"default": "12"
|
||
}
|
||
},
|
||
"textStyle.width": {
|
||
"desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||
},
|
||
"textStyle.height": {
|
||
"desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||
},
|
||
"textStyle.textBorderColor": {
|
||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||
"uiControl": {
|
||
"type": "color"
|
||
}
|
||
},
|
||
"textStyle.textBorderWidth": {
|
||
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"min": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"textStyle.textShadowColor": {
|
||
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
||
"uiControl": {
|
||
"type": "color",
|
||
"default": "#000"
|
||
}
|
||
},
|
||
"textStyle.textShadowBlur": {
|
||
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"min": "0",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"textStyle.textShadowOffsetX": {
|
||
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"textStyle.textShadowOffsetY": {
|
||
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"xAxisIndex": {
|
||
"desc": "<p>设置 <code class=\"codespan\">dataZoom-slider</code> 组件控制的 <code class=\"codespan\">x轴</code>（即<a href=\"#xAxis\">xAxis</a>，是直角坐标系中的概念，参见 <a href=\"#grid\">grid</a>）。</p>\n<p>不指定时，当 <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> 为 <code class=\"codespan\">'horizontal'</code>时，默认控制和 dataZoom 平行的第一个 <code class=\"codespan\">xAxis</code>。但是不建议使用默认值，建议显式指定。</p>\n<p>如果是 <code class=\"codespan\">number</code> 表示控制一个轴，如果是 <code class=\"codespan\">Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option：</p>\n<pre><code class=\"lang-javascript\">option: {\n xAxis: [\n {...}, // 第一个 xAxis\n {...}, // 第二个 xAxis\n {...}, // 第三个 xAxis\n {...} // 第四个 xAxis\n ],\n dataZoom: [\n { // 第一个 dataZoom 组件\n xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis\n },\n { // 第二个 dataZoom 组件\n xAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 xAxis\n }\n ]\n}\n</code></pre>\n"
|
||
},
|
||
"yAxisIndex": {
|
||
"desc": "<p>设置 <code class=\"codespan\">dataZoom-slider</code> 组件控制的 <code class=\"codespan\">y轴</code>（即<a href=\"#yAxis\">yAxis</a>，是直角坐标系中的概念，参见 <a href=\"#grid\">grid</a>）。</p>\n<p>不指定时，当 <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> 为 <code class=\"codespan\">'vertical'</code>时，默认控制和 dataZoom 平行的第一个 <code class=\"codespan\">yAxis</code>。但是不建议使用默认值，建议显式指定。</p>\n<p>如果是 <code class=\"codespan\">number</code> 表示控制一个轴，如果是 <code class=\"codespan\">Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option：</p>\n<pre><code class=\"lang-javascript\">option: {\n yAxis: [\n {...}, // 第一个 yAxis\n {...}, // 第二个 yAxis\n {...}, // 第三个 yAxis\n {...} // 第四个 yAxis\n ],\n dataZoom: [\n { // 第一个 dataZoom 组件\n yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis\n },\n { // 第二个 dataZoom 组件\n yAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 yAxis\n }\n ]\n}\n</code></pre>\n"
|
||
},
|
||
"radiusAxisIndex": {
|
||
"desc": "<p>设置 <code class=\"codespan\">dataZoom-slider</code> 组件控制的 <code class=\"codespan\">radius 轴</code>（即<a href=\"#radiusAxis\">radiusAxis</a>，是直角坐标系中的概念，参见 <a href=\"#polar\">polar</a>）。</p>\n<p>如果是 <code class=\"codespan\">number</code> 表示控制一个轴，如果是 <code class=\"codespan\">Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option：</p>\n<pre><code class=\"lang-javascript\">option: {\n radiusAxis: [\n {...}, // 第一个 radiusAxis\n {...}, // 第二个 radiusAxis\n {...}, // 第三个 radiusAxis\n {...} // 第四个 radiusAxis\n ],\n dataZoom: [\n { // 第一个 dataZoom 组件\n radiusAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 radiusAxis\n },\n { // 第二个 dataZoom 组件\n radiusAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 radiusAxis\n }\n ]\n}\n</code></pre>\n"
|
||
},
|
||
"angleAxisIndex": {
|
||
"desc": "<p>设置 <code class=\"codespan\">dataZoom-slider</code> 组件控制的 <code class=\"codespan\">angle 轴</code>（即<a href=\"#angleAxis\">angleAxis</a>，是直角坐标系中的概念，参见 <a href=\"#polar\">polar</a>）。</p>\n<p>如果是 <code class=\"codespan\">number</code> 表示控制一个轴，如果是 <code class=\"codespan\">Array</code> 表示控制多个轴。</p>\n<p>例如有如下 ECharts option：</p>\n<pre><code class=\"lang-javascript\">option: {\n angleAxis: [\n {...}, // 第一个 angleAxis\n {...}, // 第二个 angleAxis\n {...}, // 第三个 angleAxis\n {...} // 第四个 angleAxis\n ],\n dataZoom: [\n { // 第一个 dataZoom 组件\n angleAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 angleAxis\n },\n { // 第二个 dataZoom 组件\n angleAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 angleAxis\n }\n ]\n}\n</code></pre>\n"
|
||
},
|
||
"filterMode": {
|
||
"desc": "\n\n\n\n<p><code class=\"codespan\">dataZoom</code> 的运行原理是通过 <code class=\"codespan\">数据过滤</code> 以及在内部设置轴的显示窗口来达到 <code class=\"codespan\">数据窗口缩放</code> 的效果。</p>\n<p>数据过滤模式（<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>）的设置不同，效果也不同。</p>\n<p>可选值为：</p>\n<ul>\n<li><p>'filter'：当前数据窗口外的数据，被 <strong>过滤掉</strong>。即 <strong>会</strong> 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。</p>\n</li>\n<li><p>'weakFilter'：当前数据窗口外的数据，被 <strong>过滤掉</strong>。即 <strong>会</strong> 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。</p>\n</li>\n<li><p>'empty'：当前数据窗口外的数据，被 <strong>设置为空</strong>。即 <strong>不会</strong> 影响其他轴的数据范围。</p>\n</li>\n<li><p>'none': 不过滤数据，只改变数轴范围。</p>\n</li>\n</ul>\n<p>如何设置，由用户根据场景和需求自己决定。经验来说：</p>\n<ul>\n<li><p>当『只有 X 轴 或 只有 Y 轴受 <code class=\"codespan\">dataZoom</code> 组件控制』时，常使用 <code class=\"codespan\">filterMode: 'filter'</code>，这样能使另一个轴自适应过滤后的数值范围。</p>\n</li>\n<li><p>当『X 轴 Y 轴分别受 <code class=\"codespan\">dataZoom</code> 组件控制』时：</p>\n<ul>\n<li><p>如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』，比如在『双数值轴散点图』中，那么两个轴可都设为 <code class=\"codespan\">fiterMode: 'empty'</code>。</p>\n</li>\n<li><p>如果 X 轴为主，Y 轴为辅，比如在『柱状图』中，需要『拖动 <code class=\"codespan\">dataZoomX</code> 改变 X 轴过滤柱子时，Y 轴的范围也自适应剩余柱子的高度』，『拖动 <code class=\"codespan\">dataZoomY</code> 改变 Y 轴过滤柱子时，X 轴范围不受影响』，那么就 X轴设为 <code class=\"codespan\">fiterMode: 'filter'</code>，Y 轴设为 <code class=\"codespan\">fiterMode: 'empty'</code>，即主轴 <code class=\"codespan\">'filter'</code>，辅轴 <code class=\"codespan\">'empty'</code>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>下面是个具体例子：</p>\n<pre><code class=\"lang-javascript\">option = {\n dataZoom: [\n {\n id: 'dataZoomX',\n type: 'slider',\n xAxisIndex: [0],\n filterMode: 'filter'\n },\n {\n id: 'dataZoomY',\n type: 'slider',\n yAxisIndex: [0],\n filterMode: 'empty'\n }\n ],\n xAxis: {type: 'value'},\n yAxis: {type: 'value'},\n series{\n type: 'bar',\n data: [\n // 第一列对应 X 轴，第二列对应 Y 轴。\n [12, 24, 36],\n [90, 80, 70],\n [3, 9, 27],\n [1, 11, 111]\n ]\n }\n}\n</code></pre>\n<p>上例中，<code class=\"codespan\">dataZoomX</code> 的 <code class=\"codespan\">filterMode</code> 设置为 <code class=\"codespan\">'filter'</code>。于是，假设当用户拖拽 <code class=\"codespan\">dataZoomX</code>（不去动 <code class=\"codespan\">dataZoomY</code>）导致其 valueWindow 变为 <code class=\"codespan\">[2, 50]</code> 时，<code class=\"codespan\">dataZoomX</code> 对 series.data 的第一列进行遍历，窗口外的整项去掉，最终得到的 series.data 为：</p>\n<pre><code class=\"lang-javascript\">[\n // 第一列对应 X 轴，第二列对应 Y 轴。\n [12, 24, 36],\n // [90, 80, 70] 整项被过滤掉，因为 90 在 dataWindow 之外。\n [3, 9, 27]\n // [1, 11, 111] 整项被过滤掉，因为 1 在 dataWindow 之外。\n]\n</code></pre>\n<p>过滤前，series.data 中对应 Y 轴的值有 <code class=\"codespan\">24</code>、<code class=\"codespan\">80</code>、<code class=\"codespan\">9</code>、<code class=\"codespan\">11</code>，过滤后，只剩下 <code class=\"codespan\">24</code> 和 <code class=\"codespan\">9</code>，那么 Y 轴的显示范围就会自动改变以适应剩下的这两个值的显示（如果 Y 轴没有被设置 <code class=\"codespan\">min</code>、<code class=\"codespan\">max</code> 固定其显示范围的话）。</p>\n<p>所以，<code class=\"codespan\">filterMode: 'filter'</code> 的效果是：过滤数据后使另外的轴也能自动适应当前数据的范围。</p>\n<p>再从头来，上例中 <code class=\"codespan\">dataZoomY</code> 的 <code class=\"codespan\">filterMode</code> 设置为 <code class=\"codespan\">'empty'</code>。于是，假设当用户拖拽 <code class=\"codespan\">dataZoomY</code>（不去动 <code class=\"codespan\">dataZoomX</code>）导致其 dataWindow 变为 <code class=\"codespan\">[10, 60]</code> 时，<code class=\"codespan\">dataZoomY</code> 对 series.data 的第二列进行遍历，窗口外的值被设置为 empty （即替换为 NaN，这样设置为空的项，其所对应柱形，在 X 轴还有占位，只是不显示出来）。最终得到的 series.data 为：</p>\n<pre><code class=\"lang-javascript\">[\n // 第一列对应 X 轴，第二列对应 Y 轴。\n [12, 24, 36],\n [90, NaN, 70], // 设置为 empty (NaN)\n [3, NaN, 27], // 设置为 empty (NaN)\n [1, 11, 111]\n]\n</code></pre>\n<p>这时，series.data 中对应于 X 轴的值仍然全部保留不受影响，为 <code class=\"codespan\">12</code>、<code class=\"codespan\">90</code>、<code class=\"codespan\">3</code>、<code class=\"codespan\">1</code>。那么用户对 <code class=\"codespan\">dataZoomY</code> 的拖拽操作不会影响到 X 轴的范围。这样的效果，对于离群点（outlier）过滤功能，比较清晰。</p>\n<p>如下面的例子：</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n\n\n\n\n",
|
||
"uiControl": {
|
||
"type": "enum",
|
||
"options": "filter,weakFilter,empty,none",
|
||
"default": "filter"
|
||
}
|
||
},
|
||
"start": {
|
||
"desc": "\n\n<p>数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> 和 <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> 共同用 <strong>百分比</strong> 的形式定义了数据窗口范围。</p>\n<p>关于坐标轴范围（axis extent）和 <code class=\"codespan\">dataZoom-slider.start</code> 的关系的更多信息，请参见：<a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"min": "0",
|
||
"max": "100",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"end": {
|
||
"desc": "\n\n<p>数据窗口范围的结束百分比。范围是：0 ~ 100。</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> 和 <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> 共同用 <strong>百分比</strong> 的形式定义了数据窗口范围。</p>\n<p>关于坐标轴范围（axis extent）和 <code class=\"codespan\">dataZoom-slider.end</code> 的关系的更多信息，请参见：<a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"min": "0",
|
||
"max": "100",
|
||
"default": "100",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"startValue": {
|
||
"desc": "<p>数据窗口范围的起始数值。如果设置了 <a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> 则 <code class=\"codespan\">startValue</code> 失效。</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> 和 <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> 共同用 <strong>绝对数值</strong> 的形式定义了数据窗口范围。</p>\n<p>注意，如果轴的类型为 <code class=\"codespan\">category</code>，则 <code class=\"codespan\">startValue</code> 既可以设置为 <code class=\"codespan\">axis.data</code> 数组的 <code class=\"codespan\">index</code>，也可以设置为数组值本身。\n但是如果设置为数组值本身，会在内部自动转化为数组的 index。</p>\n<p>关于坐标轴范围（axis extent）和 <code class=\"codespan\">dataZoom-slider.startValue</code> 的关系的更多信息，请参见：<a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>。</p>\n"
|
||
},
|
||
"endValue": {
|
||
"desc": "<p>数据窗口范围的结束数值。如果设置了 <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> 则 <code class=\"codespan\">endValue</code> 失效。</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> 和 <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> 共同用 <strong>绝对数值</strong> 的形式定义了数据窗口范围。</p>\n<p>注意，如果轴的类型为 <code class=\"codespan\">category</code>，则 <code class=\"codespan\">endValue</code> 即可以设置为 <code class=\"codespan\">axis.data</code> 数组的 <code class=\"codespan\">index</code>，也可以设置为数组值本身。\n但是如果设置为数组值本身，会在内部自动转化为数组的 index。</p>\n<p>关于坐标轴范围（axis extent）和 <code class=\"codespan\">dataZoom-slider.endValue</code> 的关系的更多信息，请参见：<a href=\"#dataZoom-slider.rangeMode\">dataZoom-slider.rangeMode</a>。</p>\n"
|
||
},
|
||
"minSpan": {
|
||
"desc": "\n\n<p>用于限制窗口大小的最小值（百分比值），取值范围是 <code class=\"codespan\">0</code> ~ <code class=\"codespan\">100</code>。</p>\n<p>如果设置了 <a href=\"#dataZoom-slider.minValueSpan\">dataZoom-slider.minValueSpan</a> 则 <code class=\"codespan\">minSpan</code> 失效。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"min": "0",
|
||
"max": "100",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"maxSpan": {
|
||
"desc": "\n\n<p>用于限制窗口大小的最大值（百分比值），取值范围是 <code class=\"codespan\">0</code> ~ <code class=\"codespan\">100</code>。</p>\n<p>如果设置了 <a href=\"#dataZoom-slider.maxValueSpan\">dataZoom-slider.maxValueSpan</a> 则 <code class=\"codespan\">maxSpan</code> 失效。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"min": "0",
|
||
"max": "100",
|
||
"step": "0.5"
|
||
}
|
||
},
|
||
"minValueSpan": {
|
||
"desc": "<p>用于限制窗口大小的最小值（实际数值）。</p>\n<p>如在时间轴上可以设置为：<code class=\"codespan\">3600 * 24 * 1000 * 5</code> 表示 5 天。\n在类目轴上可以设置为 <code class=\"codespan\">5</code> 表示 5 个类目。</p>\n"
|
||
},
|
||
"maxValueSpan": {
|
||
"desc": "<p>用于限制窗口大小的最大值（实际数值）。</p>\n<p>如在时间轴上可以设置为：<code class=\"codespan\">3600 * 24 * 1000 * 5</code> 表示 5 天。\n在类目轴上可以设置为 <code class=\"codespan\">5</code> 表示 5 个类目。</p>\n"
|
||
},
|
||
"orient": {
|
||
"desc": "\n\n<p>布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。</p>\n<p>可选值为：</p>\n<ul>\n<li><p><code class=\"codespan\">'horizontal'</code>：水平。</p>\n</li>\n<li><p><code class=\"codespan\">'vertical'</code>：竖直。</p>\n</li>\n</ul>\n",
|
||
"uiControl": {
|
||
"type": "enum",
|
||
"options": "horizontal,vertical"
|
||
}
|
||
},
|
||
"zoomLock": {
|
||
"desc": "\n\n<p>是否锁定选择区域（或叫做数据窗口）的大小。</p>\n<p>如果设置为 <code class=\"codespan\">true</code> 则锁定选择区域的大小，也就是说，只能平移，不能缩放。</p>\n",
|
||
"uiControl": {
|
||
"type": "boolean"
|
||
}
|
||
},
|
||
"throttle": {
|
||
"desc": "\n\n<p>设置触发视图刷新的频率。单位为毫秒（ms）。</p>\n<p>如果 <a href=\"#animation\">animation</a> 设为 <code class=\"codespan\">true</code> 且 <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> 大于 <code class=\"codespan\">0</code>，可以保持 <code class=\"codespan\">throttle</code> 为默认值 <code class=\"codespan\">100</code>（或者设置为大于 <code class=\"codespan\">0</code> 的值），否则拖拽时有可能画面感觉卡顿。</p>\n<p>如果 <a href=\"#animation\">animation</a> 设为 <code class=\"codespan\">false</code> 或者 <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> 设为 <code class=\"codespan\">0</code>，且在数据量不大时，拖拽时画面感觉卡顿，可以把尝试把 <code class=\"codespan\">throttle</code> 设为 <code class=\"codespan\">0</code> 来改善。</p>\n",
|
||
"uiControl": {
|
||
"type": "number",
|
||
"default": "100",
|
||
"min": "0",
|
||
"step": "20"
|
||
}
|
||
},
|
||
"rangeMode": {
|
||
"desc": "<p>形式为：<code class=\"codespan\">[rangeModeForStart, rangeModeForEnd]</code>。</p>\n<p>例如 <code class=\"codespan\">rangeMode: ['value', 'percent']</code>，表示 start 值取绝对数值，end 取百分比。</p>\n<p>每项可选值为：<code class=\"codespan\">'value'</code>, <code class=\"codespan\">'percent'</code></p>\n<ul>\n<li><code class=\"codespan\">'value'</code> 模式：处于此模式下，坐标轴范围（axis extent）总只会被<code class=\"codespan\">dataZoom.startValue</code> and <code class=\"codespan\">dataZoom.endValue</code> 决定，而不管数据是多少，以及不管，<code class=\"codespan\">axis.min</code> 和 <code class=\"codespan\">axis.max</code> 怎么设置。</li>\n<li><code class=\"codespan\">'percent'</code> 模式：处于此模式下，<code class=\"codespan\">100</code> 代表 100% 的 <code class=\"codespan\">[dMin, dMax]</code>。这里 <code class=\"codespan\">dMin</code> 表示，如果 <code class=\"codespan\">axis.min</code> 设置了就是 <code class=\"codespan\">axis.min</code>，否则是 <code class=\"codespan\">data.extent[0]</code>；<code class=\"codespan\">dMax</code> 表示，如果 <code class=\"codespan\">axis.max</code> 设置了就是 <code class=\"codespan\">axis.max</code>，否则是 <code class=\"codespan\">data.extent[1]</code>。<code class=\"codespan\">[dMin, dMax]</code> 乘以 percent 的结果得到坐标轴范围（axis extent）。</li>\n</ul>\n<p>默认情况下，<code class=\"codespan\">rangeMode</code> 总是被自动设定。如果指定了 <code class=\"codespan\">option.start</code>/<code class=\"codespan\">option.end</code> 那么就设定为 <code class=\"codespan\">'percent'</code>，如果指定了 <code class=\"codespan\">option.startValue</code>/<code class=\"codespan\">option.endValue</code> 那么就设定为 <code class=\"codespan\">'value'</code>。以及当用户用不用操作触发视图改变时，<code class=\"codespan\">rangeMode</code> 也可能会相应得变化（如，通过 <code class=\"codespan\">toolbox.dataZoom</code> 触发视图改变时，<code class=\"codespan\">rangeMode</code> 会自动被设置为 <code class=\"codespan\">value</code>，通过 <code class=\"codespan\">dataZoom-inside</code> 和 <code class=\"codespan\">dataZoom-slider</code> 触发视图改变时，会自动被设置为 <code class=\"codespan\">'percent'</code>）。</p>\n<p>如果我们手动在 <code class=\"codespan\">option</code> 中设定了 <code class=\"codespan\">rangeMode</code>，那么它只在 <code class=\"codespan\">start</code> 和 <code class=\"codespan\">startValue</code> 都设置了或者 <code class=\"codespan\">end</code> 和 <code class=\"codespan\">endValue</code> 都设置了才有意义。所以通常我们没必要在 <code class=\"codespan\">option</code> 中指定 <code class=\"codespan\">rangeMode</code>。</p>\n<p>举例一个使用场景：当我们使用动态数据时（即，周期性得通过 <code class=\"codespan\">setOption</code> 来改变数据），如果 <code class=\"codespan\">rangeMode</code> 在 <code class=\"codespan\">'value</code>' 模式，<code class=\"codespan\">dataZoom</code> 的窗口会一直保持在一个固定的值区间，无论数据怎么改变添加了多少；如果 <code class=\"codespan\">rangeMode</code> 在 <code class=\"codespan\">'percent'</code> 模式，窗口会随着数据的添加而改变（假设 <code class=\"codespan\">axis.min</code> 和 <code class=\"codespan\">axis.max</code> 没有被设置）。</p>\n"
|
||
},
|
||
"zlevel": {
|
||
"desc": "<p>所有图形的 zlevel 值。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层，不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n"
|
||
},
|
||
"z": {
|
||
"desc": "<p>组件的所有图形的<code class=\"codespan\">z</code>值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n<p><code class=\"codespan\">z</code>相比<code class=\"codespan\">zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>\n"
|
||
},
|
||
"left": {
|
||
"desc": "\n\n<p>dataZoom-slider组件离容器左侧的距离。</p>\n<p><code class=\"codespan\">left</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>。</p>\n<p>如果 <code class=\"codespan\">left</code> 的值为<code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>，组件会根据相应的位置自动对齐。</p>\n",
|
||
"uiControl": {
|
||
"type": "percent",
|
||
"default": "0%"
|
||
}
|
||
},
|
||
"top": {
|
||
"desc": "\n\n<p>dataZoom-slider组件离容器上侧的距离。</p>\n<p><code class=\"codespan\">top</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>。</p>\n<p>如果 <code class=\"codespan\">top</code> 的值为<code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>，组件会根据相应的位置自动对齐。</p>\n",
|
||
"uiControl": {
|
||
"type": "percent",
|
||
"default": "0%"
|
||
}
|
||
},
|
||
"right": {
|
||
"desc": "\n\n<p>dataZoom-slider组件离容器右侧的距离。</p>\n<p><code class=\"codespan\">right</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n",
|
||
"uiControl": {
|
||
"type": "percent",
|
||
"default": "0%"
|
||
}
|
||
},
|
||
"bottom": {
|
||
"desc": "\n\n<p>dataZoom-slider组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n",
|
||
"uiControl": {
|
||
"type": "percent",
|
||
"default": "0%"
|
||
}
|
||
}
|
||
} |