blob: 2ca078ab917b7a5cb432dd07b5336874f4954a47 [file] [log] [blame]
{
"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"
},
"center": {
"desc": "\n\n<p>旭日图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。</p>\n<p>支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。</p>\n<p><strong>使用示例:</strong></p>\n<pre><code>// 设置成绝对的像素值\ncenter: [400, 300]\n// 设置成相对的百分比\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>",
"uiControl": {
"type": "percentvector",
"dims": "x,y"
}
},
"radius": {
"desc": "\n\n<p>旭日图的半径。可以为如下类型:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:直接指定外半径值。</li>\n<li><code class=\"codespan\">string</code>:例如,<code class=\"codespan\">&#39;20%&#39;</code>,表示外半径为可视区尺寸(容器高宽中较小一项)的 20% 长度。</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">Array.&lt;number|string&gt;</code>:数组的第一项是内半径,第二项是外半径。每一项遵从上述 <code class=\"codespan\">number</code> <code class=\"codespan\">string</code> 的描述。</li>\n</ul>\n",
"uiControl": {
"type": "percentvector",
"dims": "inner,outer",
"default": "0%, 75%"
}
},
"data": {
"desc": "<p><a href=\"#series-sunburst.data\">series-sunburst.data</a> 的数据格式是树状的,例如:</p>\n<pre><code class=\"lang-js\">[{\n name: &#39;parent1&#39;,\n value: 10, // 可以不写父元素的 value,则为子元素之和;\n // 如果写了,并且大于子元素之和,可以用来表示还有其他子元素未显示\n children: [{\n value: 5,\n name: &#39;child1&#39;,\n children: [{\n value: 2,\n name: &#39;grandchild1&#39;,\n itemStyle: {\n // 每个数据可以有自己的样式,覆盖 series.itemStyle 和 level.itemStyle\n },\n label: {\n // 标签样式,同上\n }\n }]\n }, {\n value: 3,\n name: &#39;child2&#39;\n }],\n itemStyle: {\n // parent1 的图形样式,不会被后代继承\n },\n label: {\n // parent1 的标签样式,不会被后代继承\n }\n}, {\n name: &#39;parent2&#39;,\n value: 4\n}]\n</code></pre>\n"
},
"data.value": {
"desc": "<p>数据值,如果包含 children,则可以不写 value 值。这时,将使用子元素的 value 之和作为父元素的 value。如果 value 大于子元素之和,可以用来表示还有其他子元素未显示。</p>\n"
},
"data.name": {
"desc": "<p>显示在扇形块中的描述文字。</p>\n"
},
"data.link": {
"desc": "<p>点击此节点可跳转的超链接。须 <a href=\"#series-treemap.nodeClick\">series-sunburst.nodeClick</a> 值为 <code class=\"codespan\">&#39;link&#39;</code> 时才生效。</p>\n<p>参见 <a href=\"#series-sunburst.data.target\">series-sunburst.data.target</a>。</p>\n"
},
"data.target": {
"desc": "<p>意义同 HTML <code class=\"codespan\">&lt;a&gt;</code> 标签中的 <code class=\"codespan\">target</code>,参见 <a href=\"#series-sunburst.data.link\">series-sunburst.data.link</a>。可选值为:<code class=\"codespan\">&#39;blank&#39;</code> 或 <code class=\"codespan\">&#39;self&#39;</code>。</p>\n"
},
"data.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"data.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"data.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"data.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"data.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"data.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"data.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"data.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"
}
},
"data.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"data.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"data.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"data.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"data.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"data.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"data.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.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"
}
},
"data.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"data.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"data.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"data.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"
}
},
"data.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"data.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"data.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"data.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"data.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"data.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"data.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"data.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"data.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"data.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"data.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"data.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"data.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"data.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"data.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"data.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"data.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"
}
},
"data.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"data.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"data.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"data.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"
}
},
"data.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"data.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"data.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"
},
"data.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"data.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"data.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"data.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"data.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"data.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"data.labelLine.showAbove": {
"desc": "<p>是否显示在图形上方。</p>\n"
},
"data.labelLine.length2": {
"desc": "\n\n<p>视觉引导项第二段的长度。</p>\n",
"uiControl": {
"type": "number",
"default": "15",
"min": "0",
"step": "1"
}
},
"data.labelLine.smooth": {
"desc": "\n\n<p>是否平滑视觉引导线,默认不平滑,可以设置成 <code class=\"codespan\">true</code> 平滑显示,也可以设置为 0 到 1 的值,表示平滑程度。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"data.labelLine.minTurnAngle": {
"desc": "<p>通过调整第二段线的长度,限制引导线两端之间最小的夹角,以防止过小的夹角导致显示不美观。</p>\n<p>可以设置为 0 - 180 度。</p>\n"
},
"data.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"data.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"data.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"data.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"data.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"data.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"data.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"data.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"labelLayout": {
"desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>标签的统一布局配置。</p>\n<p>该配置项是在每个系列默认的标签布局基础上,统一调整标签的<code class=\"codespan\">(x, y)</code>位置,标签对齐等属性以实现想要的标签布局效果。</p>\n<p>该配置项也可以是一个有如下参数的回调函数</p>\n<pre><code class=\"lang-js\">// 标签对应数据的 dataIndex\ndataIndex: number\n// 标签对应的数据类型,只在关系图中会有 node 和 edge 数据类型的区分\ndataType?: string\n// 标签对应的系列的 index\nseriesIndex: number\n// 标签显示的文本\ntext: string\n// 默认的标签的包围盒,由系列默认的标签布局决定\nlabelRect: {x: number, y: number, width: number, height: number}\n// 默认的标签水平对齐\nalign: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;\n// 默认的标签垂直对齐\nverticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;\n// 标签所对应的数据图形的包围盒,可用于定位标签位置\nrect: {x: number, y: number, width: number, height: number}\n// 默认引导线的位置,目前只有饼图(pie)和漏斗图(funnel)有默认标签位置\n// 如果没有该值则为 null\nlabelLinePoints?: number[][]\n</code></pre>\n<p><strong>示例:</strong></p>\n<p>将标签显示在图形右侧 10px 的位置,并且垂直居中:</p>\n<pre><code class=\"lang-js\">labelLayout(params) {\n return {\n x: params.rect.x + 10,\n y: params.rect.y + params.rect.height / 2,\n verticalAlign: &#39;middle&#39;,\n align: &#39;left&#39;\n }\n}\n</code></pre>\n<p>根据图形的包围盒尺寸决定文本尺寸</p>\n<pre><code class=\"lang-js\">\nlabelLayout(params) {\n return {\n fontSize: Math.max(params.rect.width / 10, 5)\n };\n}\n</code></pre>\n"
},
"labelLayout.hideOverlap": {
"desc": "<p>是否隐藏重叠的标签。</p>\n<p>下面示例演示了在关系图中开启该配置后,在缩放时可以实现自动的标签隐藏。</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=graph-label-overlap&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n"
},
"labelLayout.moveOverlap": {
"desc": "<p>在标签重叠的时候是否挪动标签位置以防止重叠。</p>\n<p>目前支持配置为:</p>\n<ul>\n<li><code class=\"codespan\">&#39;shiftX&#39;</code> 水平方向依次位移,在水平方向对齐时使用</li>\n<li><code class=\"codespan\">&#39;shiftY&#39;</code> 垂直方向依次位移,在垂直方向对齐时使用</li>\n</ul>\n<p>下面是标签右对齐并配置垂直方向依次位移以防止重叠的示例。</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=scatter-label-align-right&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n"
},
"labelLayout.x": {
"desc": "<p>标签的 x 位置。支持绝对的像素值或者<code class=\"codespan\">&#39;20%&#39;</code>这样的相对值。</p>\n"
},
"labelLayout.y": {
"desc": "<p>标签的 y 位置。支持绝对的像素值或者<code class=\"codespan\">&#39;20%&#39;</code>这样的相对值。</p>\n"
},
"labelLayout.dx": {
"desc": "<p>标签在 x 方向上的像素偏移。可以和<code class=\"codespan\">x</code>一起使用。</p>\n"
},
"labelLayout.dy": {
"desc": "<p>标签在 y 方向上的像素偏移。可以和<code class=\"codespan\">y</code>一起使用</p>\n"
},
"labelLayout.rotate": {
"desc": "<p>标签旋转角度。</p>\n"
},
"labelLayout.width": {
"desc": "<p>标签显示的宽度。可以配合<code class=\"codespan\">overflow</code>使用控制标签显示在固定宽度内</p>\n"
},
"labelLayout.height": {
"desc": "<p>标签显示的高度。可以配合<code class=\"codespan\">lineOverflow</code>使用控制标签显示在固定高度内</p>\n"
},
"labelLayout.align": {
"desc": "<p>标签水平对齐方式。可以设置<code class=\"codespan\">&#39;left&#39;</code>, <code class=\"codespan\">&#39;center&#39;</code>, <code class=\"codespan\">&#39;right&#39;</code>。</p>\n"
},
"labelLayout.verticalAlign": {
"desc": "<p>标签垂直对齐方式。可以设置<code class=\"codespan\">&#39;top&#39;</code>, <code class=\"codespan\">&#39;middle&#39;</code>, <code class=\"codespan\">&#39;bottom&#39;</code>。</p>\n"
},
"labelLayout.fontSize": {
"desc": "<p>The text size of the label.</p>\n"
},
"labelLayout.draggable": {
"desc": "<p>标签是否可以允许用户通过拖拽二次调整位置。</p>\n"
},
"labelLayout.labelLinePoints": {
"desc": "<p>标签引导线三个点的位置。格式为:</p>\n<pre><code class=\"lang-js\">[[x, y], [x, y], [x, y]]\n</code></pre>\n<p>在饼图中常用来微调已经计算好的引导线,其它情况一般不建议设置。</p>\n"
},
"labelLayout.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"labelLayout.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"labelLayout.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"labelLayout.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"labelLayout.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"labelLayout.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"labelLayout.emphasis": {
"desc": "<p>高亮状态配置。</p>\n"
},
"labelLayout.emphasis.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"labelLayout.emphasis.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"labelLayout.emphasis.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"labelLayout.emphasis.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"labelLayout.emphasis.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"labelLayout.emphasis.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"labelLayout.emphasis.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"labelLayout.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"
}
},
"labelLayout.emphasis.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"labelLayout.emphasis.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"labelLayout.emphasis.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"labelLayout.emphasis.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"labelLayout.emphasis.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"labelLayout.emphasis.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"labelLayout.emphasis.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"labelLayout.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"
}
},
"labelLayout.emphasis.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.emphasis.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.emphasis.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"labelLayout.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"
}
},
"labelLayout.emphasis.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.emphasis.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.emphasis.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.emphasis.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"labelLayout.emphasis.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"labelLayout.emphasis.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.emphasis.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"labelLayout.emphasis.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.emphasis.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.emphasis.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"labelLayout.emphasis.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"labelLayout.emphasis.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"labelLayout.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"labelLayout.emphasis.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"labelLayout.emphasis.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"labelLayout.emphasis.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"labelLayout.emphasis.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"labelLayout.emphasis.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"labelLayout.emphasis.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"labelLayout.emphasis.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"labelLayout.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"
}
},
"labelLayout.emphasis.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.emphasis.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.emphasis.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"labelLayout.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"
}
},
"labelLayout.emphasis.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.emphasis.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.emphasis.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"labelLayout.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"
},
"labelLayout.emphasis.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.emphasis.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"labelLayout.emphasis.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.emphasis.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.emphasis.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"labelLayout.emphasis.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"labelLayout.emphasis.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.emphasis.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"labelLayout.emphasis.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"labelLayout.emphasis.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"labelLayout.emphasis.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"labelLayout.emphasis.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.emphasis.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.emphasis.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"labelLayout.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"labelLayout.emphasis.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.emphasis.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"labelLayout.blur": {
"desc": "<p>淡出状态配置。</p>\n"
},
"labelLayout.blur.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"labelLayout.blur.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"labelLayout.blur.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"labelLayout.blur.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"labelLayout.blur.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"labelLayout.blur.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"labelLayout.blur.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.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"
}
},
"labelLayout.blur.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"labelLayout.blur.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"labelLayout.blur.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"labelLayout.blur.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"labelLayout.blur.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"labelLayout.blur.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"labelLayout.blur.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"labelLayout.blur.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"
}
},
"labelLayout.blur.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.blur.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.blur.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"labelLayout.blur.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"
}
},
"labelLayout.blur.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.blur.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.blur.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.blur.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"labelLayout.blur.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"labelLayout.blur.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.blur.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"labelLayout.blur.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.blur.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.blur.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"labelLayout.blur.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"labelLayout.blur.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"labelLayout.blur.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"labelLayout.blur.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"labelLayout.blur.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"labelLayout.blur.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"labelLayout.blur.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"labelLayout.blur.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"labelLayout.blur.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"labelLayout.blur.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"labelLayout.blur.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"
}
},
"labelLayout.blur.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.blur.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.blur.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"labelLayout.blur.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"
}
},
"labelLayout.blur.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.blur.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.blur.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.blur.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"labelLayout.blur.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"
},
"labelLayout.blur.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.blur.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"labelLayout.blur.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.blur.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.blur.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"labelLayout.blur.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"labelLayout.blur.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.blur.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"labelLayout.blur.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"labelLayout.blur.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.blur.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.blur.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"labelLayout.blur.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"labelLayout.blur.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.blur.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.blur.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"labelLayout.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"labelLayout.blur.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"labelLayout.blur.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.blur.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.blur.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"labelLayout.select": {
"desc": "<p>选中状态配置。</p>\n"
},
"labelLayout.select.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"labelLayout.select.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"labelLayout.select.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"labelLayout.select.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"labelLayout.select.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"labelLayout.select.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"labelLayout.select.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.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"
}
},
"labelLayout.select.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"labelLayout.select.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"labelLayout.select.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"labelLayout.select.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"labelLayout.select.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"labelLayout.select.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"labelLayout.select.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"labelLayout.select.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"
}
},
"labelLayout.select.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.select.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.select.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"labelLayout.select.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"
}
},
"labelLayout.select.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.select.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.select.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.select.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"labelLayout.select.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"labelLayout.select.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.select.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"labelLayout.select.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.select.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.select.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"labelLayout.select.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"labelLayout.select.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"labelLayout.select.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"labelLayout.select.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"labelLayout.select.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"labelLayout.select.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"labelLayout.select.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"labelLayout.select.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"labelLayout.select.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"labelLayout.select.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"labelLayout.select.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"
}
},
"labelLayout.select.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.select.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"labelLayout.select.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"labelLayout.select.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"
}
},
"labelLayout.select.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.select.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.select.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.select.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"labelLayout.select.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"
},
"labelLayout.select.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.select.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"labelLayout.select.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.select.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"labelLayout.select.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"labelLayout.select.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"labelLayout.select.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.select.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"labelLayout.select.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"labelLayout.select.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.select.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.select.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"labelLayout.select.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"labelLayout.select.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.select.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"labelLayout.select.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"labelLayout.select.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"labelLayout.select.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"labelLayout.select.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.select.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLayout.select.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"labelLayout.children": {
"desc": "<p>子节点,递归定义,格式同 <a href=\"#series-sunburst.data\">series-sunburst.data</a>。</p>\n"
},
"nodeClick": {
"desc": "\n\n<p>点击节点后的行为。可取值为:</p>\n<ul>\n<li><code class=\"codespan\">false</code>:节点点击无反应。</li>\n<li><code class=\"codespan\">&#39;rootToNode&#39;</code>:点击节点后以该节点为根结点。</li>\n<li><code class=\"codespan\">&#39;link&#39;</code>:如果节点数据中有 <a href=\"#series-sunburst.data.link\">link</a> 点击节点后会进行超链接跳转。</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "rootToNode",
"options": "rootToNode,link"
}
},
"sort": {
"desc": "\n\n<p>扇形块根据数据 <a href=\"#series-sunburst.data.value\"><code class=\"codespan\">value</code></a> 的排序方式,如果未指定 <code class=\"codespan\">value</code>,则其值为子元素 <code class=\"codespan\">value</code> 之和。默认值 <code class=\"codespan\">&#39;desc&#39;</code> 表示降序排序;还可以设置为 <code class=\"codespan\">&#39;asc&#39;</code> 表示升序排序;<code class=\"codespan\">null</code> 表示不排序,使用原始数据的顺序;或者用回调函数进行排列:</p>\n<pre><code class=\"lang-js\">function(nodeA, nodeB) {\n return nodeA.getValue() - nodeB.getValue();\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"default": "desc",
"options": "desc,asc"
}
},
"renderLabelForZeroData": {
"desc": "\n\n<p>如果数据没有 <code class=\"codespan\">name</code>,是否需要渲染文字。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"label.rotate": {
"desc": "\n\n\n<p>如果是 <code class=\"codespan\">number</code> 类型,则表示标签的旋转角,从 -90 度到 90 度,正值是逆时针。</p>\n<p>除此之外,还可以是字符串 <code class=\"codespan\">&#39;radial&#39;</code> 表示径向旋转、<code class=\"codespan\">&#39;tangential&#39;</code> 表示切向旋转。</p>\n<p>默认径向旋转,如果不需要文字旋转,可以将其设为 <code class=\"codespan\">0</code>。</p>\n<p>下面的例子展示了不同的 <code class=\"codespan\">rotate</code> 设置方法:</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\"><iframe />\n\n\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"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.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</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": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</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.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</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\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"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\">&#39;auto&#39;</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"
}
},
"labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"labelLine.showAbove": {
"desc": "<p>是否显示在图形上方。</p>\n"
},
"labelLine.length2": {
"desc": "\n\n<p>视觉引导项第二段的长度。</p>\n",
"uiControl": {
"type": "number",
"default": "15",
"min": "0",
"step": "1"
}
},
"labelLine.smooth": {
"desc": "\n\n<p>是否平滑视觉引导线,默认不平滑,可以设置成 <code class=\"codespan\">true</code> 平滑显示,也可以设置为 0 到 1 的值,表示平滑程度。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"labelLine.minTurnAngle": {
"desc": "<p>通过调整第二段线的长度,限制引导线两端之间最小的夹角,以防止过小的夹角导致显示不美观。</p>\n<p>可以设置为 0 - 180 度。</p>\n"
},
"labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\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": "1",
"min": "0",
"step": "0.5"
}
},
"itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</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: &#39;rgba(0, 0, 0, 0.5)&#39;,\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.focus": {
"desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果。支持如下配置:</p>\n<ul>\n<li><code class=\"codespan\">&#39;none&#39;</code> 不淡出其它图形,默认使用该配置。</li>\n<li><code class=\"codespan\">&#39;self&#39;</code> 只聚焦(不淡出)当前高亮的数据的图形。</li>\n<li><code class=\"codespan\">&#39;series&#39;</code> 聚焦当前高亮的数据所在的系列的所有图形。</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">&#39;ancestor&#39;</code> 聚焦所有祖先节点</li>\n<li><code class=\"codespan\">&#39;descendant&#39;</code> 聚焦所有子孙节点</li>\n</ul>\n<p><strong>示例:</strong></p>\n<p>下面代码配置了柱状图在高亮一个图形的时候,淡出当前直角坐标系所有其它的系列。</p>\n<pre><code class=\"lang-js\">emphasis: {\n focus: &#39;series&#39;,\n blurScope: &#39;coordinateSystem&#39;\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=bar-y-category-stack&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n"
},
"emphasis.blurScope": {
"desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>在开启<code class=\"codespan\">focus</code>的时候,可以通过<code class=\"codespan\">blurScope</code>配置淡出的范围。支持如下配置</p>\n<ul>\n<li><code class=\"codespan\">&#39;coordinateSystem&#39;</code> 淡出范围为坐标系,默认使用该配置。</li>\n<li><code class=\"codespan\">&#39;series&#39;</code> 淡出范围为系列。</li>\n<li><code class=\"codespan\">&#39;global&#39;</code> 淡出范围为全局。</li>\n</ul>\n"
},
"emphasis.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"emphasis.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"emphasis.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"emphasis.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"emphasis.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"emphasis.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"emphasis.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.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"emphasis.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"emphasis.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"emphasis.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"emphasis.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"emphasis.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"emphasis.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"emphasis.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"emphasis.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</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": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"emphasis.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"emphasis.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</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.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"emphasis.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"emphasis.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"emphasis.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"emphasis.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</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\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"emphasis.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"emphasis.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"emphasis.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\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"emphasis.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"emphasis.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\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"emphasis.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"emphasis.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\">&#39;auto&#39;</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.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"emphasis.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"emphasis.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"emphasis.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"emphasis.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"emphasis.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"emphasis.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"emphasis.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"emphasis.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"emphasis.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"emphasis.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"emphasis.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\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": "1",
"min": "0",
"step": "0.5"
}
},
"emphasis.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"emphasis.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"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"
}
},
"blur": {
"desc": "<p>淡出状态配置。开启 <a href=\"#series-sunburst.emphasis.focus\">emphasis.focus</a> 后有效。</p>\n"
},
"blur.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"blur.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"blur.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"blur.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"blur.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"blur.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"blur.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"blur.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"
}
},
"blur.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"blur.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"blur.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"blur.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"blur.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"blur.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"blur.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"blur.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"
}
},
"blur.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"blur.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"blur.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"blur.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"blur.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"
}
},
"blur.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"blur.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"blur.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"blur.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"blur.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"blur.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"blur.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"blur.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"blur.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"blur.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"blur.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"blur.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"blur.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"blur.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"blur.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"blur.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"blur.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"blur.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"blur.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"blur.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"blur.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"blur.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"blur.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"blur.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"
}
},
"blur.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"blur.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"blur.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"blur.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"blur.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"
}
},
"blur.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"blur.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"blur.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"blur.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"blur.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"blur.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"
},
"blur.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"blur.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"blur.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"blur.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"blur.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"blur.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"blur.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"blur.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"blur.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"blur.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"blur.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"blur.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"blur.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"blur.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"blur.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"blur.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"blur.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"blur.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"blur.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"blur.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"blur.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"blur.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"blur.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"blur.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"blur.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"select": {
"desc": "<p>选中状态配置。开启 <a href=\"#series-sunburst.selectedMode\">selectedMode</a> 后有效。</p>\n"
},
"select.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"select.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"select.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"select.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"select.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"select.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"select.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"select.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"
}
},
"select.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"select.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"select.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"select.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"select.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"select.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"select.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"select.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"
}
},
"select.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"select.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"select.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"select.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"select.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"
}
},
"select.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"select.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"select.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"select.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"select.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"select.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"select.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"select.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"select.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"select.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"select.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"select.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"select.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"select.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"select.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"select.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"select.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"select.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"select.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"select.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"select.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"select.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"select.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"select.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"
}
},
"select.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"select.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"select.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"select.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"select.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"
}
},
"select.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"select.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"select.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"select.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"select.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"select.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"
},
"select.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"select.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"select.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"select.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"select.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"select.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"select.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"select.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"select.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"select.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"select.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"select.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"select.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"select.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"select.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"select.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"select.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"select.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"select.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"select.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"select.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"select.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"select.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"select.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"select.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"select.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"selectedMode": {
"desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n\n\n<p>选中模式的配置,表示是否支持多个选中,默认关闭,支持布尔值和字符串,字符串取值可选<code class=\"codespan\">&#39;single&#39;</code>,<code class=\"codespan\">&#39;multiple&#39;</code>,分别表示单选还是多选。</p>\n",
"uiControl": {
"type": "enum",
"options": "false,true,single,multiple"
}
},
"levels": {
"desc": "<p><strong>多层配置</strong></p>\n<p>旭日图是一种有层次的结构,为了方便同一层样式的配置,我们提供了 levels 配置项。它是一个数组,其中的第 0 项表示数据下钻后返回上级的图形,其后的每一项分别表示从圆心向外层的层级。</p>\n<p>例如,假设我们没有数据下钻功能,并且希望将最内层的扇形块的颜色设为红色,文字设为蓝色,可以这样设置:</p>\n<pre><code class=\"lang-js\">series: {\n // ...\n levels: [\n {\n // 留给数据下钻点的空白配置\n },\n {\n // 最靠内测的第一层\n itemStyle: {\n color: &#39;red&#39;\n },\n label: {\n color: &#39;blue&#39;\n }\n },\n {\n // 第二层 ...\n }\n ]\n}\n</code></pre>\n"
},
"levels.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"levels.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"levels.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"levels.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"levels.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"levels.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"levels.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"levels.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"
}
},
"levels.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"levels.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"levels.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"
}
},
"levels.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.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"
}
},
"levels.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"levels.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"levels.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"levels.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"levels.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"levels.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"levels.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"
}
},
"levels.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.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"
}
},
"levels.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"levels.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"
},
"levels.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"levels.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"levels.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"levels.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"levels.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"levels.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.emphasis": {
"desc": "<p>高亮状态配置。</p>\n"
},
"levels.emphasis.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"levels.emphasis.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"levels.emphasis.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"levels.emphasis.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"levels.emphasis.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"levels.emphasis.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"levels.emphasis.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"levels.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"
}
},
"levels.emphasis.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"levels.emphasis.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.emphasis.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.emphasis.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.emphasis.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.emphasis.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.emphasis.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"levels.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"
}
},
"levels.emphasis.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.emphasis.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.emphasis.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.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"
}
},
"levels.emphasis.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.emphasis.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.emphasis.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.emphasis.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"levels.emphasis.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"levels.emphasis.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"levels.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"levels.emphasis.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.emphasis.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.emphasis.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.emphasis.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.emphasis.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.emphasis.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"levels.emphasis.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"levels.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"
}
},
"levels.emphasis.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.emphasis.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.emphasis.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.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"
}
},
"levels.emphasis.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"levels.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"
},
"levels.emphasis.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.emphasis.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.emphasis.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"levels.emphasis.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"levels.emphasis.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.emphasis.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.emphasis.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.emphasis.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.emphasis.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.emphasis.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"levels.emphasis.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.emphasis.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.emphasis.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.emphasis.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.emphasis.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.emphasis.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.blur": {
"desc": "<p>淡出状态配置。</p>\n"
},
"levels.blur.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"levels.blur.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"levels.blur.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"levels.blur.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"levels.blur.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"levels.blur.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"levels.blur.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"levels.blur.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"
}
},
"levels.blur.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"levels.blur.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.blur.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.blur.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.blur.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.blur.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.blur.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"levels.blur.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"
}
},
"levels.blur.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.blur.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.blur.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.blur.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"
}
},
"levels.blur.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.blur.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.blur.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.blur.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"levels.blur.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"levels.blur.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"levels.blur.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"levels.blur.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.blur.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.blur.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.blur.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.blur.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.blur.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"levels.blur.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"levels.blur.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"
}
},
"levels.blur.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.blur.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.blur.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.blur.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"
}
},
"levels.blur.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"levels.blur.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"
},
"levels.blur.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.blur.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.blur.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.blur.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"levels.blur.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"levels.blur.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.blur.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.blur.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.blur.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.blur.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.blur.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.blur.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.blur.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"levels.blur.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.blur.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.blur.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.blur.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.blur.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.blur.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.blur.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.blur.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.select": {
"desc": "<p>选中状态配置。</p>\n"
},
"levels.select.label": {
"desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中,文本标签的样式。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.label\">series.data.label</a> &gt; <a href=\"#series-sunburst.levels.label\">series.levels.label</a> &gt; <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等。</p>\n"
},
"levels.select.label.rotate": {
"desc": "\n\n\n<p>同 <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n",
"uiControl": {
"type": "enum",
"options": "radial,tangential",
"default": "radial"
}
},
"levels.select.label.align": {
"desc": "\n\n<p>文字对齐方式,可取值为:<code class=\"codespan\">&#39;left&#39;</code>、 <code class=\"codespan\">&#39;center&#39;</code>、 <code class=\"codespan\">&#39;right&#39;</code>。注意,<code class=\"codespan\">&#39;left&#39;</code> 是指靠近内圈,而 <code class=\"codespan\">&#39;right&#39;</code> 是指靠近外圈。</p>\n<p>同 <a href=\"#sunburst.label.align\">label.align</a></p>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right",
"default": "center"
}
},
"levels.select.label.minAngle": {
"desc": "\n\n<p>当某个扇形块的角度小于该值(角度制)时,扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。</p>\n",
"uiControl": {
"type": "angle",
"min": "0",
"step": "1",
"max": "360"
}
},
"levels.select.label.show": {
"desc": "\n\n<p>是否显示标签。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true"
}
},
"levels.select.label.position": {
"desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: &#39;top&#39;\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: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/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"
}
},
"levels.select.label.distance": {
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">&#39;top&#39;</code>、<code class=\"codespan\">&#39;insideRight&#39;</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
"uiControl": {
"type": "number",
"default": "5",
"min": "0",
"step": "0.5"
}
},
"levels.select.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"
}
},
"levels.select.label.formatter": {
"desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>&#39;xxx&#39;<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>&#39;product&#39;` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: &#39;{b}: {@score}&#39;\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) =&gt; string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: &#39;series&#39;,\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 为坐标轴(如 &#39;x&#39; &#39;y&#39; &#39;radius&#39; &#39;angle&#39; 等)\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&lt;String&gt;,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n source: [\n {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"
},
"levels.select.label.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.select.label.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.select.label.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.select.label.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.select.label.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.select.label.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"levels.select.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"
}
},
"levels.select.label.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.select.label.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.select.label.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.select.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"
}
},
"levels.select.label.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.select.label.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.width": {
"desc": "\n\n<p>文本显示宽度。</p>\n",
"uiControl": {
"type": "number",
"default": "100",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.select.label.height": {
"desc": "\n\n<p>文本显示高度。</p>\n",
"uiControl": {
"type": "number",
"default": "50",
"min": "1",
"max": "500",
"step": "1"
}
},
"levels.select.label.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.select.label.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.select.label.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.overflow": {
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">&#39;break&#39;</code> 换行</li>\n<li><code class=\"codespan\">&#39;breakAll&#39;</code> 换行,跟<code class=\"codespan\">&#39;break&#39;</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">&#39;breakAll&#39;</code>还会强制单词内换行</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"options": "truncate,break,breakAll"
}
},
"levels.select.label.ellipsis": {
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">&#39;truncate&#39;</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
},
"levels.select.label.lineOverflow": {
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">&#39;truncate&#39;</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
},
"levels.select.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 // 注意,换行仍是使用 &#39;\\n&#39;。\n formatter: [\n &#39;{a|这段文本采用样式a}&#39;,\n &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n ].join(&#39;\\n&#39;),\n\n rich: {\n a: {\n color: &#39;red&#39;,\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: &#39;xxx/xxx.jpg&#39;\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: &#39;Microsoft YaHei&#39;,\n borderColor: &#39;#449933&#39;,\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
},
"levels.select.label.rich.<style_name>.color": {
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "null"
}
},
"levels.select.label.rich.<style_name>.fontStyle": {
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;italic&#39;</code></li>\n<li><code class=\"codespan\">&#39;oblique&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,italic,oblique"
}
},
"levels.select.label.rich.<style_name>.fontWeight": {
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;normal&#39;</code></li>\n<li><code class=\"codespan\">&#39;bold&#39;</code></li>\n<li><code class=\"codespan\">&#39;bolder&#39;</code></li>\n<li><code class=\"codespan\">&#39;lighter&#39;</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "normal",
"options": "normal,bold,bolder,lighter"
}
},
"levels.select.label.rich.<style_name>.fontFamily": {
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 &#39;serif&#39; , &#39;monospace&#39;, &#39;Arial&#39;, &#39;Courier New&#39;, &#39;Microsoft YaHei&#39;, ...</p>\n",
"uiControl": {
"type": "enum",
"default": "sans-serif",
"options": "sans-serif,serif,monospace,Arial,Courier New"
}
},
"levels.select.label.rich.<style_name>.fontSize": {
"desc": "\n\n<p>文字的字体大小。</p>\n",
"uiControl": {
"type": "number",
"default": "12",
"min": "1",
"step": "1"
}
},
"levels.select.label.rich.<style_name>.align": {
"desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;left&#39;</code></li>\n<li><code class=\"codespan\">&#39;center&#39;</code></li>\n<li><code class=\"codespan\">&#39;right&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "left,center,right"
}
},
"levels.select.label.rich.<style_name>.verticalAlign": {
"desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;top&#39;</code></li>\n<li><code class=\"codespan\">&#39;middle&#39;</code></li>\n<li><code class=\"codespan\">&#39;bottom&#39;</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
"uiControl": {
"type": "enum",
"options": "top,middle,bottom"
}
},
"levels.select.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"
}
},
"levels.select.label.rich.<style_name>.backgroundColor": {
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">&#39;#123234&#39;</code>, <code class=\"codespan\">&#39;red&#39;</code>, <code class=\"codespan\">&#39;rgba(0,23,11,0.3)&#39;</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: &#39;xxx/xxx.png&#39;\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.select.label.rich.<style_name>.borderColor": {
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color",
"default": "#fff"
}
},
"levels.select.label.rich.<style_name>.borderWidth": {
"desc": "\n\n<p>文字块边框宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.rich.<style_name>.borderRadius": {
"desc": "\n\n<p>文字块的圆角。</p>\n",
"uiControl": {
"type": "vector",
"min": "0",
"dims": "LT,RT, RB, LB"
}
},
"levels.select.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"
}
},
"levels.select.label.rich.<style_name>.shadowColor": {
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.select.label.rich.<style_name>.shadowBlur": {
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.rich.<style_name>.shadowOffsetX": {
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.rich.<style_name>.shadowOffsetY": {
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.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\">&#39;100%&#39;</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
},
"levels.select.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"
},
"levels.select.label.rich.<style_name>.textBorderColor": {
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">&#39;auto&#39;</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.select.label.rich.<style_name>.textBorderWidth": {
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.rich.<style_name>.textShadowColor": {
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
"uiControl": {
"type": "color",
"default": "#000"
}
},
"levels.select.label.rich.<style_name>.textShadowBlur": {
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
"uiControl": {
"type": "number",
"min": "0",
"step": "0.5"
}
},
"levels.select.label.rich.<style_name>.textShadowOffsetX": {
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.label.rich.<style_name>.textShadowOffsetY": {
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
"uiControl": {
"type": "number",
"step": "0.5"
}
},
"levels.select.labelLine": {
"desc": "<p>标签的视觉引导线配置。</p>\n"
},
"levels.select.labelLine.show": {
"desc": "\n\n<p>是否显示视觉引导线。</p>\n",
"uiControl": {
"type": "boolean"
}
},
"levels.select.labelLine.lineStyle.color": {
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"levels.select.labelLine.lineStyle.width": {
"desc": "\n\n<p>线宽。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.select.labelLine.lineStyle.type": {
"desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">&#39;solid&#39;</code></li>\n<li><code class=\"codespan\">&#39;dashed&#39;</code></li>\n<li><code class=\"codespan\">&#39;dotted&#39;</code></li>\n</ul>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.select.labelLine.lineStyle.shadowBlur": {
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.select.labelLine.lineStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.select.labelLine.lineStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.select.labelLine.lineStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.select.labelLine.lineStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"levels.select.itemStyle": {
"desc": "<p>旭日图扇形块的样式。</p>\n<p>可以在 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 定义所有扇形块的样式,也可以在 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> 定义每一层扇形块的样式,还可以在 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> 定义每个扇形块单独的样式,这三者的优先级从低到高。也就是说,如果定义了 <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a>,将会覆盖 <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> 和 <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>。</p>\n<p><strong>优先级:<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> &gt; <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> &gt; <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n"
},
"levels.select.itemStyle.color": {
"desc": "\n\n<p>图形的颜色。 默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色 </p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">&#39;rgb(128, 128, 128)&#39;</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">&#39;rgba(128, 128, 128, 0.5)&#39;</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">&#39;#ccc&#39;</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: &#39;linear&#39;,\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: &#39;radial&#39;,\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: &#39;red&#39; // 0% 处的颜色\n }, {\n offset: 1, color: &#39;blue&#39; // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: &#39;repeat&#39; // 是否平铺,可以是 &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</blockquote>\n",
"uiControl": {
"type": "color"
}
},
"levels.select.itemStyle.borderColor": {
"desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n",
"uiControl": {
"type": "color"
}
},
"levels.select.itemStyle.borderWidth": {
"desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n",
"uiControl": {
"type": "number",
"value": "1",
"min": "0",
"step": "0.5"
}
},
"levels.select.itemStyle.borderType": {
"desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">&#39;solid&#39;</code>, <code class=\"codespan\">&#39;dashed&#39;</code>, <code class=\"codespan\">&#39;dotted&#39;</code>。</p>\n",
"uiControl": {
"type": "enum",
"default": "solid",
"options": "solid,dashed,dotted"
}
},
"levels.select.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: &#39;rgba(0, 0, 0, 0.5)&#39;,\n shadowBlur: 10\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"default": "",
"min": "0",
"step": "0.5"
}
},
"levels.select.itemStyle.shadowColor": {
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
"uiControl": {
"type": "color",
"default": ""
}
},
"levels.select.itemStyle.shadowOffsetX": {
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.select.itemStyle.shadowOffsetY": {
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
"uiControl": {
"type": "number",
"default": "0",
"step": "0.5"
}
},
"levels.select.itemStyle.opacity": {
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n",
"uiControl": {
"type": "number",
"default": "1",
"min": "0",
"max": "1",
"step": "0.01"
}
},
"animation": {
"desc": "\n\n<p>是否开启动画。</p>\n",
"uiControl": {
"type": "boolean",
"default": "true",
"clean": "true"
}
},
"animationThreshold": {
"desc": "<p>是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。</p>\n"
},
"animationDuration": {
"desc": "\n\n<p>初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "1000",
"step": "20",
"clean": "true"
}
},
"animationEasing": {
"desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=line-easing\" target=\"_blank\">缓动示例</a>。</p>\n",
"uiControl": {
"type": "enum",
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut",
"clean": "true"
}
},
"animationDelay": {
"desc": "<p>初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
},
"animationDurationUpdate": {
"desc": "\n\n<p>数据更新动画的时长。</p>\n<p>支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n",
"uiControl": {
"type": "number",
"min": "0",
"default": "1000",
"step": "20"
}
},
"animationEasingUpdate": {
"desc": "\n\n<p>数据更新动画的缓动效果。</p>\n",
"uiControl": {
"type": "enum",
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"
}
},
"animationDelayUpdate": {
"desc": "<p>数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
}
}