| window.__EC_DOC_option_series_sunburst = { |
| "id": { |
| "desc": "<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n" |
| }, |
| "name": { |
| "desc": "<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updating data and configuration with <code class=\"codespan\">setOption</code>.</p>\n" |
| }, |
| "zlevel": { |
| "desc": "<p><code class=\"codespan\">zlevel</code> value of all graphical elements in .</p>\n<p><code class=\"codespan\">zlevel</code> is used to make layers with Canvas. Graphical elements with different <code class=\"codespan\">zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a separate <code class=\"codespan\">zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code class=\"codespan\">zlevel</code> will be placed on Canvases with smaller <code class=\"codespan\">zlevel</code>.</p>\n" |
| }, |
| "z": { |
| "desc": "<p><code class=\"codespan\">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class=\"codespan\">z</code> values may be overwritten by those with larger <code class=\"codespan\">z</code> values.</p>\n<p><code class=\"codespan\">z</code> has a lower priority to <code class=\"codespan\">zlevel</code>, and will not create new Canvas.</p>\n" |
| }, |
| "center": { |
| "desc": "\n\n<p>Center position of Sunburst chart, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n</code></pre>", |
| "uiControl": { |
| "type": "percentvector", |
| "dims": "x,y" |
| } |
| }, |
| "radius": { |
| "desc": "\n\n<p>Radius of Sunburst chart. Value can be:</p>\n<ul>\n<li><code class=\"codespan\">number</code>: Specify outside radius directly.</li>\n<li><code class=\"codespan\">string</code>: For example, <code class=\"codespan\">'20%'</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">Array.<number|string></code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "percentvector", |
| "dims": "inner,outer", |
| "default": "0%, 75%" |
| } |
| }, |
| "data": { |
| "desc": "<p>The data structure of <a href=\"#series-sunburst.data\">series-sunburst.data</a> is like tree. For example:</p>\n<pre><code class=\"lang-js\">[{\n name: 'parent1',\n value: 10, // value of parent node can be left unset, and sum of\n // children values will be used in this case.\n // If is set, and is larger than sum of children nodes,\n // the reset can be used for other parts in parent.\n children: [{\n value: 5,\n name: 'child1',\n children: [{\n value: 2,\n name: 'grandchild1',\n itemStyle: {\n // every data can have its own itemStyle,\n // which will overwrites series.itemStyle and level.itemStyle\n },\n label: {\n // label style, the same to above\n }\n }]\n }, {\n value: 3,\n name: 'child2'\n }],\n itemStyle: {\n // itemStyle of parent1, which will not be inherited for children\n },\n label: {\n // label of parent1, which will not be inherited for children\n }\n}, {\n name: 'parent2',\n value: 4\n}]\n</code></pre>\n" |
| }, |
| "data.value": { |
| "desc": "<p>Value for each item. If contains children, value can be left unset, and sum of children values will be used in this case.</p>\n" |
| }, |
| "data.name": { |
| "desc": "<p>Name displayed in each sector.</p>\n" |
| }, |
| "data.link": { |
| "desc": "<p>Link address that redirects to when this sector is clicked. Only useful when <a href=\"#series-treemap.nodeClick\">series-sunburst.nodeClick</a> is set to be <code class=\"codespan\">'link'</code>.</p>\n<p>See <a href=\"#series-sunburst.data.target\">series-sunburst.data.target</a>.</p>\n" |
| }, |
| "data.target": { |
| "desc": "<p>Like <code class=\"codespan\">target</code> attribute of HTML <code class=\"codespan\"><a></code>, which can either be <code class=\"codespan\">'blank'</code> or <code class=\"codespan\">'self'</code>. See <a href=\"#series-sunburst.data.link\">series-sunburst.data.link</a>.</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> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</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>Align of text, which can be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>. Note that <code class=\"codespan\">'left'</code> stands for inner side, and <code class=\"codespan\">'right'</code> stands for outer side.</p>\n<p>Same to <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>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "0", |
| "step": "1", |
| "max": "360" |
| } |
| }, |
| "data.label.show": { |
| "desc": "\n\n<p>Whether to show label.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "data.label.position": { |
| "desc": "\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "data.label.distance": { |
| "desc": "\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.offset": { |
| "desc": "\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "data.label.formatter": { |
| "desc": "<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">'xxx'</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">'product'</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</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> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.label.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.label.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.label.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.label.fontSize": { |
| "desc": "\n\n<p> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.label.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.label.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.label.backgroundColor": { |
| "desc": "\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.label.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.label.shadowColor": { |
| "desc": "\n\n<p>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.label.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.label.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.label.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.label.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "data.label.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "data.label.rich": { |
| "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n" |
| }, |
| "data.label.rich.<style_name>.color": { |
| "desc": "\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</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> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be 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>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be 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>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.width": { |
| "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "data.label.rich.<style_name>.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "data.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.labelLine": { |
| "desc": "<p>Configuration of label guide line.</p>\n" |
| }, |
| "data.labelLine.show": { |
| "desc": "\n\n<p>Whether to show the label guide line.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "data.labelLine.showAbove": { |
| "desc": "<p>Whether to show the label guide line above the corresponding element.</p>\n" |
| }, |
| "data.labelLine.length2": { |
| "desc": "\n\n<p>The length of the second segment of guide line.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "15", |
| "min": "0", |
| "step": "1" |
| } |
| }, |
| "data.labelLine.smooth": { |
| "desc": "\n\n<p>Whether to smooth the guide line. It defaults to be <code class=\"codespan\">false</code> and can be set as <code class=\"codespan\">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "data.labelLine.minTurnAngle": { |
| "desc": "<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n" |
| }, |
| "data.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.labelLine.lineStyle.width": { |
| "desc": "\n\n<p> line width.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.labelLine.lineStyle.type": { |
| "desc": "\n\n<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "data.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "data.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "data.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> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n" |
| }, |
| "data.itemStyle.color": { |
| "desc": "\n\n<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.itemStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.itemStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.itemStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "data.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.itemStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "data.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.itemStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "data.itemStyle.decal(Object | 'none')": { |
| "desc": "<p>The style of the decal pattern. It works only if <a href=\"#aria.enabled\">aria.enabled</a> and <a href=\"#aria.decal.show\">aria.decal.show</a> are both set to be <code class=\"codespan\">true</code>.</p>\n<p>If it is set to be <code class=\"codespan\">'none'</code>, no decal will be used.</p>\n" |
| }, |
| "data.itemStyle.decal(Object | 'none').symbol(string|string[]) = 'rect'": { |
| "desc": "<p>The symbol type of the decal. If it is in the type of <code class=\"codespan\">string[]</code>, it means the symbols are used one by one.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>" |
| }, |
| "data.itemStyle.decal(Object | 'none').symbolSize": { |
| "desc": "<p>Range of values: <code class=\"codespan\">0</code> to <code class=\"codespan\">1</code>, representing the size of symbol relative to decal.</p>\n" |
| }, |
| "data.itemStyle.decal(Object | 'none').symbolKeepAspect": { |
| "desc": "<p>Whether or not to keep the aspect ratio of the pattern.</p>\n" |
| }, |
| "data.itemStyle.decal(Object | 'none').color": { |
| "desc": "<p>For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.</p>\n" |
| }, |
| "data.itemStyle.decal(Object | 'none').backgroundColor": { |
| "desc": "<p>The background color of the decal will be over the color of the series itself, under the decal pattern.</p>\n" |
| }, |
| "data.itemStyle.decal(Object | 'none').dashArrayX(number | number[] | (number | number[])[]) = 5": { |
| "desc": "<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class=\"codespan\">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class=\"codespan\">dashArrayX</code> controls the horizontal pattern pattern. When its value is of type <code class=\"codespan\">number</code> or <code class=\"codespan\">number[]</code>, it is similar to <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is of type <code class=\"codespan\">number</code>, it means that the pattern and the blank space are of this value respectively. For example, <code class=\"codespan\">5</code> means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class=\"codespan\">number[]</code> type, it means that the pattern and empty space are loops of an array of values. For example: <code class=\"codespan\">[5, 10, 2, 6]</code> means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...</p>\n</li>\n<li><p>If of type <code class=\"codespan\">(number | number[])[]</code>, it means that each row is a loop with an array of values for the pattern and blank space. For example: <code class=\"codespan\">[10, [2, 5]]</code> means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"></iframe>\n\n" |
| }, |
| "data.itemStyle.decal(Object | 'none').dashArrayY(number | number[]) = 5": { |
| "desc": "<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class=\"codespan\">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class=\"codespan\">dashArrayY</code> controls the horizontal pattern pattern. Similar to <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is a <code class=\"codespan\">number</code> type, it means the pattern and the blank are each of this value. For example, <code class=\"codespan\">5</code> means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class=\"codespan\">number[]</code> type, it means that the pattern and empty space are loops of sequential array values. For example: <code class=\"codespan\">[5, 10, 2, 6]</code> means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"></iframe>\n\n" |
| }, |
| "data.itemStyle.decal(Object | 'none').rotation": { |
| "desc": "<p>The overall rotation angle (in radians) of the pattern, in the range from `-Math.</p>\n" |
| }, |
| "data.itemStyle.decal(Object | 'none').maxTileWidth": { |
| "desc": "<p>The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.</p>\n" |
| }, |
| "data.itemStyle.decal(Object | 'none').maxTileHeight": { |
| "desc": "<p>The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.</p>\n" |
| }, |
| "label": { |
| "desc": "<p><code class=\"codespan\">label</code> 描述了每个扇形块中，文本标签的样式。</p>\n<p><strong>优先级：<a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</p>\n" |
| }, |
| "label.rotate": { |
| "desc": "\n\n\n<p>If it is <code class=\"codespan\">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class=\"codespan\">'radial'</code>, standing for radial rotation; or <code class=\"codespan\">'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class=\"codespan\">'radial'</code>. If no rotation is wanted, it can be set to <code class=\"codespan\">0</code>.</p>\n<p>The following example shows different <code class=\"codespan\">rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\"></iframe>\n\n\n<p>Same to <a href=\"#sunburst.label.rotate\">label.rotate</a></p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "radial,tangential", |
| "default": "radial" |
| } |
| }, |
| "label.align": { |
| "desc": "\n\n<p>Align of text, which can be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>. Note that <code class=\"codespan\">'left'</code> stands for inner side, and <code class=\"codespan\">'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/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>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "0", |
| "step": "1", |
| "max": "360" |
| } |
| }, |
| "label.show": { |
| "desc": "\n\n<p>Whether to show label.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "label.position": { |
| "desc": "\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "label.distance": { |
| "desc": "\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.offset": { |
| "desc": "\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "label.formatter": { |
| "desc": "<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">'xxx'</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">'product'</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</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> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "label.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "label.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "label.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "label.fontSize": { |
| "desc": "\n\n<p> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "label.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "label.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "label.backgroundColor": { |
| "desc": "\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "label.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "label.shadowColor": { |
| "desc": "\n\n<p>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "label.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "label.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "label.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "label.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "label.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "label.rich": { |
| "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n" |
| }, |
| "label.rich.<style_name>.color": { |
| "desc": "\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</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> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "label.rich.<style_name>.align": { |
| "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.width": { |
| "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "label.rich.<style_name>.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "labelLine": { |
| "desc": "<p>Configuration of label guide line.</p>\n" |
| }, |
| "labelLine.show": { |
| "desc": "\n\n<p>Whether to show the label guide line.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "labelLine.showAbove": { |
| "desc": "<p>Whether to show the label guide line above the corresponding element.</p>\n" |
| }, |
| "labelLine.length2": { |
| "desc": "\n\n<p>The length of the second segment of guide line.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "15", |
| "min": "0", |
| "step": "1" |
| } |
| }, |
| "labelLine.smooth": { |
| "desc": "\n\n<p>Whether to smooth the guide line. It defaults to be <code class=\"codespan\">false</code> and can be set as <code class=\"codespan\">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "labelLine.minTurnAngle": { |
| "desc": "<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n" |
| }, |
| "labelLine.lineStyle.color": { |
| "desc": "\n\n<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "labelLine.lineStyle.width": { |
| "desc": "\n\n<p> line width.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "labelLine.lineStyle.type": { |
| "desc": "\n\n<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 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> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n" |
| }, |
| "itemStyle.color": { |
| "desc": "\n\n<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "itemStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "itemStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "itemStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "itemStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "itemStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "itemStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "itemStyle.decal(Object | 'none')": { |
| "desc": "<p>The style of the decal pattern. It works only if <a href=\"#aria.enabled\">aria.enabled</a> and <a href=\"#aria.decal.show\">aria.decal.show</a> are both set to be <code class=\"codespan\">true</code>.</p>\n<p>If it is set to be <code class=\"codespan\">'none'</code>, no decal will be used.</p>\n" |
| }, |
| "itemStyle.decal(Object | 'none').symbol(string|string[]) = 'rect'": { |
| "desc": "<p>The symbol type of the decal. If it is in the type of <code class=\"codespan\">string[]</code>, it means the symbols are used one by one.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>It can be set to an image with <code class=\"codespan\">'image://url'</code> , in which URL is the link to an image, or <code class=\"codespan\">dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code class=\"codespan\">dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code class=\"codespan\">'path://'</code> in ECharts. As compared with a raster image, vector paths prevent jagging and blurring when scaled, and have better control over changing colors. The size of the vector icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about the format of the path. You may export vector paths from tools like Adobe </p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>" |
| }, |
| "itemStyle.decal(Object | 'none').symbolSize": { |
| "desc": "<p>Range of values: <code class=\"codespan\">0</code> to <code class=\"codespan\">1</code>, representing the size of symbol relative to decal.</p>\n" |
| }, |
| "itemStyle.decal(Object | 'none').symbolKeepAspect": { |
| "desc": "<p>Whether or not to keep the aspect ratio of the pattern.</p>\n" |
| }, |
| "itemStyle.decal(Object | 'none').color": { |
| "desc": "<p>For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.</p>\n" |
| }, |
| "itemStyle.decal(Object | 'none').backgroundColor": { |
| "desc": "<p>The background color of the decal will be over the color of the series itself, under the decal pattern.</p>\n" |
| }, |
| "itemStyle.decal(Object | 'none').dashArrayX(number | number[] | (number | number[])[]) = 5": { |
| "desc": "<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class=\"codespan\">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class=\"codespan\">dashArrayX</code> controls the horizontal pattern pattern. When its value is of type <code class=\"codespan\">number</code> or <code class=\"codespan\">number[]</code>, it is similar to <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is of type <code class=\"codespan\">number</code>, it means that the pattern and the blank space are of this value respectively. For example, <code class=\"codespan\">5</code> means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class=\"codespan\">number[]</code> type, it means that the pattern and empty space are loops of an array of values. For example: <code class=\"codespan\">[5, 10, 2, 6]</code> means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...</p>\n</li>\n<li><p>If of type <code class=\"codespan\">(number | number[])[]</code>, it means that each row is a loop with an array of values for the pattern and blank space. For example: <code class=\"codespan\">[10, [2, 5]]</code> means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"></iframe>\n\n" |
| }, |
| "itemStyle.decal(Object | 'none').dashArrayY(number | number[]) = 5": { |
| "desc": "<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class=\"codespan\">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class=\"codespan\">dashArrayY</code> controls the horizontal pattern pattern. Similar to <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is a <code class=\"codespan\">number</code> type, it means the pattern and the blank are each of this value. For example, <code class=\"codespan\">5</code> means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class=\"codespan\">number[]</code> type, it means that the pattern and empty space are loops of sequential array values. For example: <code class=\"codespan\">[5, 10, 2, 6]</code> means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"></iframe>\n\n" |
| }, |
| "itemStyle.decal(Object | 'none').rotation": { |
| "desc": "<p>The overall rotation angle (in radians) of the pattern, in the range from `-Math.</p>\n" |
| }, |
| "itemStyle.decal(Object | 'none').maxTileWidth": { |
| "desc": "<p>The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.</p>\n" |
| }, |
| "itemStyle.decal(Object | 'none').maxTileHeight": { |
| "desc": "<p>The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.</p>\n" |
| }, |
| "nodeClick": { |
| "desc": "\n\n<p>The action of clicking a sector, which can be:</p>\n<ul>\n<li><code class=\"codespan\">false</code>: nothing happens.</li>\n<li><code class=\"codespan\">'rootToNode'</code>: use the clicked sector as root.</li>\n<li><code class=\"codespan\">'link'</code>：if <a href=\"#series-sunburst.data.link\">link</a> is set, the page will redirect to it.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "rootToNode", |
| "options": "rootToNode,link" |
| } |
| }, |
| "sort": { |
| "desc": "\n\n<p>Sorting method that sectors use based on <a href=\"#series-sunburst.data.value\"><code class=\"codespan\">value</code></a>, which is the sum of children when not set. The default value <code class=\"codespan\">'desc'</code> states for descending order, while it can also be set to be <code class=\"codespan\">'asc'</code> for ascending order, or <code class=\"codespan\">null</code> for not sorting, or callback function like:</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>If there is no <code class=\"codespan\">name</code>, whether need to render it.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "emphasis": { |
| "desc": "<p>Configurations of emphasis state.</p>\n" |
| }, |
| "emphasis.focus": { |
| "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:</p>\n<ul>\n<li><code class=\"codespan\">'none'</code> Do not fade out other data, it's by default.</li>\n<li><code class=\"codespan\">'self'</code> Only focus (not fade out) the element of the currently highlighted data.</li>\n<li><code class=\"codespan\">'series'</code> Focus on all elements of the series which the currently highlighted data belongs to.</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">'ancestor'</code> Focus on all ancestor nodes.</li>\n<li><code class=\"codespan\">'descendant'</code> Focus on all descendants nodes.</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">emphasis: {\n focus: 'series',\n blurScope: 'coordinateSystem'\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1\" width=\"600\" height=\"400\"></iframe>\n\n" |
| }, |
| "emphasis.blurScope": { |
| "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n<p>The range of fade out when <code class=\"codespan\">focus</code> is enabled. Support the following configurations</p>\n<ul>\n<li><code class=\"codespan\">'coordinateSystem'</code></li>\n<li><code class=\"codespan\">'series'</code></li>\n<li><code class=\"codespan\">'global'</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> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</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>Align of text, which can be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>. Note that <code class=\"codespan\">'left'</code> stands for inner side, and <code class=\"codespan\">'right'</code> stands for outer side.</p>\n<p>Same to <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>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "0", |
| "step": "1", |
| "max": "360" |
| } |
| }, |
| "emphasis.label.show": { |
| "desc": "\n\n<p>Whether to show label.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "emphasis.label.position": { |
| "desc": "\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "emphasis.label.distance": { |
| "desc": "\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.offset": { |
| "desc": "\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "emphasis.label.formatter": { |
| "desc": "<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">'xxx'</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">'product'</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</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> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "emphasis.label.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "emphasis.label.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "emphasis.label.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "emphasis.label.fontSize": { |
| "desc": "\n\n<p> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "emphasis.label.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "emphasis.label.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "emphasis.label.shadowColor": { |
| "desc": "\n\n<p>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "emphasis.label.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "emphasis.label.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "emphasis.label.rich": { |
| "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n" |
| }, |
| "emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</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> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be 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>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be 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>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine": { |
| "desc": "<p>Configuration of label guide line.</p>\n" |
| }, |
| "emphasis.labelLine.show": { |
| "desc": "\n\n<p>Whether to show the label guide line.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.width": { |
| "desc": "\n\n<p> line width.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.type": { |
| "desc": "\n\n<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 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> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n" |
| }, |
| "emphasis.itemStyle.color": { |
| "desc": "\n\n<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.itemStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.itemStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.itemStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "emphasis.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.itemStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "emphasis.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.itemStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "blur": { |
| "desc": "<p>Configurations of blur state. Available when <a href=\"#series-sunburst.emphasis.focus\">emphasis.focus</a> is set.</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> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</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>Align of text, which can be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>. Note that <code class=\"codespan\">'left'</code> stands for inner side, and <code class=\"codespan\">'right'</code> stands for outer side.</p>\n<p>Same to <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>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "0", |
| "step": "1", |
| "max": "360" |
| } |
| }, |
| "blur.label.show": { |
| "desc": "\n\n<p>Whether to show label.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "blur.label.position": { |
| "desc": "\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "blur.label.distance": { |
| "desc": "\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.offset": { |
| "desc": "\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "blur.label.formatter": { |
| "desc": "<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">'xxx'</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">'product'</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</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> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "blur.label.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "blur.label.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "blur.label.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "blur.label.fontSize": { |
| "desc": "\n\n<p> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "blur.label.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "blur.label.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "blur.label.backgroundColor": { |
| "desc": "\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.label.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.label.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "blur.label.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "blur.label.shadowColor": { |
| "desc": "\n\n<p>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.label.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "blur.label.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "blur.label.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.label.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "blur.label.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "blur.label.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "blur.label.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "blur.label.rich": { |
| "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n" |
| }, |
| "blur.label.rich.<style_name>.color": { |
| "desc": "\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "blur.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "blur.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "blur.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</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> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "blur.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be 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>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be 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>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "blur.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.width": { |
| "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "blur.label.rich.<style_name>.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "blur.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "blur.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine": { |
| "desc": "<p>Configuration of label guide line.</p>\n" |
| }, |
| "blur.labelLine.show": { |
| "desc": "\n\n<p>Whether to show the label guide line.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "blur.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.labelLine.lineStyle.width": { |
| "desc": "\n\n<p> line width.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine.lineStyle.type": { |
| "desc": "\n\n<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "blur.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "blur.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 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> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n" |
| }, |
| "blur.itemStyle.color": { |
| "desc": "\n\n<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.itemStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.itemStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.itemStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "blur.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.itemStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "blur.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.itemStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "select": { |
| "desc": "<p>Configurations of select state. Available when <a href=\"#series-sunburst.selectedMode\">selectedMode</a> is set.</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> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</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>Align of text, which can be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>. Note that <code class=\"codespan\">'left'</code> stands for inner side, and <code class=\"codespan\">'right'</code> stands for outer side.</p>\n<p>Same to <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>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "0", |
| "step": "1", |
| "max": "360" |
| } |
| }, |
| "select.label.show": { |
| "desc": "\n\n<p>Whether to show label.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "select.label.position": { |
| "desc": "\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "select.label.distance": { |
| "desc": "\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.offset": { |
| "desc": "\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "select.label.formatter": { |
| "desc": "<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">'xxx'</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">'product'</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</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> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "select.label.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "select.label.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "select.label.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "select.label.fontSize": { |
| "desc": "\n\n<p> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "select.label.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "select.label.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "select.label.backgroundColor": { |
| "desc": "\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.label.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.label.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "select.label.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "select.label.shadowColor": { |
| "desc": "\n\n<p>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.label.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "select.label.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "select.label.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.label.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "select.label.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "select.label.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "select.label.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "select.label.rich": { |
| "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n" |
| }, |
| "select.label.rich.<style_name>.color": { |
| "desc": "\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "select.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "select.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "select.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</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> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "select.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be 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>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be 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>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "select.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.width": { |
| "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "select.label.rich.<style_name>.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "select.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "select.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine": { |
| "desc": "<p>Configuration of label guide line.</p>\n" |
| }, |
| "select.labelLine.show": { |
| "desc": "\n\n<p>Whether to show the label guide line.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "select.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.labelLine.lineStyle.width": { |
| "desc": "\n\n<p> line width.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine.lineStyle.type": { |
| "desc": "\n\n<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "select.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "select.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 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> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n" |
| }, |
| "select.itemStyle.color": { |
| "desc": "\n\n<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.itemStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.itemStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.itemStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "select.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.itemStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "select.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.itemStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "selectedMode": { |
| "desc": "<blockquote>\n<p>Since <code class=\"codespan\">v5.0.0</code></p>\n</blockquote>\n\n\n<p>Selected mode. It is enabled by default, and you may set it to be <code class=\"codespan\">false</code> to disabled it.</p>\n<p>Besides, it can be set to <code class=\"codespan\">'single'</code> or <code class=\"codespan\">'multiple'</code>, for single selection and multiple selections.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "false,true,single,multiple" |
| } |
| }, |
| "levels": { |
| "desc": "<p><strong>Multiple levels</strong></p>\n<p>Sunburst chart has a leveled structure. To make it convenient, we provide a <code class=\"codespan\">levels</code> option, which is an array. The first element of it is for returning to parent node when data mining. The following elements are for levels from center to outside.</p>\n<p>For example, if we don't want the data mining, and want to set the most inside sector to be red, and text to be blue, we can set the option like:</p>\n<pre><code class=\"lang-js\">series: {\n // ...\n levels: [\n {\n // Blank setting for data mining\n },\n {\n // The most inside level\n itemStyle: {\n color: 'red'\n },\n label: {\n color: 'blue'\n }\n },\n {\n // The second level\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> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</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>Align of text, which can be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>. Note that <code class=\"codespan\">'left'</code> stands for inner side, and <code class=\"codespan\">'right'</code> stands for outer side.</p>\n<p>Same to <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>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "0", |
| "step": "1", |
| "max": "360" |
| } |
| }, |
| "levels.label.show": { |
| "desc": "\n\n<p>Whether to show label.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "levels.label.position": { |
| "desc": "\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.label.distance": { |
| "desc": "\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.offset": { |
| "desc": "\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.label.formatter": { |
| "desc": "<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">'xxx'</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">'product'</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</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> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.label.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.label.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.label.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.label.fontSize": { |
| "desc": "\n\n<p> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.label.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.label.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.label.backgroundColor": { |
| "desc": "\n\n<p>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.label.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.label.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.label.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.label.shadowColor": { |
| "desc": "\n\n<p>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.label.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.label.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.label.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.label.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.label.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.label.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "levels.label.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "levels.label.rich": { |
| "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n" |
| }, |
| "levels.label.rich.<style_name>.color": { |
| "desc": "\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</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> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be 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>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be 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>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.width": { |
| "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "levels.label.rich.<style_name>.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "levels.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.labelLine": { |
| "desc": "<p>Configuration of label guide line.</p>\n" |
| }, |
| "levels.labelLine.show": { |
| "desc": "\n\n<p>Whether to show the label guide line.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "levels.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.labelLine.lineStyle.width": { |
| "desc": "\n\n<p> line width.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.labelLine.lineStyle.type": { |
| "desc": "\n\n<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "levels.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 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> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n" |
| }, |
| "levels.itemStyle.color": { |
| "desc": "\n\n<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.itemStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.itemStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.itemStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "levels.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.itemStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.itemStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "levels.emphasis": { |
| "desc": "<p>Emphasis state.</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> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</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>Align of text, which can be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>. Note that <code class=\"codespan\">'left'</code> stands for inner side, and <code class=\"codespan\">'right'</code> stands for outer side.</p>\n<p>Same to <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>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "0", |
| "step": "1", |
| "max": "360" |
| } |
| }, |
| "levels.emphasis.label.show": { |
| "desc": "\n\n<p>Whether to show label.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "levels.emphasis.label.position": { |
| "desc": "\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.emphasis.label.distance": { |
| "desc": "\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.offset": { |
| "desc": "\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.emphasis.label.formatter": { |
| "desc": "<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">'xxx'</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">'product'</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</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> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.emphasis.label.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.emphasis.label.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.emphasis.label.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.emphasis.label.fontSize": { |
| "desc": "\n\n<p> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.emphasis.label.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.label.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.label.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.emphasis.label.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.label.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.emphasis.label.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "levels.emphasis.label.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "levels.emphasis.label.rich": { |
| "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n" |
| }, |
| "levels.emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</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> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be 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>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be 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>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "levels.emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "levels.emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine": { |
| "desc": "<p>Configuration of label guide line.</p>\n" |
| }, |
| "levels.emphasis.labelLine.show": { |
| "desc": "\n\n<p>Whether to show the label guide line.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.width": { |
| "desc": "\n\n<p> line width.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.type": { |
| "desc": "\n\n<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 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> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n" |
| }, |
| "levels.emphasis.itemStyle.color": { |
| "desc": "\n\n<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.itemStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.itemStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.itemStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "levels.emphasis.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.itemStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.emphasis.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.itemStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "levels.blur": { |
| "desc": "<p>Blur state.</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> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</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>Align of text, which can be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>. Note that <code class=\"codespan\">'left'</code> stands for inner side, and <code class=\"codespan\">'right'</code> stands for outer side.</p>\n<p>Same to <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>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "0", |
| "step": "1", |
| "max": "360" |
| } |
| }, |
| "levels.blur.label.show": { |
| "desc": "\n\n<p>Whether to show label.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "levels.blur.label.position": { |
| "desc": "\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.blur.label.distance": { |
| "desc": "\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.offset": { |
| "desc": "\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.blur.label.formatter": { |
| "desc": "<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">'xxx'</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">'product'</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</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> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.blur.label.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.blur.label.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.blur.label.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.blur.label.fontSize": { |
| "desc": "\n\n<p> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.blur.label.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.blur.label.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.label.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.label.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.blur.label.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.label.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.blur.label.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.blur.label.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.label.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.blur.label.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.blur.label.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "levels.blur.label.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "levels.blur.label.rich": { |
| "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n" |
| }, |
| "levels.blur.label.rich.<style_name>.color": { |
| "desc": "\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</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> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be 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>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be 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>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.width": { |
| "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "levels.blur.label.rich.<style_name>.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "levels.blur.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine": { |
| "desc": "<p>Configuration of label guide line.</p>\n" |
| }, |
| "levels.blur.labelLine.show": { |
| "desc": "\n\n<p>Whether to show the label guide line.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.width": { |
| "desc": "\n\n<p> line width.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.type": { |
| "desc": "\n\n<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 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> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n" |
| }, |
| "levels.blur.itemStyle.color": { |
| "desc": "\n\n<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.itemStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.itemStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.itemStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "levels.blur.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.itemStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.blur.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.itemStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "levels.select": { |
| "desc": "<p>Select state.</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> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>。</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class=\"codespan\">label</code> is placed under <code class=\"codespan\">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class=\"codespan\">label</code>is taken to be at the same level with <code class=\"codespan\">itemStyle</code>, and has <code class=\"codespan\">emphasis</code> as <code class=\"codespan\">itemStyle</code> does.</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>Align of text, which can be <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, or <code class=\"codespan\">'right'</code>. Note that <code class=\"codespan\">'left'</code> stands for inner side, and <code class=\"codespan\">'right'</code> stands for outer side.</p>\n<p>Same to <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>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "0", |
| "step": "1", |
| "max": "360" |
| } |
| }, |
| "levels.select.label.show": { |
| "desc": "\n\n<p>Whether to show label.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "levels.select.label.position": { |
| "desc": "\n\n\n\n<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.select.label.distance": { |
| "desc": "\n\n<p>Distance to the host graphic element.</p>\n<p>It is valid only when <code class=\"codespan\">position</code> is string value (like <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.offset": { |
| "desc": "\n\n<p>Whether to move text slightly. For example: <code class=\"codespan\">[30, 40]</code> means move <code class=\"codespan\">30</code> horizontally and move <code class=\"codespan\">40</code> vertically.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.select.label.formatter": { |
| "desc": "<p>Data label formatter, which supports string template and callback function. In either form, <code class=\"codespan\">\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>: series name.</li>\n<li><code class=\"codespan\">{b}</code>: the name of a data item.</li>\n<li><code class=\"codespan\">{c}</code>: the value of a data item.</li>\n<li><code class=\"codespan\">{@xxx}</code>: the value of a dimension named <code class=\"codespan\">'xxx'</code>, for example, <code class=\"codespan\">{@product}</code> refers the value of <code class=\"codespan\">'product'</code> dimension.</li>\n<li><code class=\"codespan\">{@[n]}</code>: the value of a dimension at the index of <code class=\"codespan\">n</code>, for example, <code class=\"codespan\">{@[3]}</code> refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code class=\"codespan\">params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</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> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.select.label.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.select.label.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.select.label.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.select.label.fontSize": { |
| "desc": "\n\n<p> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.select.label.verticalAlign": { |
| "desc": "\n\n<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.select.label.lineHeight": { |
| "desc": "\n\n<p>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.label.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.label.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.select.label.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.label.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.width": { |
| "desc": "\n\n<p>Width of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.select.label.height": { |
| "desc": "\n\n<p>Height of text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.select.label.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.label.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.select.label.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.overflow": { |
| "desc": "\n\n<p>Determine how to display the text when it's overflow. Available when <code class=\"codespan\">width</code> is set.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the text and trailing with <code class=\"codespan\">ellipsis</code>.</li>\n<li><code class=\"codespan\">'break'</code> Break by word</li>\n<li><code class=\"codespan\">'breakAll'</code> Break by character.</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.select.label.ellipsis": { |
| "desc": "<p>Ellipsis to be displayed when <code class=\"codespan\">overflow</code> is set to <code class=\"codespan\">truncate</code>.</p>\n" |
| }, |
| "levels.select.label.lineOverflow": { |
| "desc": "<p>Determine how to display the text when it's overflow on height.</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> Truncate the overflow lines.</li>\n</ul>\n" |
| }, |
| "levels.select.label.rich": { |
| "desc": "<p>"Rich text styles" can be defined in this <code class=\"codespan\">rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n" |
| }, |
| "levels.select.label.rich.<style_name>.color": { |
| "desc": "\n\n<p> text color.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p> font style.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p> font thick weight.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p> font family.</p>\n<p>Can also be 'serif' , 'monospace', ...</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> font size.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p>If <code class=\"codespan\">align</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be 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>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p>If <code class=\"codespan\">verticalAlign</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be 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>Line height of the text fragment.</p>\n<p>If <code class=\"codespan\">lineHeight</code> is not set in <code class=\"codespan\">rich</code>, <code class=\"codespan\">lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 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>Background color of the text fragment.</p>\n<p>Can be color string, like <code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code class=\"codespan\">width</code> or <code class=\"codespan\">height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>Border color of the text fragment.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>Border width of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>Border radius of the text fragment.</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>Padding of the text fragment, for example:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>: represents padding of <code class=\"codespan\">[top, right, bottom, left]</code>.</li>\n<li><code class=\"codespan\">padding: 4</code>: represents <code class=\"codespan\">padding: [4, 4, 4, 4]</code>.</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>: represents <code class=\"codespan\">padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <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>Shadow color of the text block.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>Show blur of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text block.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.width": { |
| "desc": "<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p><code class=\"codespan\">width</code> can also be percent string, like <code class=\"codespan\">'100%'</code>, which represents the percent of <code class=\"codespan\">contentWidth</code> (that is, the width without <code class=\"codespan\">padding</code>) of its container box. It is based on <code class=\"codespan\">contentWidth</code> because that each text fragment is layout based on the <code class=\"codespan\">content box</code>, where it makes no sense that calculating width based on <code class=\"codespan\">outerWith</code> in prectice.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "levels.select.label.rich.<style_name>.height": { |
| "desc": "<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code class=\"codespan\">backgroundColor</code>).</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> specifies the width and height of the content, without <code class=\"codespan\">padding</code>.</p>\n<p>Notice, <code class=\"codespan\">width</code> and <code class=\"codespan\">height</code> only work when <code class=\"codespan\">rich</code> specified.</p>\n" |
| }, |
| "levels.select.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>Storke color of the text.</p>\n<p>If set as <code class=\"codespan\">'inherit'</code>, the color will assigned as visual color, such as series color.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>Storke line width of the text.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>Shadow color of the text itself.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>Shadow blue of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>Shadow X offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>Shadow Y offset of the text itself.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine": { |
| "desc": "<p>Configuration of label guide line.</p>\n" |
| }, |
| "levels.select.labelLine.show": { |
| "desc": "\n\n<p>Whether to show the label guide line.</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.width": { |
| "desc": "\n\n<p> line width.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.type": { |
| "desc": "\n\n<p> line type.</p>\n<p>Options are:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 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> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>。</strong></p>\n" |
| }, |
| "levels.select.itemStyle.color": { |
| "desc": "\n\n<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class=\"codespan\">'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code class=\"codespan\">'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.itemStyle.borderColor": { |
| "desc": "\n\n<p> border color, whose format is similar to that of <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.itemStyle.borderWidth": { |
| "desc": "\n\n<p> border width. No border when it is set to be 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.itemStyle.borderType": { |
| "desc": "\n\n<p>Border type, which can be <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, or <code class=\"codespan\">'dotted'</code>. <code class=\"codespan\">'solid'</code> by default.</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "levels.select.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>Size of shadow blur. This attribute should be used along with <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.itemStyle.shadowColor": { |
| "desc": "\n\n<p>Shadow color. Support same format as <code class=\"codespan\">color</code>.</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.select.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>Offset distance on the vertical direction of shadow.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.itemStyle.opacity": { |
| "desc": "\n\n<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "animation": { |
| "desc": "\n\n<p>Whether to enable animation.</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true", |
| "clean": "true" |
| } |
| }, |
| "animationThreshold": { |
| "desc": "<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n" |
| }, |
| "animationDuration": { |
| "desc": "\n\n<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\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>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/en/editor.html?c=line-easing\" target=\"_blank\">easing effect example</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 before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n" |
| }, |
| "animationDurationUpdate": { |
| "desc": "\n\n<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1000", |
| "step": "20" |
| } |
| }, |
| "animationEasingUpdate": { |
| "desc": "\n\n<p>Easing method used for animation.</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 before updating animation, which supports callback function for different data to have different animation effects.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n" |
| } |
| } |
