amis2/examples/components/EChartsEditor/option-parts/option.legend.json

1668 lines
101 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"type": {
"desc": "\n\n<p>图例的类型。可选值:</p>\n<ul>\n<li><code class=\"codespan\">&#39;plain&#39;</code>:普通图例。缺省就是普通图例。</li>\n<li><code class=\"codespan\">&#39;scroll&#39;</code>:可滚动翻页的图例。当图例数量较多时可以使用。</li>\n</ul>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n<p>当使用 <code class=\"codespan\">&#39;scroll&#39;</code> 时,使用这些设置进行细节配置:</p>\n<ul>\n<li><a href=\"#legend.scrollDataIndex\">legend.scrollDataIndex</a></li>\n<li><a href=\"#legend.pageButtonItemGap\">legend.pageButtonItemGap</a></li>\n<li><a href=\"#legend.pageButtonGap\">legend.pageButtonGap</a></li>\n<li><a href=\"#legend.pageButtonPosition\">legend.pageButtonPosition</a></li>\n<li><a href=\"#legend.pageFormatter\">legend.pageFormatter</a></li>\n<li><a href=\"#legend.pageIcons\">legend.pageIcons</a></li>\n<li><a href=\"#legend.pageIconColor\">legend.pageIconColor</a></li>\n<li><a href=\"#legend.pageIconInactiveColor\">legend.pageIconInactiveColor</a></li>\n<li><a href=\"#legend.pageIconSize\">legend.pageIconSize</a></li>\n<li><a href=\"#legend.pageTextStyle\">legend.pageTextStyle</a></li>\n<li><a href=\"#legend.animation\">legend.animation</a></li>\n<li><a href=\"#legend.animationDurationUpdate\">legend.animationDurationUpdate</a></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "plain,scroll"
}
},
"id": {
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
},
"show": {
"desc": "\n\n\n\n\n\n\n\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"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>图例组件离容器左侧的距离。</p>\n<p><code class=\"codespan\">left</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>。</p>\n<p>如果 <code class=\"codespan\">left</code> 的值为<code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>,组件会根据相应的位置自动对齐。</p>\n",
"uiControl": {
"type": "percent",
"default": "0%"
}
},
"top": {
"desc": "\n\n<p>图例组件离容器上侧的距离。</p>\n<p><code class=\"codespan\">top</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">&#39;20%&#39;</code> 这样相对于容器高宽的百分比,也可以是 <code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>。</p>\n<p>如果 <code class=\"codespan\">top</code> 的值为<code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>,组件会根据相应的位置自动对齐。</p>\n",
"uiControl": {
"type": "percent",
"default": "0%"
}
},
"right": {
"desc": "\n\n<p>图例组件离容器右侧的距离。</p>\n<p><code class=\"codespan\">right</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n",
"uiControl": {
"type": "percent",
"default": "0%"
}
},
"bottom": {
"desc": "\n\n<p>图例组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值,可以是像 <code class=\"codespan\">&#39;20%&#39;</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n",
"uiControl": {
"type": "percent",
"default": "0%"
}
},
"width": {
"desc": "\n\n<p>图例组件的宽度。默认自适应。</p>\n",
"uiControl": {
"type": "percent",
"default": "50%"
}
},
"height": {
"desc": "\n\n<p>图例组件的高度。默认自适应。</p>\n",
"uiControl": {
"type": "percent",
"default": "50%"
}
},
"orient": {
"desc": "\n\n<p>图例列表的布局朝向。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;horizontal&#39;</code></li>\n<li><code class=\"codespan\">&#39;vertical&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "vertical,horizontal",
"default": "horizontal"
}
},
"align": {
"desc": "\n\n<p>图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定,当组件的 <a href=\"#legend.left\">left</a> 值为 <code class=\"codespan\">&#39;right&#39;</code> 以及纵向布局(<a href=\"#legend.orient\">orient</a> 为 <code class=\"codespan\">&#39;vertical&#39;</code>)的时候为右对齐,即为 <code class=\"codespan\">&#39;right&#39;</code>。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;auto&#39;</code></li>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "auto,left,right",
"default": "auto"
}
},
"padding": {
"desc": "\n\n\n\n\n\n<p>图例内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。</p>\n<p>使用示例:</p>\n<pre><code class=\"lang-js\">// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n</code></pre>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"itemGap": {
"desc": "\n\n<p>图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。</p>\n",
"uiControl": {
"type": "number",
"default": "10",
"min": "0",
"step": "0.5"
}
},
"itemWidth": {
"desc": "\n\n<p>图例标记的图形宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "25",
"min": "0",
"step": "0.5"
}
},
"itemHeight": {
"desc": "\n\n<p>图例标记的图形高度。</p>\n",
"uiControl": {
"type": "number",
"default": "14",
"min": "0",
"step": "0.5"
}
},
"symbolKeepAspect": {
"desc": "\n\n<p>如果图标(可能来自系列的 <code class=\"codespan\">symbol</code> 或用户自定义的 <code class=\"codespan\">legend.data.icon</code>)是 <code class=\"codespan\">path://</code> 的形式,是否在缩放时保持该图形的长宽比。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"formatter": {
"desc": "<p>用来格式化图例文本,支持字符串模板和回调函数两种形式。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">// 使用字符串模板,模板变量为图例名称 {name}\nformatter: &#39;Legend {name}&#39;\n// 使用回调函数\nformatter: function (name) {\n return &#39;Legend &#39; + name;\n}\n</code></pre>\n"
},
"selectedMode": {
"desc": "\n\n<p>图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 <code class=\"codespan\">false</code> 关闭。</p>\n<p>除此之外也可以设成 <code class=\"codespan\">&#39;single&#39;</code> 或者 <code class=\"codespan\">&#39;multiple&#39;</code> 使用单选或者多选模式。</p>\n",
"uiControl": {
"type": "boolean",
"options": "true,false,single,multiple"
}
},
"inactiveColor": {
"desc": "\n\n<p>图例关闭时的颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#ccc"
}
},
"selected": {
"desc": "<p>图例选中状态表。</p>\n<p>示例:</p>\n<pre><code>selected: {\n // 选中&#39;系列1&#39;\n &#39;系列1&#39;: true,\n // 不选中&#39;系列2&#39;\n &#39;系列2&#39;: false\n}\n</code></pre>"
},
"textStyle": {
"desc": "<p>图例的公用文本样式。</p>\n"
},
"textStyle.color": {
"desc": "\n\n<p>文字的颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#333"
}
},
"textStyle.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"textStyle.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</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>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"textStyle.fontSize": {
"desc": "\n\n<p>文字的字体大小。</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.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL\n // 或者图片的 dataURI\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"textStyle.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"textStyle.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"textStyle.padding": {
"desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"textStyle.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"textStyle.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"textStyle.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"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"
}
},
"textStyle.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"textStyle.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"textStyle.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"textStyle.rich": {
"desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"textStyle.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"textStyle.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"textStyle.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"textStyle.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"textStyle.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"textStyle.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"textStyle.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"textStyle.rich.<style_name>.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.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL\n // 或者图片的 dataURI\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"textStyle.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"textStyle.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"textStyle.rich.<style_name>.padding": {
"desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"textStyle.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"textStyle.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.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\">&#39;100%&#39;</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.rich.<style_name>.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.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"textStyle.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"textStyle.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"textStyle.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"tooltip": {
"desc": "<p>图例的 tooltip 配置,配置项同 <a href=\"#tooltip\">tooltip</a>。默认不显示,可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip如下示例</p>\n<pre><code class=\"lang-js\">legend: {\n formatter: function (name) {\n return echarts.format.truncateText(name, 40, &#39;14px Microsoft Yahei&#39;, &#39;…&#39;);\n },\n tooltip: {\n show: true\n }\n}\n</code></pre>\n"
},
"icon": {
"desc": "\n\n<p>图例项的 icon。</p>\n<p>ECharts 提供的标记类型包括</p>\n<p><code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>可以通过 <code class=\"codespan\">&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code class=\"codespan\">&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>",
"uiControl": {
"type": "icon"
}
},
"data": {
"desc": "<p>图例的数据数组。数组项通常为一个字符串,每一项代表一个系列的 <code class=\"codespan\">name</code>(如果是<a href=\"#series-pie\">饼图</a>,也可以是饼图单个数据的 <code class=\"codespan\">name</code>。图例组件会自动根据对应系列的图形标记symbol来绘制自己的颜色和标记特殊字符串 <code class=\"codespan\">&#39;&#39;</code>(空字符串)或者 <code class=\"codespan\">&#39;\\n&#39;</code>(换行字符串)用于图例的换行。</p>\n<p>如果 <code class=\"codespan\">data</code> 没有被指定,会自动从当前系列中获取。多数系列会取自 <a href=\"#series.name\">series.name</a> 或者 <a href=\"#series.encode\">series.encode</a> 的 <code class=\"codespan\">seriesName</code> 所指定的维度。如 <a href=\"#series-pie\">饼图</a> and <a href=\"#series-funnel\">漏斗图</a> 等会取自 series.data 中的 name。</p>\n<p>如果要设置单独一项的样式,也可以把该项写成配置项对象。此时必须使用 <code class=\"codespan\">name</code> 属性对应表示系列的 <code class=\"codespan\">name</code>。</p>\n<p>示例</p>\n<pre><code>data: [{\n name: &#39;系列1&#39;,\n // 强制设置图形为圆。\n icon: &#39;circle&#39;,\n // 设置文本为红色\n textStyle: {\n color: &#39;red&#39;\n }\n}]\n</code></pre>"
},
"data.name": {
"desc": "<p>图例项的名称,应等于某系列的<code class=\"codespan\">name</code>值(如果是饼图,也可以是饼图单个数据的 <code class=\"codespan\">name</code>)。</p>\n"
},
"data.icon": {
"desc": "<p>图例项的 icon。</p>\n<p>ECharts 提供的标记类型包括</p>\n<p><code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;roundRect&#39;</code>, <code class=\"codespan\">&#39;triangle&#39;</code>, <code class=\"codespan\">&#39;diamond&#39;</code>, <code class=\"codespan\">&#39;pin&#39;</code>, <code class=\"codespan\">&#39;arrow&#39;</code>, <code class=\"codespan\">&#39;none&#39;</code></p>\n<p>可以通过 <code class=\"codespan\">&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code class=\"codespan\">&#39;path://&#39;</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>&#39;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&#39;\n</code></pre>"
},
"data.textStyle": {
"desc": "<p>图例项的文本样式。</p>\n"
},
"backgroundColor": {
"desc": "\n\n<p>图例背景色,默认透明。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code> ,如果想要加上 alpha 通道,可以使用 RGBA比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code></p>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"borderColor": {
"desc": "\n\n<p>图例的边框颜色。支持的颜色格式同 backgroundColor。</p>\n",
"uiControl": {
"type": "color",
"default": "#ccc"
}
},
"borderWidth": {
"desc": "\n\n<p>图例的边框线宽。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"step": "0.5"
}
},
"borderRadius": {
"desc": "\n\n<p>圆角半径单位px支持传入数组分别指定 4 个圆角半径。\n如:</p>\n<pre><code>borderRadius: 5, // 统一设置四个角的圆角大小\nborderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)\n</code></pre>",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT,RB,LB"
}
},
"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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code> 以及值不为 <code class=\"codespan\">tranparent</code> 的背景色 <code class=\"codespan\">backgroundColor</code>。</p>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n<p><strong>注意</strong>:此配置项生效的前提是,设置了 <code class=\"codespan\">show: true</code>。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"scrollDataIndex": {
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>图例当前最左上显示项的 <code class=\"codespan\">dataIndex</code>。</p>\n<p><code class=\"codespan\">setOption</code> 时指定此项的话,可决定当前图例滚动到哪里。</p>\n<p>但是,如果仅仅想改变图例翻页,一般并不调用 <code class=\"codespan\">setOption</code>(因为这太重量了),仅仅使用 action <a href=\"api.html#action.legend.legendScroll\" target=\"_blank\">legendScroll</a> 即可。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
},
"pageButtonItemGap": {
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块中,按钮和页信息之间的间隔。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
},
"pageButtonGap": {
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块和图例项之间的间隔。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
},
"pageButtonPosition": {
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块的位置。可选值为:</p>\n<ul>\n<li><code class=\"codespan\">&#39;start&#39;</code>:控制块在左或上。</li>\n<li><code class=\"codespan\">&#39;end&#39;</code>:控制块在右或下。</li>\n</ul>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
},
"pageFormatter": {
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块中,页信息的显示格式。默认为 <code class=\"codespan\">&#39;{current}/{total}&#39;</code>,其中 <code class=\"codespan\">{current}</code> 是当前页号(从 1 开始计数),<code class=\"codespan\">{total}</code> 是总页数。</p>\n<p>如果 <code class=\"codespan\">pageFormatter</code> 使用函数,须返回字符串,参数为:</p>\n<pre><code class=\"lang-js\">{\n current: number\n total: number\n}\n</code></pre>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
},
"pageIcons": {
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>图例控制块的图标。</p>\n"
},
"pageIcons.horizontal": {
"desc": "<p><a href=\"#legend.orient\">legend.orient</a> 为 <code class=\"codespan\">&#39;horizontal&#39;</code> 时的翻页按钮图标。</p>\n<p>是一个数组,表示 <code class=\"codespan\">[previous page button, next page button]</code>。默认值为 <code class=\"codespan\">[&#39;M0,0L12,-10L12,10z&#39;, &#39;M0,0L-12,-10L-12,10z&#39;]</code>,。</p>\n<p>数组中每项,</p>\n<p>可以通过 <code class=\"codespan\">&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code class=\"codespan\">&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
},
"pageIcons.vertical": {
"desc": "<p><a href=\"#legend.orient\">legend.orient</a> 为 <code class=\"codespan\">&#39;vertical&#39;</code> 时的翻页按钮图标。</p>\n<p>是一个数组,表示 <code class=\"codespan\">[previous page button, next page button]</code>。默认值为 <code class=\"codespan\">[&#39;M0,0L20,0L10,-20z&#39;, &#39;M0,0L20,0L10,20z&#39;]</code>,。</p>\n<p>数组中每项,</p>\n<p>可以通过 <code class=\"codespan\">&#39;image://url&#39;</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>&#39;image://http://xxx.xxx.xxx/a/b.png&#39;\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>&#39;image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7&#39;\n</code></pre><p>可以通过 <code class=\"codespan\">&#39;path://&#39;</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>&#39;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&#39;\n</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
},
"pageIconColor": {
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>翻页按钮的颜色。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n",
"uiControl": {
"type": "color",
"default": "#2f4554"
}
},
"pageIconInactiveColor": {
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>翻页按钮不激活时(即翻页到头时)的颜色。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n",
"uiControl": {
"type": "color",
"default": "#aaa"
}
},
"pageIconSize": {
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>翻页按钮的大小。可以是数字,也可以是数组,如 <code class=\"codespan\">[10, 3]</code>,表示 <code class=\"codespan\">[宽,高]</code>。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&amp;edit=1&amp;reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n",
"uiControl": {
"type": "vector",
"default": "15,15",
"dims": "w,h"
}
},
"pageTextStyle": {
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<p>图例页信息的文字样式。</p>\n"
},
"pageTextStyle.color": {
"desc": "\n\n<p>文字的颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#333"
}
},
"pageTextStyle.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"pageTextStyle.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"pageTextStyle.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"pageTextStyle.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"pageTextStyle.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"
}
},
"pageTextStyle.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"pageTextStyle.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"pageTextStyle.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"pageTextStyle.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"pageTextStyle.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"pageTextStyle.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"pageTextStyle.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"pageTextStyle.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"pageTextStyle.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"pageTextStyle.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"pageTextStyle.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"animation": {
"desc": "\n\n<p>图例翻页是否使用动画。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"animationDurationUpdate": {
"desc": "\n\n<p>图例翻页时的动画时长。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "800",
"step": "20"
}
},
"emphasis.selectorLabel": {
"desc": "<blockquote>\n<p>从 <code class=\"codespan\">v4.4.0</code> 开始支持</p>\n</blockquote>\n"
},
"emphasis.selectorLabel.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"emphasis.selectorLabel.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"emphasis.selectorLabel.rotate": {
"desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"emphasis.selectorLabel.offset": {
"desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"emphasis.selectorLabel.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"emphasis.selectorLabel.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"emphasis.selectorLabel.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"emphasis.selectorLabel.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"emphasis.selectorLabel.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"emphasis.selectorLabel.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"emphasis.selectorLabel.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"emphasis.selectorLabel.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"
}
},
"emphasis.selectorLabel.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL\n // 或者图片的 dataURI\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"emphasis.selectorLabel.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"emphasis.selectorLabel.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"emphasis.selectorLabel.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"emphasis.selectorLabel.padding": {
"desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"emphasis.selectorLabel.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"emphasis.selectorLabel.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"emphasis.selectorLabel.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"emphasis.selectorLabel.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"emphasis.selectorLabel.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"emphasis.selectorLabel.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"emphasis.selectorLabel.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"emphasis.selectorLabel.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"emphasis.selectorLabel.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"emphasis.selectorLabel.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"emphasis.selectorLabel.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"emphasis.selectorLabel.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"emphasis.selectorLabel.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"emphasis.selectorLabel.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"emphasis.selectorLabel.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"emphasis.selectorLabel.rich": {
"desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"emphasis.selectorLabel.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"emphasis.selectorLabel.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"emphasis.selectorLabel.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"emphasis.selectorLabel.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"emphasis.selectorLabel.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"emphasis.selectorLabel.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"emphasis.selectorLabel.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"emphasis.selectorLabel.rich.<style_name>.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"
}
},
"emphasis.selectorLabel.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL\n // 或者图片的 dataURI\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"emphasis.selectorLabel.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"emphasis.selectorLabel.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"emphasis.selectorLabel.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"emphasis.selectorLabel.rich.<style_name>.padding": {
"desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"emphasis.selectorLabel.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"emphasis.selectorLabel.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"emphasis.selectorLabel.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"emphasis.selectorLabel.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"emphasis.selectorLabel.rich.<style_name>.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\">&#39;100%&#39;</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"
},
"emphasis.selectorLabel.rich.<style_name>.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"
},
"emphasis.selectorLabel.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"emphasis.selectorLabel.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"emphasis.selectorLabel.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"emphasis.selectorLabel.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"emphasis.selectorLabel.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"emphasis.selectorLabel.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selector": {
"desc": "<blockquote>\n<p>从 <code class=\"codespan\">v4.4.0</code> 开始支持</p>\n</blockquote>\n<p>图例组件中的选择器按钮,目前包括全选和反选两种功能。默认不显示,用户可手动开启,也可以手动配置每个按钮的标题。</p>\n<p>使用方式如下:</p>\n<pre><code class=\"lang-js\">selector: [\n {\n type: &#39;all or inverse&#39;,\n // 可以是任意你喜欢的 title\n title: &#39;全选&#39;\n },\n {\n type: &#39;inverse&#39;,\n title: &#39;反选&#39;\n }\n]\n\n// 或\nselector: true\n\n// 或\nselector: [&#39;all&#39;, &#39;inverse&#39;]\n</code></pre>\n"
},
"selectorLabel": {
"desc": "<blockquote>\n<p>从 <code class=\"codespan\">v4.4.0</code> 开始支持</p>\n</blockquote>\n<p>选择器按钮的文本标签样式,默认显示。</p>\n"
},
"selectorLabel.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"selectorLabel.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"selectorLabel.rotate": {
"desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n",
"uiControl": {
"type": "angle",
"default": "0",
"min": "-90",
"max": "90",
"step": "1"
}
},
"selectorLabel.offset": {
"desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n",
"uiControl": {
"type": "vector",
"dims": "x,y",
"step": "0.5",
"separate": "true"
}
},
"selectorLabel.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"selectorLabel.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"selectorLabel.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"selectorLabel.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"selectorLabel.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"selectorLabel.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"selectorLabel.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"selectorLabel.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"
}
},
"selectorLabel.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL\n // 或者图片的 dataURI\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"selectorLabel.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"selectorLabel.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"selectorLabel.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"selectorLabel.padding": {
"desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"selectorLabel.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"selectorLabel.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"selectorLabel.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selectorLabel.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selectorLabel.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"selectorLabel.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"selectorLabel.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"selectorLabel.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"selectorLabel.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"selectorLabel.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"selectorLabel.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selectorLabel.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selectorLabel.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"selectorLabel.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"selectorLabel.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"selectorLabel.rich": {
"desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"selectorLabel.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"selectorLabel.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"selectorLabel.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"selectorLabel.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"selectorLabel.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"selectorLabel.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"selectorLabel.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"selectorLabel.rich.<style_name>.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"
}
},
"selectorLabel.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL\n // 或者图片的 dataURI\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"selectorLabel.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"selectorLabel.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"selectorLabel.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"selectorLabel.rich.<style_name>.padding": {
"desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "T,R,B,L"
}
},
"selectorLabel.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"selectorLabel.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"selectorLabel.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selectorLabel.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selectorLabel.rich.<style_name>.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\">&#39;100%&#39;</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"
},
"selectorLabel.rich.<style_name>.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"
},
"selectorLabel.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;inherit&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"selectorLabel.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"selectorLabel.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"selectorLabel.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"selectorLabel.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selectorLabel.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"selectorPosition": {
"desc": "\n\n\n\n<blockquote>\n<p>从 <code class=\"codespan\">v4.4.0</code> 开始支持</p>\n</blockquote>\n<p>选择器的位置,可以放在图例的尾部或者头部,对应的值分别为 <code class=\"codespan\">&#39;end&#39;</code> 和 <code class=\"codespan\">&#39;start&#39;</code>。默认情况下,图例横向布局的时候,选择器放在图例的尾部;图例纵向布局的时候,选择器放在图例的头部。</p>\n",
"uiControl": {
"type": "enum",
"options": "auto,start,end"
}
},
"selectorItemGap": {
"desc": "\n\n\n\n<blockquote>\n<p>从 <code class=\"codespan\">v4.4.0</code> 开始支持</p>\n</blockquote>\n<p>选择器按钮之间的间隔。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "7",
"step": "0.5"
}
},
"selectorButtonGap": {
"desc": "\n\n\n\n<blockquote>\n<p>从 <code class=\"codespan\">v4.4.0</code> 开始支持</p>\n</blockquote>\n<p>选择器按钮与图例组件之间的间隔。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "10",
"step": "0.5"
}
}
}