2020-11-01 00:26:47 +08:00
|
|
|
|
{
|
|
|
|
|
|
"type": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>图例的类型。可选值：</p>\n<ul>\n<li><code class=\"codespan\">'plain'</code>：普通图例。缺省就是普通图例。</li>\n<li><code class=\"codespan\">'scroll'</code>：可滚动翻页的图例。当图例数量较多时可以使用。</li>\n</ul>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n<p>当使用 <code class=\"codespan\">'scroll'</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",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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\">'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>图例组件离容器上侧的距离。</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>图例组件离容器右侧的距离。</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>图例组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</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\">'horizontal'</code></li>\n<li><code class=\"codespan\">'vertical'</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\">'right'</code> 以及纵向布局（<a href=\"#legend.orient\">orient</a> 为 <code class=\"codespan\">'vertical'</code>）的时候为右对齐，即为 <code class=\"codespan\">'right'</code>。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'auto'</code></li>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'right'</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: 'Legend {name}'\n// 使用回调函数\nformatter: function (name) {\n return 'Legend ' + name;\n}\n</code></pre>\n"
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectedMode": {
|
|
|
|
|
|
"desc": "\n\n<p>图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 <code class=\"codespan\">false</code> 关闭。</p>\n<p>除此之外也可以设成 <code class=\"codespan\">'single'</code> 或者 <code class=\"codespan\">'multiple'</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 // 选中'系列1'\n '系列1': true,\n // 不选中'系列2'\n '系列2': 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\">'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>文字字体的粗细。</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>文字的字体系列。</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>文字的字体大小。</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\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "100",
|
|
|
|
|
|
"min": "1",
|
|
|
|
|
|
"max": "500",
|
|
|
|
|
|
"step": "1"
|
|
|
|
|
|
}
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"textStyle.height": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文本显示高度。</p>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "50",
|
|
|
|
|
|
"min": "1",
|
|
|
|
|
|
"max": "500",
|
|
|
|
|
|
"step": "1"
|
|
|
|
|
|
}
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"textStyle.overflow": {
|
|
|
|
|
|
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "enum",
|
|
|
|
|
|
"options": "truncate,break,breakAll"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"textStyle.ellipsis": {
|
|
|
|
|
|
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n"
|
|
|
|
|
|
},
|
|
|
|
|
|
"textStyle.lineOverflow": {
|
|
|
|
|
|
"desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
|
|
|
|
|
},
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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 // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\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\">'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.rich.<style_name>.fontWeight": {
|
|
|
|
|
|
"desc": "\n\n<p>文字字体的粗细。</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.rich.<style_name>.fontFamily": {
|
|
|
|
|
|
"desc": "\n\n<p>文字的字体系列。</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.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\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</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\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</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\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\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\">'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.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, '14px Microsoft Yahei', '…');\n },\n tooltip: {\n show: true\n }\n}\n</code></pre>\n"
|
|
|
|
|
|
},
|
|
|
|
|
|
"icon": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>图例项的 icon。</p>\n<p>ECharts 提供的标记类型包括</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\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>",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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\">''</code>（空字符串）或者 <code class=\"codespan\">'\\n'</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: '系列1',\n // 强制设置图形为圆。\n icon: 'circle',\n // 设置文本为红色\n textStyle: {\n color: 'red'\n }\n}]\n</code></pre>"
|
|
|
|
|
|
},
|
|
|
|
|
|
"data.name": {
|
|
|
|
|
|
"desc": "<p>图例项的名称，应等于某系列的<code class=\"codespan\">name</code>值（如果是饼图，也可以是饼图单个数据的 <code class=\"codespan\">name</code>）。</p>\n"
|
|
|
|
|
|
},
|
|
|
|
|
|
"data.icon": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "<p>图例项的 icon。</p>\n<p>ECharts 提供的标记类型包括</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\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>"
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"data.textStyle": {
|
|
|
|
|
|
"desc": "<p>图例项的文本样式。</p>\n"
|
|
|
|
|
|
},
|
|
|
|
|
|
"backgroundColor": {
|
|
|
|
|
|
"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</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: 'rgba(0, 0, 0, 0.5)',\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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</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&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n"
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"pageButtonItemGap": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块中，按钮和页信息之间的间隔。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n"
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"pageButtonGap": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块和图例项之间的间隔。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n"
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"pageButtonPosition": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块的位置。可选值为：</p>\n<ul>\n<li><code class=\"codespan\">'start'</code>：控制块在左或上。</li>\n<li><code class=\"codespan\">'end'</code>：控制块在右或下。</li>\n</ul>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n"
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"pageFormatter": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块中，页信息的显示格式。默认为 <code class=\"codespan\">'{current}/{total}'</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&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n"
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"pageIcons": {
|
|
|
|
|
|
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块的图标。</p>\n"
|
|
|
|
|
|
},
|
|
|
|
|
|
"pageIcons.horizontal": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "<p><a href=\"#legend.orient\">legend.orient</a> 为 <code class=\"codespan\">'horizontal'</code> 时的翻页按钮图标。</p>\n<p>是一个数组，表示 <code class=\"codespan\">[previous page button, next page button]</code>。默认值为 <code class=\"codespan\">['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']</code>，。</p>\n<p>数组中每项，</p>\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>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n"
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"pageIcons.vertical": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "<p><a href=\"#legend.orient\">legend.orient</a> 为 <code class=\"codespan\">'vertical'</code> 时的翻页按钮图标。</p>\n<p>是一个数组，表示 <code class=\"codespan\">[previous page button, next page button]</code>。默认值为 <code class=\"codespan\">['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']</code>，。</p>\n<p>数组中每项，</p>\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>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n"
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"pageIconColor": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>翻页按钮的颜色。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "color",
|
|
|
|
|
|
"default": "#2f4554"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"pageIconInactiveColor": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>翻页按钮不激活时（即翻页到头时）的颜色。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "color",
|
|
|
|
|
|
"default": "#aaa"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"pageIconSize": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</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&edit=1&reset=1\" target=\"_blank\">滚动图例（垂直）</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例（水平）</a>。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "vector",
|
|
|
|
|
|
"default": "15,15",
|
|
|
|
|
|
"dims": "w,h"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"pageTextStyle": {
|
|
|
|
|
|
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</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\">'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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"pageTextStyle.fontWeight": {
|
|
|
|
|
|
"desc": "\n\n<p>文字字体的粗细。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"pageTextStyle.fontFamily": {
|
|
|
|
|
|
"desc": "\n\n<p>文字的字体系列。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "100",
|
|
|
|
|
|
"min": "1",
|
|
|
|
|
|
"max": "500",
|
|
|
|
|
|
"step": "1"
|
|
|
|
|
|
}
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"pageTextStyle.height": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文本显示高度。</p>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "50",
|
|
|
|
|
|
"min": "1",
|
|
|
|
|
|
"max": "500",
|
|
|
|
|
|
"step": "1"
|
|
|
|
|
|
}
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"pageTextStyle.overflow": {
|
|
|
|
|
|
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "enum",
|
|
|
|
|
|
"options": "truncate,break,breakAll"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"pageTextStyle.ellipsis": {
|
|
|
|
|
|
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n"
|
|
|
|
|
|
},
|
|
|
|
|
|
"pageTextStyle.lineOverflow": {
|
|
|
|
|
|
"desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
|
|
|
|
|
},
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</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",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "5",
|
|
|
|
|
|
"min": "0",
|
|
|
|
|
|
"step": "0.5"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.rotate": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"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",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "color",
|
|
|
|
|
|
"default": "null"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.fontStyle": {
|
|
|
|
|
|
"desc": "\n\n<p>文字字体的风格。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.fontWeight": {
|
|
|
|
|
|
"desc": "\n\n<p>文字字体的粗细。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.fontFamily": {
|
|
|
|
|
|
"desc": "\n\n<p>文字的字体系列。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"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\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</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\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\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\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "color",
|
|
|
|
|
|
"default": "#fff"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.borderColor": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "100",
|
|
|
|
|
|
"min": "1",
|
|
|
|
|
|
"max": "500",
|
|
|
|
|
|
"step": "1"
|
|
|
|
|
|
}
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.height": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文本显示高度。</p>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "50",
|
|
|
|
|
|
"min": "1",
|
|
|
|
|
|
"max": "500",
|
|
|
|
|
|
"step": "1"
|
|
|
|
|
|
}
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.textBorderColor": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"emphasis.selectorLabel.overflow": {
|
|
|
|
|
|
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</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\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n"
|
|
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.lineOverflow": {
|
|
|
|
|
|
"desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
|
|
|
|
|
},
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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 // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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\">'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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.rich.<style_name>.fontWeight": {
|
|
|
|
|
|
"desc": "\n\n<p>文字字体的粗细。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.rich.<style_name>.fontFamily": {
|
|
|
|
|
|
"desc": "\n\n<p>文字的字体系列。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"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\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</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\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\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\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "color",
|
|
|
|
|
|
"default": "#fff"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"emphasis.selectorLabel.rich.<style_name>.borderColor": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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\">'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"
|
|
|
|
|
|
},
|
|
|
|
|
|
"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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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: 'all or inverse',\n // 可以是任意你喜欢的 title\n title: '全选'\n },\n {\n type: 'inverse',\n title: '反选'\n }\n]\n\n// 或\nselector: true\n\n// 或\nselector: ['all', 'inverse']\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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</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",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "5",
|
|
|
|
|
|
"min": "0",
|
|
|
|
|
|
"step": "0.5"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.rotate": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"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",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "color",
|
|
|
|
|
|
"default": "null"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.fontStyle": {
|
|
|
|
|
|
"desc": "\n\n<p>文字字体的风格。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.fontWeight": {
|
|
|
|
|
|
"desc": "\n\n<p>文字字体的粗细。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.fontFamily": {
|
|
|
|
|
|
"desc": "\n\n<p>文字的字体系列。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"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\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</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\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\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\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "color",
|
|
|
|
|
|
"default": "#fff"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.borderColor": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "100",
|
|
|
|
|
|
"min": "1",
|
|
|
|
|
|
"max": "500",
|
|
|
|
|
|
"step": "1"
|
|
|
|
|
|
}
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.height": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文本显示高度。</p>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "number",
|
|
|
|
|
|
"default": "50",
|
|
|
|
|
|
"min": "1",
|
|
|
|
|
|
"max": "500",
|
|
|
|
|
|
"step": "1"
|
|
|
|
|
|
}
|
2020-11-01 00:26:47 +08:00
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.textBorderColor": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"selectorLabel.overflow": {
|
|
|
|
|
|
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n",
|
|
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "enum",
|
|
|
|
|
|
"options": "truncate,break,breakAll"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.ellipsis": {
|
|
|
|
|
|
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n"
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.lineOverflow": {
|
|
|
|
|
|
"desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
|
|
|
|
|
},
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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 // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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\">'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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.rich.<style_name>.fontWeight": {
|
|
|
|
|
|
"desc": "\n\n<p>文字字体的粗细。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.rich.<style_name>.fontFamily": {
|
|
|
|
|
|
"desc": "\n\n<p>文字的字体系列。</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"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\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</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\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\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\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"uiControl": {
|
|
|
|
|
|
"type": "color",
|
|
|
|
|
|
"default": "#fff"
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"selectorLabel.rich.<style_name>.borderColor": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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\">'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"
|
|
|
|
|
|
},
|
|
|
|
|
|
"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": {
|
2020-12-17 19:56:53 +08:00
|
|
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
2020-11-01 00:26:47 +08:00
|
|
|
|
"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\">'end'</code> 和 <code class=\"codespan\">'start'</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"
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
