mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-07 22:49:29 +08:00
1141 lines
80 KiB
JSON
1141 lines
80 KiB
JSON
|
{
|
|||
|
|
"id": {
|
|||
|
|
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
|
|||
|
|
},
|
|||
|
|
"name": {
|
|||
|
|
"desc": "<p>系列名称，用于<a href=\"#tooltip\">tooltip</a>的显示，<a href=\"#legend\">legend</a> 的图例筛选，在 <code class=\"codespan\">setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"
|
|||
|
|
},
|
|||
|
|
"zlevel": {
|
|||
|
|
"desc": "<p>所有图形的 zlevel 值。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层，不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n"
|
|||
|
|
},
|
|||
|
|
"z": {
|
|||
|
|
"desc": "<p>组件的所有图形的<code class=\"codespan\">z</code>值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n<p><code class=\"codespan\">z</code>相比<code class=\"codespan\">zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>\n"
|
|||
|
|
},
|
|||
|
|
"left": {
|
|||
|
|
"desc": "\n\n<p>thmemRiver组件离容器左侧的距离。</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>thmemRiver组件离容器上侧的距离。</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>thmemRiver组件离容器右侧的距离。</p>\n<p><code class=\"codespan\">right</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "percent",
|
|||
|
|
"default": "0%"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"bottom": {
|
|||
|
|
"desc": "\n\n<p>thmemRiver组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "percent",
|
|||
|
|
"default": "0%"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"width": {
|
|||
|
|
"desc": "\n\n<p>thmemRiver组件的宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "percent",
|
|||
|
|
"default": "50%"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"height": {
|
|||
|
|
"desc": "\n\n<p>thmemRiver组件的高度。</p>\n<p><strong> 注意：</strong>\n整个主题河流view的位置信息复用了单个时间轴的位置信息，即left，top，right，bottom。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "percent",
|
|||
|
|
"default": "50%"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"coordinateSystem": {
|
|||
|
|
"desc": "<p>坐标系统，主题河流用的是单个的时间轴。</p>\n"
|
|||
|
|
},
|
|||
|
|
"boundaryGap": {
|
|||
|
|
"desc": "<p>图中与坐标轴正交的方向的边界间隙，设置该值是为了调整图的位置，使其尽量处于屏幕的正中间，避免处于屏幕的上方或下方。</p>\n"
|
|||
|
|
},
|
|||
|
|
"singleAxisIndex": {
|
|||
|
|
"desc": "<p>单个时间轴的index，默认值为0，因为只有单个轴。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label": {
|
|||
|
|
"desc": "<p><code class=\"codespan\">label</code> 描述了主题河流中每个带状河流分支对应的文本标签的样式。</p>\n"
|
|||
|
|
},
|
|||
|
|
"label.show": {
|
|||
|
|
"desc": "\n\n<p>是否显示标签。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "boolean",
|
|||
|
|
"default": "true"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.position": {
|
|||
|
|
"desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.distance": {
|
|||
|
|
"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/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "5",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rotate": {
|
|||
|
|
"desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "angle",
|
|||
|
|
"default": "0",
|
|||
|
|
"min": "-90",
|
|||
|
|
"max": "90",
|
|||
|
|
"step": "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.color": {
|
|||
|
|
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "'#000'"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.fontSize": {
|
|||
|
|
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "11",
|
|||
|
|
"min": "1",
|
|||
|
|
"step": "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#fff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.borderColor": {
|
|||
|
|
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#fff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.borderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字块边框宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.borderRadius": {
|
|||
|
|
"desc": "\n\n<p>文字块的圆角。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "vector",
|
|||
|
|
"min": "0",
|
|||
|
|
"dims": "LT,RT, RB, LB"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
},
|
|||
|
|
"label.textBorderColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textBorderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textShadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#000"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textShadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textShadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.textShadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.color": {
|
|||
|
|
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "null"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.fontSize": {
|
|||
|
|
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "12",
|
|||
|
|
"min": "1",
|
|||
|
|
"step": "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#fff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.borderColor": {
|
|||
|
|
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#fff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.borderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字块边框宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.borderRadius": {
|
|||
|
|
"desc": "\n\n<p>文字块的圆角。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "vector",
|
|||
|
|
"min": "0",
|
|||
|
|
"dims": "LT,RT, RB, LB"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
},
|
|||
|
|
"label.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"
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.textBorderColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.textBorderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.textShadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#000"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.textShadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.textShadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"label.rich.<style_name>.textShadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"itemStyle": {
|
|||
|
|
"desc": "<p>主题河流中每个带状河流分支的样式。</p>\n"
|
|||
|
|
},
|
|||
|
|
"itemStyle.color": {
|
|||
|
|
"desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"itemStyle.borderColor": {
|
|||
|
|
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>，不支持回调函数。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"itemStyle.borderWidth": {
|
|||
|
|
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"value": "0",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"itemStyle.borderType": {
|
|||
|
|
"desc": "\n\n<p>柱条的描边类型，默认为实线，支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"default": "solid",
|
|||
|
|
"options": "solid,dashed,dotted"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"itemStyle.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"itemStyle.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": ""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"itemStyle.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"itemStyle.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"itemStyle.opacity": {
|
|||
|
|
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "1",
|
|||
|
|
"min": "0",
|
|||
|
|
"max": "1",
|
|||
|
|
"step": "0.01"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis": {
|
|||
|
|
"desc": "<p>高亮的图形和标签样式。</p>\n"
|
|||
|
|
},
|
|||
|
|
"emphasis.label.show": {
|
|||
|
|
"desc": "\n\n<p>是否显示标签。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "boolean",
|
|||
|
|
"default": "false"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.position": {
|
|||
|
|
"desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.distance": {
|
|||
|
|
"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/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "5",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rotate": {
|
|||
|
|
"desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "angle",
|
|||
|
|
"default": "0",
|
|||
|
|
"min": "-90",
|
|||
|
|
"max": "90",
|
|||
|
|
"step": "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.color": {
|
|||
|
|
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "'#000'"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.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.label.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.label.fontSize": {
|
|||
|
|
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "11",
|
|||
|
|
"min": "1",
|
|||
|
|
"step": "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.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<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#fff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.borderColor": {
|
|||
|
|
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#fff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.borderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字块边框宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.borderRadius": {
|
|||
|
|
"desc": "\n\n<p>文字块的圆角。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "vector",
|
|||
|
|
"min": "0",
|
|||
|
|
"dims": "LT,RT, RB, LB"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.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.label.textBorderColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.textBorderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.textShadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#000"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.textShadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.textShadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.textShadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.rich.<style_name>.color": {
|
|||
|
|
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "null"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.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.label.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.label.rich.<style_name>.fontSize": {
|
|||
|
|
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "12",
|
|||
|
|
"min": "1",
|
|||
|
|
"step": "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.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.label.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.label.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<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#fff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.borderColor": {
|
|||
|
|
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#fff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.borderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字块边框宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.borderRadius": {
|
|||
|
|
"desc": "\n\n<p>文字块的圆角。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "vector",
|
|||
|
|
"min": "0",
|
|||
|
|
"dims": "LT,RT, RB, LB"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.rich.<style_name>.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.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.label.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.label.rich.<style_name>.textBorderColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.textBorderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.textShadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#000"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.textShadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.textShadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.label.rich.<style_name>.textShadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.itemStyle.color": {
|
|||
|
|
"desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.itemStyle.borderColor": {
|
|||
|
|
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>，不支持回调函数。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.itemStyle.borderWidth": {
|
|||
|
|
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"value": "0",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.itemStyle.borderType": {
|
|||
|
|
"desc": "\n\n<p>柱条的描边类型，默认为实线，支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "enum",
|
|||
|
|
"default": "solid",
|
|||
|
|
"options": "solid,dashed,dotted"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.itemStyle.shadowBlur": {
|
|||
|
|
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "20",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.itemStyle.shadowColor": {
|
|||
|
|
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "'rgba(0,0,0,0.8)'"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.itemStyle.shadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.itemStyle.shadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"emphasis.itemStyle.opacity": {
|
|||
|
|
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "1",
|
|||
|
|
"min": "0",
|
|||
|
|
"max": "1",
|
|||
|
|
"step": "0.01"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"data": {
|
|||
|
|
"desc": "<pre><code class=\"lang-js\">data: [\n ["2015/11/09",10,"DQ"],\n ["2015/11/10",10,"DQ"],\n ["2015/11/11",10,"DQ"],\n ["2015/11/08",10,"SS"],\n ["2015/11/09",10,"SS"],\n ["2015/11/10",10,"SS"],\n ["2015/11/11",10,"SS"],\n ["2015/11/12",10,"SS"],\n ["2015/11/13",10,"QG"],\n ["2015/11/08",10,"QG"],\n ["2015/11/11",10,"QG"],\n ["2015/11/13",10,"QG"],\n]\n</code></pre>\n<p><strong>数据说明：</strong></p>\n<p>如上所示，主题河流的数据格式是二维数组的形式，里层数组的每一项由事件或主题的时间属性、事件或主题在某个时间点的值，以及事件或主题的名称组成。值得注意的是，一定要提供一个具有完整时间段的事件或主题作为主干河流，其他事件或主题以该主干河流为依据，将缺省的时间点上的值补为0，也就是说其他事件或主题的时间段是包含在主干河流内的，如果超出，布局会出错，这么做的原因是，在计算整个图的布局的时候要计算一条baseline，以便将每个事情画成流带状。如上图中的"SS"这一事件就是一个主干河流，经过处理，我们会将"DQ"中缺省的三个时间点以["2015/11/08",0,"DQ"]，["2015/11/12",0,"DQ"]，［"2015/11/13",0,"DQ"］的格式补齐，使其与主干河流对其。从中还可以看出，我们可以在完整时间段的任意位置缺省。</p>\n"
|
|||
|
|
},
|
|||
|
|
"data.date": {
|
|||
|
|
"desc": "<p>时间或主题的时间属性。</p>\n"
|
|||
|
|
},
|
|||
|
|
"data.value": {
|
|||
|
|
"desc": "<p>事件或主题在某个时间点的值。</p>\n"
|
|||
|
|
},
|
|||
|
|
"data.name": {
|
|||
|
|
"desc": "<p>事件或主题的名称。</p>\n"
|
|||
|
|
},
|
|||
|
|
"tooltip": {
|
|||
|
|
"desc": "<p>本系列特定的 tooltip 设定。</p>\n"
|
|||
|
|
},
|
|||
|
|
"tooltip.position": {
|
|||
|
|
"desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。</p>\n<p>可选：</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p> 通过数组表示提示框浮层的位置，支持数字设置绝对位置，百分比设置相对位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对位置，相对于容器左侧 10px, 上侧 10 px\n position: [10, 10]\n // 相对位置，放置在容器正中间\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p> 回调函数，格式如下：</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>参数：</strong><br>\n point: 鼠标位置，如 [20, 40]。<br>\n params: 同 formatter 的参数相同。<br>\n dom: tooltip 的 dom 对象。<br>\n rect: 只有鼠标在图形上时有效，是一个用<code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, <code class=\"codespan\">height</code>四个属性表达的图形包围盒。<br>\n size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：<code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>。<br></p>\n<p> <strong>返回值：</strong><br>\n 可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。<br>\n 也可以是一个对象，如：<code class=\"codespan\">{left: 10, top: 30}</code>，或者 <code class=\"codespan\">{right: '20%', bottom: 40}</code>。<br></p>\n<p> 如下示例：</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // 固定在顶部\n return [point[0], '10%'];\n }\n</code></pre>\n<p> 或者：</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'inside'</code></p>\n<p> 鼠标所在图形的内部中心位置，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'top'</code></p>\n<p> 鼠标所在图形上侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'left'</code></p>\n<p> 鼠标所在图形左侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code></p>\n<p> 鼠标所在图形右侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'bottom'</code></p>\n<p> 鼠标所在图形底侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n</ul>\n"
|
|||
|
|
},
|
|||
|
|
"tooltip.formatter": {
|
|||
|
|
"desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层内容格式器，支持字符串模板和回调函数两种形式。</p>\n<p><strong>1, 字符串模板</strong></p>\n<p>模板变量有 <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>，<code class=\"codespan\">{c}</code>，<code class=\"codespan\">{d}</code>，<code class=\"codespan\">{e}</code>，分别表示系列名，数据名，数据值等。\n在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code class=\"codespan\">'axis'</code> 的时候，会有多个系列的数据，此时可以通过 <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, <code class=\"codespan\">{a2}</code> 这种后面加索引的方式表示系列的索引。\n不同图表类型下的 <code class=\"codespan\">{a}</code>，<code class=\"codespan\">{b}</code>，<code class=\"codespan\">{c}</code>，<code class=\"codespan\">{d}</code> 含义不一样。\n其中变量<code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code>在不同图表类型下代表数据含义为：</p>\n<ul>\n<li><p>折线（区域）图、柱状（条形）图、K线图 : <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（类目值），<code class=\"codespan\">{c}</code>（数值）, <code class=\"codespan\">{d}</code>（无）</p>\n</li>\n<li><p>散点图（气泡）图 : <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（数据名称），<code class=\"codespan\">{c}</code>（数值数组）, <code class=\"codespan\">{d}</code>（无）</p>\n</li>\n<li><p>地图 : <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（区域名称），<code class=\"codespan\">{c}</code>（合并数值）, <code class=\"codespan\">{d}</code>（无）</p>\n</li>\n<li><p>饼图、仪表盘、漏斗图: <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（数据项名称），<code class=\"codespan\">{c}</code>（数值）, <code class=\"codespan\">{d}</code>（百分比）</p>\n</li>\n</ul>\n<p>更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2, 回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>第一个参数 <code class=\"codespan\">params</code> 是 formatter 需要的数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数<>
|
|||
|
|
},
|
|||
|
|
"tooltip.backgroundColor": {
|
|||
|
|
"desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的背景颜色。</p>\n"
|
|||
|
|
},
|
|||
|
|
"tooltip.borderColor": {
|
|||
|
|
"desc": "\n\n\n\n\n<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的边框颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#333"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.borderWidth": {
|
|||
|
|
"desc": "\n\n\n\n\n<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的边框宽。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.padding": {
|
|||
|
|
"desc": "\n\n\n\n\n<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle": {
|
|||
|
|
"desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的文本样式。</p>\n"
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.color": {
|
|||
|
|
"desc": "\n\n<p>文字的颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "'#fff'"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.fontSize": {
|
|||
|
|
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"default": "14",
|
|||
|
|
"min": "1",
|
|||
|
|
"step": "1"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.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"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.width": {
|
|||
|
|
"desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.height": {
|
|||
|
|
"desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.textBorderColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.textBorderWidth": {
|
|||
|
|
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.textShadowColor": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "color",
|
|||
|
|
"default": "#000"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.textShadowBlur": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"min": "0",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.textShadowOffsetX": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.textStyle.textShadowOffsetY": {
|
|||
|
|
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
|||
|
|
"uiControl": {
|
|||
|
|
"type": "number",
|
|||
|
|
"step": "0.5"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"tooltip.extraCssText": {
|
|||
|
|
"desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"
|
|||
|
|
}
|
|||
|
|
}
|