| window.__EC_DOC_option_series_treemap = { |
| "id": { |
| "desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n" |
| }, |
| "name": { |
| "desc": "<p>系列名称，用于<a href=\"#tooltip\">tooltip</a>的显示，<a href=\"#legend\">legend</a> 的图例筛选，在 <code class=\"codespan\">setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n" |
| }, |
| "zlevel": { |
| "desc": "<p>所有图形的 zlevel 值。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层，不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n" |
| }, |
| "z": { |
| "desc": "<p>组件的所有图形的<code class=\"codespan\">z</code>值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n<p><code class=\"codespan\">z</code>相比<code class=\"codespan\">zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>\n" |
| }, |
| "left": { |
| "desc": "\n\n<p>treemap 组件离容器左侧的距离。</p>\n<p><code class=\"codespan\">left</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>。</p>\n<p>如果 <code class=\"codespan\">left</code> 的值为<code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>，组件会根据相应的位置自动对齐。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "top": { |
| "desc": "\n\n<p>treemap 组件离容器上侧的距离。</p>\n<p><code class=\"codespan\">top</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>。</p>\n<p>如果 <code class=\"codespan\">top</code> 的值为<code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>，组件会根据相应的位置自动对齐。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "right": { |
| "desc": "\n\n<p>treemap 组件离容器右侧的距离。</p>\n<p><code class=\"codespan\">right</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "bottom": { |
| "desc": "\n\n<p>treemap 组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "width": { |
| "desc": "\n\n<p>treemap 组件的宽度。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "50%" |
| } |
| }, |
| "height": { |
| "desc": "\n\n<p>treemap 组件的高度。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "50%" |
| } |
| }, |
| "squareRatio": { |
| "desc": "\n\n<p>期望矩形长宽比率。布局计算时会尽量向这个比率靠近。</p>\n<p>默认为黄金比：<code class=\"codespan\">0.5 * (1 + Math.sqrt(5))</code>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0.1", |
| "default": "0.75", |
| "step": "0.1" |
| } |
| }, |
| "leafDepth": { |
| "desc": "\n\n<p>设置了 <code class=\"codespan\">leafDepth</code> 后，下钻（<code class=\"codespan\">drill down</code>）功能开启。<code class=\"codespan\">drill down</code> 功能即点击后才展示子层级。</p>\n<p><code class=\"codespan\">leafDepth</code> 表示『展示几层』，层次更深的节点则被隐藏起来。点击则可下钻看到层次更深的节点。</p>\n<p>例如，<code class=\"codespan\">leafDepth</code> 设置为 <code class=\"codespan\">1</code>，表示展示一层节点。</p>\n<p>默认没有开启 <code class=\"codespan\">drill down</code>（即 <code class=\"codespan\">leafDepth</code> 为 <code class=\"codespan\">null</code> 或 <code class=\"codespan\">undefined</code>）。</p>\n<p><strong>drill down 的例子：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=treemap-drill-down&edit=1&reset=1\" width=\"800\" height=\"500\"><iframe />\n\n", |
| "uiControl": { |
| "type": "number", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "drillDownIcon": { |
| "desc": "<p>当节点可以下钻时的提示符。只能是字符。</p>\n" |
| }, |
| "roam": { |
| "desc": "\n\n<p>是否开启拖拽漫游（移动和缩放）。可取值有：</p>\n<ul>\n<li><code class=\"codespan\">false</code>：关闭。</li>\n<li><code class=\"codespan\">'scale'</code> 或 <code class=\"codespan\">'zoom'</code>：只能够缩放。</li>\n<li><code class=\"codespan\">'move'</code> 或 <code class=\"codespan\">'pan'</code>：只能够平移。</li>\n<li><code class=\"codespan\">true</code>：缩放和平移均可。</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "true,false,scale,move" |
| } |
| }, |
| "nodeClick": { |
| "desc": "<p>点击节点后的行为。可取值为：</p>\n<ul>\n<li><code class=\"codespan\">false</code>：节点点击无反应。</li>\n<li><code class=\"codespan\">'zoomToNode'</code>：点击节点后缩放到节点。</li>\n<li><code class=\"codespan\">'link'</code>：如果节点数据中有 <a href=\"#series-treemap.data.link\">link</a> 点击节点后会进行超链接跳转。</li>\n</ul>\n" |
| }, |
| "zoomToNodeRatio": { |
| "desc": "\n\n<p>点击某个节点，会自动放大那个节点到合适的比例（节点占可视区域的面积比例），这个配置项就是这个比例。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "0.1", |
| "step": "0.01" |
| } |
| }, |
| "visualDimension": { |
| "desc": "<p><code class=\"codespan\">treemap</code> 中支持对数据其他维度进行视觉映射。</p>\n<p>首先，treemap的数据格式（参见 <a href=\"#series-treemap.data\">series-treemap.data</a>）中，每个节点的 <code class=\"codespan\">value</code> 都可以是数组。数组每项是一个『维度』（dimension）。<code class=\"codespan\">visualDimension</code> 指定了额外的『视觉映射』使用的是数组的哪一项。默认为第 <code class=\"codespan\">0</code> 项。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">visualDimension</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "visualMin": { |
| "desc": "\n\n<p>当前层级的最小 value 值。如果不设置则自动统计。</p>\n<p>手动指定 <code class=\"codespan\">visualMin</code>、<code class=\"codespan\">visualMax</code> ，即手动控制了 visual mapping 的值域（当 <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> 为 <code class=\"codespan\">'value'</code> 时有意义）。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0" |
| } |
| }, |
| "visualMax": { |
| "desc": "\n\n<p>当前层级的最大 value 值。如果不设置则自动统计。</p>\n<p>手动指定 <code class=\"codespan\">visualMin</code>、<code class=\"codespan\">visualMax</code> ，即手动控制了 visual mapping 的值域（当 <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> 为 <code class=\"codespan\">'value'</code> 时有意义）。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100" |
| } |
| }, |
| "colorAlpha": { |
| "desc": "<p>本系列默认的颜色透明度选取范围。</p>\n<p>数值范围 0 ~ 1</p>\n<p>例如, <code class=\"codespan\">colorAlpha</code> 可以是 <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">colorAlpha</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "colorSaturation": { |
| "desc": "<p>本系列默认的节点的颜色饱和度 选取范围。</p>\n<p>数值范围 0 ~ 1。</p>\n<p>例如, <code class=\"codespan\">colorSaturation</code> 可以是 <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">colorSaturation</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "colorMappingBy": { |
| "desc": "\n\n<p>表示同一层级节点，在颜色列表中（参见 <code class=\"codespan\">color</code> 属性）选择时，按照什么来选择。可选值：</p>\n<ul>\n<li><code class=\"codespan\">'value'</code>：</li>\n</ul>\n<p>将节点的值（即 <a href=\"#series-treemap.data.value\">series-treemap.data.value</a>）映射到颜色列表中。</p>\n<p>这样得到的颜色，反应了节点值的大小。</p>\n<p>可以使用 <a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> 属性来设置，用 <a href=\"#series-treemap.data\">data</a> 中哪个纬度的值来映射。</p>\n<ul>\n<li><code class=\"codespan\">'index'</code>：</li>\n</ul>\n<p>将节点的 <code class=\"codespan\">index</code>（序号）映射到颜色列表中。即同一层级中，第一个节点取颜色列表中第一个颜色，第二个节点取第二个。</p>\n<p>这样得到的颜色，便于区分相邻节点。</p>\n<ul>\n<li><code class=\"codespan\">'id'</code>：</li>\n</ul>\n<p>将节点的 <code class=\"codespan\">id</code>（即 <a href=\"#series-treemap.data.id\">series-treemap.data.id</a>）映射到颜色列表中。<code class=\"codespan\">id</code> 是用户指定的，这样能够使得，在treemap 通过 setOption 变化数值时，同一 <code class=\"codespan\">id</code> 映射到同一颜色，保持一致性。参见 <a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=treemap-obama&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">colorMappingBy</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "index,value,id" |
| } |
| }, |
| "visibleMin": { |
| "desc": "\n\n<p>如果某个节点的矩形的面积，小于这个数值（单位：px平方），这个节点就不显示。</p>\n<p>如果不加这个限制，很小的节点会影响显示效果。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">visibleMin</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "10", |
| "min": "0" |
| } |
| }, |
| "childrenVisibleMin": { |
| "desc": "\n\n<p>如果某个节点的矩形面积，小于这个数值（单位：px平方），则不显示这个节点的子节点。</p>\n<p>这能够在矩形面积不足够大时候，隐藏节点的细节。当用户用鼠标缩放节点时，如果面积大于此阈值，又会显示子节点。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">childrenVisibleMin</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "10", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label": { |
| "desc": "<p><code class=\"codespan\">label</code> 描述了每个矩形中，文本标签的样式。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">label</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel": { |
| "desc": "<p><code class=\"codespan\">upperLabel</code> 用于显示矩形的父节点的标签。当 <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> 为 <code class=\"codespan\">true</code> 的时候，『显示父节点标签』功能开启。</p>\n<p>同 <a href=\"#series-treemap.label\">series-treemap.label</a> 一样，<code class=\"codespan\">upperLabel</code> 可以存在于 <a href=\"#series-treemap\">series-treemap</a> 的根节点，或者 <a href=\"#series-treemap.level\">series-treemap.level</a> 中，或者 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个数据项中。</p>\n<p><a href=\"#series-treemap.label\">series-treemap.label</a> 描述的是，当前节点为叶节点时标签的样式；<code class=\"codespan\">upperLabel</code> 描述的是，当前节点为非叶节点（即含有子节点）时标签的样式。（此时标签一般会被显示在节点的最上部）</p>\n<p>参见：</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">label</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "upperLabel.height": { |
| "desc": "\n\n<p>父节点标签区的高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "20", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "itemStyle": { |
| "desc": "<blockquote>\n<p>注：treemap中 <code class=\"codespan\">itemStyle</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "itemStyle.colorAlpha": { |
| "desc": "\n\n<p>矩形颜色的透明度。取值范围是 0 ~ 1 之间的浮点数。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.01", |
| "min": "0", |
| "max": "1", |
| "default": "1" |
| } |
| }, |
| "itemStyle.colorSaturation": { |
| "desc": "\n\n<p>矩形颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.01", |
| "min": "0", |
| "max": "1", |
| "default": "0.5" |
| } |
| }, |
| "itemStyle.borderRadius": { |
| "desc": "\n\n<p>矩形圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB", |
| "clean": "true" |
| } |
| }, |
| "itemStyle.borderWidth": { |
| "desc": "\n\n<p>矩形边框线宽。为 0 时无边框。而矩形的内部子矩形（子节点）的间隔距离是由 <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a> 指定的。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5", |
| "min": "0" |
| } |
| }, |
| "itemStyle.gapWidth": { |
| "desc": "\n\n<p>矩形内部子矩形（子节点）的间隔距离。</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/img/treemap-border-gap.png\"></p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5", |
| "min": "0" |
| } |
| }, |
| "itemStyle.borderColor": { |
| "desc": "\n\n<p>矩形边框 和 矩形间隔（gap）的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "itemStyle.borderColorSaturation": { |
| "desc": "\n\n<p>矩形边框的颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。</p>\n<p>注意：</p>\n<p>如果设置此属性，则 <code class=\"codespan\">borderColor</code> 的设置无效，而是：取当前节点计算出的颜色（比如从父节点遗传而来），在此颜色值上设置 <code class=\"codespan\">borderColorSaturation</code> 得到最终颜色。这种方式，能够做出『不同区块有不同色调的矩形间隔线』的效果，能够便于区分层级。</p>\n<p><strong>矩形边框（border）/缝隙（gap）设置如何避免混淆</strong></p>\n<p>如果统一用一种颜色设置矩形的缝隙（gap），那么当不同层级的矩形同时展示时可能会出现混淆。</p>\n<p>参见 <a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/treemap-borderColor&edit=1&reset=1\" target=\"_blank\">例子</a>，注意其中红色的区块中的子矩形其实是更深层级，和其他用白色缝隙区分的矩形不是在一个层级。所以，红色区块中矩形的分割线的颜色，我们在 <code class=\"codespan\">borderColorSaturation</code> 中设置为『加了饱和度变化的红颜色』，以示区别。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.01", |
| "min": "0", |
| "max": "1", |
| "default": "0.5" |
| } |
| }, |
| "itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "emphasis": { |
| "desc": "<p>高亮状态配置。</p>\n" |
| }, |
| "emphasis.focus": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：</p>\n<ul>\n<li><code class=\"codespan\">'none'</code> 不淡出其它图形，默认使用该配置。</li>\n<li><code class=\"codespan\">'self'</code> 只聚焦（不淡出）当前高亮的数据的图形。</li>\n<li><code class=\"codespan\">'series'</code> 聚焦当前高亮的数据所在的系列的所有图形。</li>\n</ul>\n<ul>\n<li><code class=\"codespan\">'ancestor'</code> 聚焦所有祖先节点</li>\n<li><code class=\"codespan\">'descendant'</code> 聚焦所有子孙节点</li>\n</ul>\n<p><strong>示例：</strong></p>\n<p>下面代码配置了柱状图在高亮一个图形的时候，淡出当前直角坐标系所有其它的系列。</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/next/examples/zh/view.html?c=bar-y-category-stack&reset=1&edit=1\" width=\"600\" height=\"400\"><iframe />\n\n" |
| }, |
| "emphasis.blurScope": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>在开启<code class=\"codespan\">focus</code>的时候，可以通过<code class=\"codespan\">blurScope</code>配置淡出的范围。支持如下配置</p>\n<ul>\n<li><code class=\"codespan\">'coordinateSystem'</code> 淡出范围为坐标系，默认使用该配置。</li>\n<li><code class=\"codespan\">'series'</code> 淡出范围为系列。</li>\n<li><code class=\"codespan\">'global'</code> 淡出范围为全局。</li>\n</ul>\n" |
| }, |
| "emphasis.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "emphasis.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "emphasis.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "emphasis.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "emphasis.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "emphasis.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "emphasis.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "emphasis.labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "emphasis.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "emphasis.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "emphasis.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "emphasis.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "emphasis.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "emphasis.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "emphasis.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "emphasis.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "emphasis.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "emphasis.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "emphasis.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "emphasis.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "emphasis.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "emphasis.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "emphasis.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "emphasis.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "emphasis.upperLabel.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "emphasis.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "emphasis.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "emphasis.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "emphasis.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "emphasis.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "emphasis.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "emphasis.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "emphasis.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>淡出状态配置。</p>\n" |
| }, |
| "blur.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "blur.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "blur.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "blur.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "blur.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "blur.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "blur.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "blur.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "blur.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "blur.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "blur.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "blur.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "blur.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "blur.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "blur.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "blur.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "blur.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "blur.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "blur.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "blur.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "blur.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "blur.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "blur.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "blur.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "blur.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "blur.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "blur.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "blur.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "blur.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "blur.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "blur.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "blur.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "blur.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "blur.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "blur.labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "blur.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "blur.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "blur.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "blur.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "blur.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "blur.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "blur.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "blur.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "blur.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "blur.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "blur.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "blur.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "blur.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "blur.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "blur.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "blur.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "blur.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "blur.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "blur.upperLabel.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "blur.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "blur.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "blur.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "blur.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "blur.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "blur.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "blur.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "blur.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "blur.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>选中状态配置。</p>\n" |
| }, |
| "select.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "select.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "select.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "select.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "select.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "select.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "select.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "select.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "select.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "select.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "select.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "select.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "select.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "select.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "select.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "select.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "select.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "select.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "select.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "select.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "select.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "select.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "select.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "select.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "select.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "select.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "select.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "select.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "select.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "select.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "select.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "select.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "select.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "select.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "select.labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "select.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "select.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "select.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "select.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "select.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "select.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "select.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "select.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "select.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "select.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "select.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "select.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "select.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "select.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "select.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "select.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "select.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "select.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "select.upperLabel.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "select.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "select.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "select.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "select.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "select.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "select.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "select.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "select.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "select.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "selectedMode": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n\n\n<p>选中模式的配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选<code class=\"codespan\">'single'</code>，<code class=\"codespan\">'multiple'</code>，分别表示单选还是多选。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "false,true,single,multiple" |
| } |
| }, |
| "breadcrumb": { |
| "desc": "<p>面包屑，能够显示当前节点的路径。</p>\n" |
| }, |
| "breadcrumb.show": { |
| "desc": "\n\n<p>是否显示面包屑。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "breadcrumb.left": { |
| "desc": "\n\n<p>asdf 组件离容器左侧的距离。</p>\n<p><code class=\"codespan\">left</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>。</p>\n<p>如果 <code class=\"codespan\">left</code> 的值为<code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>，组件会根据相应的位置自动对齐。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "breadcrumb.top": { |
| "desc": "\n\n<p>asdf 组件离容器上侧的距离。</p>\n<p><code class=\"codespan\">top</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>。</p>\n<p>如果 <code class=\"codespan\">top</code> 的值为<code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>，组件会根据相应的位置自动对齐。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "breadcrumb.right": { |
| "desc": "\n\n<p>asdf 组件离容器右侧的距离。</p>\n<p><code class=\"codespan\">right</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "breadcrumb.bottom": { |
| "desc": "\n\n<p>asdf 组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0%" |
| } |
| }, |
| "breadcrumb.height": { |
| "desc": "\n\n<p>面包屑的高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "22", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.emptyItemWidth": { |
| "desc": "\n\n<p>当面包屑没有内容时候，设个最小宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "25", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.itemStyle": { |
| "desc": "<p> 图形样式。</p>\n" |
| }, |
| "breadcrumb.itemStyle.color": { |
| "desc": "\n\n<p>boxplot图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.itemStyle.borderColor": { |
| "desc": "\n\n<p>boxplot图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>，不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.itemStyle.borderWidth": { |
| "desc": "\n\n<p>boxplot描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型，默认为实线，支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "breadcrumb.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "3", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "rgba(150,150,150,1)" |
| } |
| }, |
| "breadcrumb.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "breadcrumb.itemStyle.textStyle.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "breadcrumb.itemStyle.textStyle.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.itemStyle.textStyle.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.color": { |
| "desc": "\n\n<p>boxplot图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.borderColor": { |
| "desc": "\n\n<p>boxplot图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>，不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.borderWidth": { |
| "desc": "\n\n<p>boxplot描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型，默认为实线，支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "3", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "rgba(150,150,150,1)" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "breadcrumb.emphasis.itemStyle.textStyle.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "labelLine.showAbove": { |
| "desc": "<p>是否显示在图形上方。</p>\n" |
| }, |
| "labelLine.length2": { |
| "desc": "\n\n<p>视觉引导项第二段的长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "15", |
| "min": "0", |
| "step": "1" |
| } |
| }, |
| "labelLine.smooth": { |
| "desc": "\n\n<p>是否平滑视觉引导线，默认不平滑，可以设置成 <code class=\"codespan\">true</code> 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "labelLine.minTurnAngle": { |
| "desc": "<p>通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。</p>\n<p>可以设置为 0 - 180 度。</p>\n" |
| }, |
| "labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "labelLayout": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>标签的统一布局配置。</p>\n<p>该配置项是在每个系列默认的标签布局基础上，统一调整标签的<code class=\"codespan\">(x, y)</code>位置，标签对齐等属性以实现想要的标签布局效果。</p>\n<p>该配置项也可以是一个有如下参数的回调函数</p>\n<pre><code class=\"lang-js\">// 标签对应数据的 dataIndex\ndataIndex: number\n// 标签对应的数据类型，只在关系图中会有 node 和 edge 数据类型的区分\ndataType?: string\n// 标签对应的系列的 index\nseriesIndex: number\n// 标签显示的文本\ntext: string\n// 默认的标签的包围盒，由系列默认的标签布局决定\nlabelRect: {x: number, y: number, width: number, height: number}\n// 默认的标签水平对齐\nalign: 'left' | 'center' | 'right'\n// 默认的标签垂直对齐\nverticalAlign: 'top' | 'middle' | 'bottom'\n// 标签所对应的数据图形的包围盒，可用于定位标签位置\nrect: {x: number, y: number, width: number, height: number}\n// 默认引导线的位置，目前只有饼图(pie)和漏斗图(funnel)有默认标签位置\n// 如果没有该值则为 null\nlabelLinePoints?: number[][]\n</code></pre>\n<p><strong>示例：</strong></p>\n<p>将标签显示在图形右侧 10px 的位置，并且垂直居中：</p>\n<pre><code class=\"lang-js\">labelLayout(params) {\n return {\n x: params.rect.x + 10,\n y: params.rect.y + params.rect.height / 2,\n verticalAlign: 'middle',\n align: 'left'\n }\n}\n</code></pre>\n<p>根据图形的包围盒尺寸决定文本尺寸</p>\n<pre><code class=\"lang-js\">\nlabelLayout(params) {\n return {\n fontSize: Math.max(params.rect.width / 10, 5)\n };\n}\n</code></pre>\n" |
| }, |
| "labelLayout.hideOverlap": { |
| "desc": "<p>是否隐藏重叠的标签。</p>\n<p>下面示例演示了在关系图中开启该配置后，在缩放时可以实现自动的标签隐藏。</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=graph-label-overlap&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n" |
| }, |
| "labelLayout.moveOverlap": { |
| "desc": "<p>在标签重叠的时候是否挪动标签位置以防止重叠。</p>\n<p>目前支持配置为：</p>\n<ul>\n<li><code class=\"codespan\">'shiftX'</code> 水平方向依次位移，在水平方向对齐时使用</li>\n<li><code class=\"codespan\">'shiftY'</code> 垂直方向依次位移，在垂直方向对齐时使用</li>\n</ul>\n<p>下面是标签右对齐并配置垂直方向依次位移以防止重叠的示例。</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=scatter-label-align-right&edit=1&reset=1\" width=\"600\" height=\"400\"><iframe />\n\n" |
| }, |
| "labelLayout.x": { |
| "desc": "<p>标签的 x 位置。支持绝对的像素值或者<code class=\"codespan\">'20%'</code>这样的相对值。</p>\n" |
| }, |
| "labelLayout.y": { |
| "desc": "<p>标签的 y 位置。支持绝对的像素值或者<code class=\"codespan\">'20%'</code>这样的相对值。</p>\n" |
| }, |
| "labelLayout.dx": { |
| "desc": "<p>标签在 x 方向上的像素偏移。可以和<code class=\"codespan\">x</code>一起使用。</p>\n" |
| }, |
| "labelLayout.dy": { |
| "desc": "<p>标签在 y 方向上的像素偏移。可以和<code class=\"codespan\">y</code>一起使用</p>\n" |
| }, |
| "labelLayout.rotate": { |
| "desc": "<p>标签旋转角度。</p>\n" |
| }, |
| "labelLayout.width": { |
| "desc": "<p>标签显示的宽度。可以配合<code class=\"codespan\">overflow</code>使用控制标签显示在固定宽度内</p>\n" |
| }, |
| "labelLayout.height": { |
| "desc": "<p>标签显示的高度。可以配合<code class=\"codespan\">lineOverflow</code>使用控制标签显示在固定高度内</p>\n" |
| }, |
| "labelLayout.align": { |
| "desc": "<p>标签水平对齐方式。可以设置<code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>。</p>\n" |
| }, |
| "labelLayout.verticalAlign": { |
| "desc": "<p>标签垂直对齐方式。可以设置<code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>。</p>\n" |
| }, |
| "labelLayout.fontSize": { |
| "desc": "<p>The text size of the label.</p>\n" |
| }, |
| "labelLayout.draggable": { |
| "desc": "<p>标签是否可以允许用户通过拖拽二次调整位置。</p>\n" |
| }, |
| "labelLayout.labelLinePoints": { |
| "desc": "<p>标签引导线三个点的位置。格式为：</p>\n<pre><code class=\"lang-js\">[[x, y], [x, y], [x, y]]\n</code></pre>\n<p>在饼图中常用来微调已经计算好的引导线，其它情况一般不建议设置。</p>\n" |
| }, |
| "levels": { |
| "desc": "<p><strong>多层配置</strong></p>\n<p>treemap 中采用『三级配置』：</p>\n<pre><code>『每个节点』->『每个层级』->『每个系列』。\n</code></pre><p>即我们可以对每个节点进行配置，也可以对树的每个层级进行配置，也可以 series 上设置全局配置。节点上的设置，优先级最高。</p>\n<p>最常用的是『每个层级进行配置』，<code class=\"codespan\">levels</code> 配置项就是每个层级的配置。例如：</p>\n<pre><code class=\"lang-javascript\">// Notice that in fact the data structure is not "tree", but is "forest".\n// 注意，这个数据结构实际不是『树』而是『森林』\ndata: [\n {\n name: 'nodeA',\n children: [\n {name: 'nodeAA'},\n {name: 'nodeAB'},\n ]\n },\n {\n name: 'nodeB',\n children: [\n {name: 'nodeBA'}\n ]\n }\n],\nlevels: [\n {...}, // 『森林』的顶层配置。即含有 'nodeA', 'nodeB' 的这层。\n {...}, // 下一层配置，即含有 'nodeAA', 'nodeAB', 'nodeBA' 的这层。\n {...}, // 再下一层配置。\n ...\n]\n</code></pre>\n<p><strong>视觉映射的规则</strong></p>\n<p>treemap中首要关注的是如何在视觉上较好得区分『不同层级』、『同层级中不同类别』。这需要合理得设置不同层级的『矩形颜色』、『边界粗细』、『边界颜色』甚至『矩形颜色饱和度』等。</p>\n<p>参见这个<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=treemap-disk&edit=1&reset=1\" target=\"_blank\">例子</a>，最顶层级用颜色区分，分成了『红』『绿』『蓝』等大块。每个颜色块中是下一个层级，使用颜色的饱和度来区分（参见 <code class=\"codespan\">colorSaturation</code>）。最外层的矩形边界是『白色』，下层级的矩形边界是当前区块颜色加上饱和度处理（参见 <code class=\"codespan\">borderColorSaturation</code>）。</p>\n<p><code class=\"codespan\">treemap</code> 是通过这样的规则来支持这种配置的：每个层级计算用户配置的 <code class=\"codespan\">color</code>、<code class=\"codespan\">colorSaturation</code>、<code class=\"codespan\">borderColor</code>、<code class=\"codespan\">borderColorSaturation</code>等视觉信息（在levels中配置）。如果子节点没有配置，则继承父的配置，否则使用自己的配置）。</p>\n<p>这样，可以做到：父层级配置 <code class=\"codespan\">color</code> 列表，子层级配置 <code class=\"codespan\">colorSaturation</code>。父层级的每个节点会从 <code class=\"codespan\">color</code> 列表中得到一个颜色，子层级的节点会从 <code class=\"codespan\">colorSaturation</code> 中得到一个值，并且继承父节点得到的颜色，合成得到自己的最终颜色。</p>\n<p><strong>维度与『额外的视觉映射』</strong></p>\n<p>例子：每一个 <code class=\"codespan\">value</code> 字段是一个 Array，其中每个项对应一个维度（dimension）。</p>\n<pre><code class=\"lang-javascript\">[\n {\n value: [434, 6969, 8382],\n children: [\n {\n value: [1212, 4943, 5453],\n id: 'someid-1',\n name: 'description of this node',\n children: [...]\n },\n {\n value: [4545, 192, 439],\n id: 'someid-2',\n name: 'description of this node',\n children: [...]\n },\n ...\n ]\n },\n {\n value: [23, 59, 12],\n children: [...]\n },\n ...\n]\n</code></pre>\n<p>treemap 默认把第一个维度（Array 第一项）映射到『面积』上。而如果想表达更多信息，用户可以把其他的某一个维度（<a href=\"#series-treemap.viusalDimension\">series-treemap.visualDimension</a>），映射到其他的『视觉元素』上，比如颜色明暗等。参见<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=treemap-obama&edit=1&reset=1\" target=\"_blank\">例子</a>中，legend选择 <code class=\"codespan\">Growth</code>时的状态。</p>\n<p><strong>矩形边框（border）/缝隙（gap）设置如何避免混淆</strong></p>\n<p>如果统一用一种颜色设置矩形的缝隙（gap），那么当不同层级的矩形同时展示时可能会出现混淆。</p>\n<p>参见 <a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/treemap-borderColor&edit=1&reset=1\" target=\"_blank\">例子</a>，注意其中红色的区块中的子矩形其实是更深层级，和其他用白色缝隙区分的矩形不是在一个层级。所以，红色区块中矩形的分割线的颜色，我们在 <code class=\"codespan\">borderColorSaturation</code> 中设置为『加了饱和度变化的红颜色』，以示区别。</p>\n<p><strong>borderWidth, gapWidth, borderColor 的解释</strong></p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/treemap-border-gap.png\"></p>\n" |
| }, |
| "levels.visualDimension": { |
| "desc": "<p><code class=\"codespan\">treemap</code> 中支持对数据其他维度进行视觉映射。</p>\n<p>首先，treemap的数据格式（参见 <a href=\"#series-treemap.data\">series-treemap.data</a>）中，每个节点的 <code class=\"codespan\">value</code> 都可以是数组。数组每项是一个『维度』（dimension）。<code class=\"codespan\">visualDimension</code> 指定了额外的『视觉映射』使用的是数组的哪一项。默认为第 <code class=\"codespan\">0</code> 项。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">visualDimension</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "levels.visualMin": { |
| "desc": "\n\n<p>当前层级的最小 value 值。如果不设置则自动统计。</p>\n<p>手动指定 <code class=\"codespan\">visualMin</code>、<code class=\"codespan\">visualMax</code> ，即手动控制了 visual mapping 的值域（当 <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> 为 <code class=\"codespan\">'value'</code> 时有意义）。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0" |
| } |
| }, |
| "levels.visualMax": { |
| "desc": "\n\n<p>当前层级的最大 value 值。如果不设置则自动统计。</p>\n<p>手动指定 <code class=\"codespan\">visualMin</code>、<code class=\"codespan\">visualMax</code> ，即手动控制了 visual mapping 的值域（当 <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> 为 <code class=\"codespan\">'value'</code> 时有意义）。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100" |
| } |
| }, |
| "levels.color": { |
| "desc": "<p>表示同一层级的节点的 颜色 选取列表（选择规则见 <a href=\"#series-treemap.colorMappingBy\">colorMappingBy</a>）。默认为空时，选取系统color列表。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">color</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "levels.colorAlpha": { |
| "desc": "<p>表示同一层级的节点的颜色透明度选取范围。</p>\n<p>数值范围 0 ~ 1</p>\n<p>例如, <code class=\"codespan\">colorAlpha</code> 可以是 <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">colorAlpha</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "levels.colorSaturation": { |
| "desc": "<p>表示同一层级的节点的颜色饱和度 选取范围。</p>\n<p>数值范围 0 ~ 1。</p>\n<p>例如, <code class=\"codespan\">colorSaturation</code> 可以是 <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">colorSaturation</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "levels.colorMappingBy": { |
| "desc": "\n\n<p>表示同一层级节点，在颜色列表中（参见 <code class=\"codespan\">color</code> 属性）选择时，按照什么来选择。可选值：</p>\n<ul>\n<li><code class=\"codespan\">'value'</code>：</li>\n</ul>\n<p>将节点的值（即 <a href=\"#series-treemap.data.value\">series-treemap.data.value</a>）映射到颜色列表中。</p>\n<p>这样得到的颜色，反应了节点值的大小。</p>\n<p>可以使用 <a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> 属性来设置，用 <a href=\"#series-treemap.data\">data</a> 中哪个纬度的值来映射。</p>\n<ul>\n<li><code class=\"codespan\">'index'</code>：</li>\n</ul>\n<p>将节点的 <code class=\"codespan\">index</code>（序号）映射到颜色列表中。即同一层级中，第一个节点取颜色列表中第一个颜色，第二个节点取第二个。</p>\n<p>这样得到的颜色，便于区分相邻节点。</p>\n<ul>\n<li><code class=\"codespan\">'id'</code>：</li>\n</ul>\n<p>将节点的 <code class=\"codespan\">id</code>（即 <a href=\"#series-treemap.data.id\">series-treemap.data.id</a>）映射到颜色列表中。<code class=\"codespan\">id</code> 是用户指定的，这样能够使得，在treemap 通过 setOption 变化数值时，同一 <code class=\"codespan\">id</code> 映射到同一颜色，保持一致性。参见 <a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=treemap-obama&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">colorMappingBy</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "index,value,id" |
| } |
| }, |
| "levels.visibleMin": { |
| "desc": "\n\n<p>如果某个节点的矩形的面积，小于这个数值（单位：px平方），这个节点就不显示。</p>\n<p>如果不加这个限制，很小的节点会影响显示效果。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">visibleMin</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "10", |
| "min": "0" |
| } |
| }, |
| "levels.childrenVisibleMin": { |
| "desc": "\n\n<p>如果某个节点的矩形面积，小于这个数值（单位：px平方），则不显示这个节点的子节点。</p>\n<p>这能够在矩形面积不足够大时候，隐藏节点的细节。当用户用鼠标缩放节点时，如果面积大于此阈值，又会显示子节点。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">childrenVisibleMin</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "10", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label": { |
| "desc": "<p><code class=\"codespan\">label</code> 描述了每个矩形中，文本标签的样式。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">label</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "levels.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "levels.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "levels.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "levels.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "levels.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "levels.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "levels.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel": { |
| "desc": "<p><code class=\"codespan\">upperLabel</code> 用于显示矩形的父节点的标签。当 <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> 为 <code class=\"codespan\">true</code> 的时候，『显示父节点标签』功能开启。</p>\n<p>同 <a href=\"#series-treemap.label\">series-treemap.label</a> 一样，<code class=\"codespan\">upperLabel</code> 可以存在于 <a href=\"#series-treemap\">series-treemap</a> 的根节点，或者 <a href=\"#series-treemap.level\">series-treemap.level</a> 中，或者 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个数据项中。</p>\n<p><a href=\"#series-treemap.label\">series-treemap.label</a> 描述的是，当前节点为叶节点时标签的样式；<code class=\"codespan\">upperLabel</code> 描述的是，当前节点为非叶节点（即含有子节点）时标签的样式。（此时标签一般会被显示在节点的最上部）</p>\n<p>参见：</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">label</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "levels.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "levels.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "levels.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "levels.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.upperLabel.height": { |
| "desc": "\n\n<p>父节点标签区的高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "20", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "levels.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "levels.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "levels.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.itemStyle": { |
| "desc": "<blockquote>\n<p>注：treemap中 <code class=\"codespan\">itemStyle</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "levels.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.itemStyle.colorAlpha": { |
| "desc": "\n\n<p>矩形颜色的透明度。取值范围是 0 ~ 1 之间的浮点数。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.01", |
| "min": "0", |
| "max": "1", |
| "default": "1" |
| } |
| }, |
| "levels.itemStyle.colorSaturation": { |
| "desc": "\n\n<p>矩形颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.01", |
| "min": "0", |
| "max": "1", |
| "default": "0.5" |
| } |
| }, |
| "levels.itemStyle.borderRadius": { |
| "desc": "\n\n<p>矩形圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB", |
| "clean": "true" |
| } |
| }, |
| "levels.itemStyle.borderWidth": { |
| "desc": "\n\n<p>矩形边框线宽。为 0 时无边框。而矩形的内部子矩形（子节点）的间隔距离是由 <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a> 指定的。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5", |
| "min": "0" |
| } |
| }, |
| "levels.itemStyle.gapWidth": { |
| "desc": "\n\n<p>矩形内部子矩形（子节点）的间隔距离。</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/img/treemap-border-gap.png\"></p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5", |
| "min": "0" |
| } |
| }, |
| "levels.itemStyle.borderColor": { |
| "desc": "\n\n<p>矩形边框 和 矩形间隔（gap）的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.itemStyle.borderColorSaturation": { |
| "desc": "\n\n<p>矩形边框的颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。</p>\n<p>注意：</p>\n<p>如果设置此属性，则 <code class=\"codespan\">borderColor</code> 的设置无效，而是：取当前节点计算出的颜色（比如从父节点遗传而来），在此颜色值上设置 <code class=\"codespan\">borderColorSaturation</code> 得到最终颜色。这种方式，能够做出『不同区块有不同色调的矩形间隔线』的效果，能够便于区分层级。</p>\n<p><strong>矩形边框（border）/缝隙（gap）设置如何避免混淆</strong></p>\n<p>如果统一用一种颜色设置矩形的缝隙（gap），那么当不同层级的矩形同时展示时可能会出现混淆。</p>\n<p>参见 <a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/treemap-borderColor&edit=1&reset=1\" target=\"_blank\">例子</a>，注意其中红色的区块中的子矩形其实是更深层级，和其他用白色缝隙区分的矩形不是在一个层级。所以，红色区块中矩形的分割线的颜色，我们在 <code class=\"codespan\">borderColorSaturation</code> 中设置为『加了饱和度变化的红颜色』，以示区别。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.01", |
| "min": "0", |
| "max": "1", |
| "default": "0.5" |
| } |
| }, |
| "levels.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: '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>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "levels.emphasis": { |
| "desc": "<p>高亮状态配置。</p>\n" |
| }, |
| "levels.emphasis.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "levels.emphasis.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.emphasis.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.emphasis.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "levels.emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.emphasis.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "levels.emphasis.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "levels.emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "levels.emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "levels.emphasis.labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "levels.emphasis.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "levels.emphasis.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.emphasis.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.emphasis.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "levels.emphasis.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.emphasis.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.emphasis.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.emphasis.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.emphasis.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.emphasis.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.emphasis.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.emphasis.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.emphasis.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.emphasis.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.upperLabel.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.emphasis.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.emphasis.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "levels.emphasis.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "levels.emphasis.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.emphasis.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>淡出状态配置。</p>\n" |
| }, |
| "levels.blur.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "levels.blur.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.blur.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "levels.blur.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.blur.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "levels.blur.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.blur.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.blur.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.blur.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.blur.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.blur.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.blur.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.blur.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.blur.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.blur.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.blur.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.blur.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.blur.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.blur.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "levels.blur.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "levels.blur.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "levels.blur.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.blur.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.blur.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "levels.blur.labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "levels.blur.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "levels.blur.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.blur.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "levels.blur.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.blur.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "levels.blur.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.blur.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.blur.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.blur.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.blur.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.blur.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.blur.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.blur.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.blur.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.blur.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.blur.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.blur.upperLabel.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.blur.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.blur.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.blur.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "levels.blur.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "levels.blur.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.blur.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>选中状态配置。</p>\n" |
| }, |
| "levels.select.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "levels.select.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.select.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "levels.select.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.select.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "levels.select.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.select.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.select.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.select.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.select.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.select.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.select.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.select.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.select.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.select.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.select.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.select.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.select.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.select.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "levels.select.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "levels.select.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "levels.select.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.select.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.select.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "levels.select.labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "levels.select.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "levels.select.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "levels.select.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "levels.select.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "levels.select.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "levels.select.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.select.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.select.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.select.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.select.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.select.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.select.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.select.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.select.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.select.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.select.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.select.upperLabel.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "levels.select.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.select.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "levels.select.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "levels.select.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "levels.select.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "levels.select.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.select.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "levels.select.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "levels.select.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data": { |
| "desc": "<p><a href=\"#series-treemap.data\">series-treemap.data</a> 的数据格式是树状的，例如：</p>\n<pre><code class=\"lang-javascript\">[ // 注意，最外层是一个数组，而非从某个根节点开始。\n {\n value: 1212,\n children: [\n {\n value: 2323, // value字段的值，对应到面积大小。\n // 也可以是数组，如 [2323, 43, 55]，则数组第一项对应到面积大小。\n // 数组其他项可以用于额外的视觉映射，详情参见 series-treemp.levels。\n id: 'someid-1', // id 不是必须设置的。\n // 但是如果想使用 API 来改变某个节点，需要用 id 来定位。\n name: 'description of this node', // 显示在矩形中的描述文字。\n children: [...],\n label: { // 此节点特殊的 label 定义（如果需要的话）。\n ... // label的格式参见 series-treemap.label。\n },\n itemStyle: { // 此节点特殊的 itemStyle 定义（如果需要的话）。\n ... // label的格式参见 series-treemap.itemStyle。\n }\n },\n {\n value: 4545,\n id: 'someid-2',\n name: 'description of this node',\n children: [\n {\n value: 5656,\n id: 'someid-3',\n name: 'description of this node',\n children: [...]\n },\n ...\n ]\n }\n ]\n },\n {\n value: [23, 59, 12]\n // 如果没有children，可以不写\n },\n ...\n]\n</code></pre>\n" |
| }, |
| "data.value": { |
| "desc": "<p>每个树节点的值，对应到面积大小。可以是number，也可以是数组，如 <code class=\"codespan\">[2323, 43, 55]</code>，则数组第一项对应到面积大小。</p>\n" |
| }, |
| "data.id": { |
| "desc": "<p>每个树节点的id。id 不是必须设置的。但是如果想使用 API 来改变某个节点，需要用 id 来定位。</p>\n" |
| }, |
| "data.name": { |
| "desc": "<p>显示在矩形中的描述文字。</p>\n" |
| }, |
| "data.visualDimension": { |
| "desc": "<p><code class=\"codespan\">treemap</code> 中支持对数据其他维度进行视觉映射。</p>\n<p>首先，treemap的数据格式（参见 <a href=\"#series-treemap.data\">series-treemap.data</a>）中，每个节点的 <code class=\"codespan\">value</code> 都可以是数组。数组每项是一个『维度』（dimension）。<code class=\"codespan\">visualDimension</code> 指定了额外的『视觉映射』使用的是数组的哪一项。默认为第 <code class=\"codespan\">0</code> 项。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">visualDimension</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "data.visualMin": { |
| "desc": "\n\n<p>当前层级的最小 value 值。如果不设置则自动统计。</p>\n<p>手动指定 <code class=\"codespan\">visualMin</code>、<code class=\"codespan\">visualMax</code> ，即手动控制了 visual mapping 的值域（当 <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> 为 <code class=\"codespan\">'value'</code> 时有意义）。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0" |
| } |
| }, |
| "data.visualMax": { |
| "desc": "\n\n<p>当前层级的最大 value 值。如果不设置则自动统计。</p>\n<p>手动指定 <code class=\"codespan\">visualMin</code>、<code class=\"codespan\">visualMax</code> ，即手动控制了 visual mapping 的值域（当 <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> 为 <code class=\"codespan\">'value'</code> 时有意义）。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100" |
| } |
| }, |
| "data.color": { |
| "desc": "<p>表示同一层级的节点的 颜色 选取列表（选择规则见 <a href=\"#series-treemap.colorMappingBy\">colorMappingBy</a>）。默认为空时，选取系统color列表。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">color</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "data.colorAlpha": { |
| "desc": "<p>表示同一层级的节点的颜色透明度选取范围。</p>\n<p>数值范围 0 ~ 1</p>\n<p>例如, <code class=\"codespan\">colorAlpha</code> 可以是 <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">colorAlpha</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "data.colorSaturation": { |
| "desc": "<p>表示同一层级的节点的颜色饱和度 选取范围。</p>\n<p>数值范围 0 ~ 1。</p>\n<p>例如, <code class=\"codespan\">colorSaturation</code> 可以是 <code class=\"codespan\">[0.3, 1]</code>.</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">colorSaturation</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "data.colorMappingBy": { |
| "desc": "\n\n<p>表示同一层级节点，在颜色列表中（参见 <code class=\"codespan\">color</code> 属性）选择时，按照什么来选择。可选值：</p>\n<ul>\n<li><code class=\"codespan\">'value'</code>：</li>\n</ul>\n<p>将节点的值（即 <a href=\"#series-treemap.data.value\">series-treemap.data.value</a>）映射到颜色列表中。</p>\n<p>这样得到的颜色，反应了节点值的大小。</p>\n<p>可以使用 <a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> 属性来设置，用 <a href=\"#series-treemap.data\">data</a> 中哪个纬度的值来映射。</p>\n<ul>\n<li><code class=\"codespan\">'index'</code>：</li>\n</ul>\n<p>将节点的 <code class=\"codespan\">index</code>（序号）映射到颜色列表中。即同一层级中，第一个节点取颜色列表中第一个颜色，第二个节点取第二个。</p>\n<p>这样得到的颜色，便于区分相邻节点。</p>\n<ul>\n<li><code class=\"codespan\">'id'</code>：</li>\n</ul>\n<p>将节点的 <code class=\"codespan\">id</code>（即 <a href=\"#series-treemap.data.id\">series-treemap.data.id</a>）映射到颜色列表中。<code class=\"codespan\">id</code> 是用户指定的，这样能够使得，在treemap 通过 setOption 变化数值时，同一 <code class=\"codespan\">id</code> 映射到同一颜色，保持一致性。参见 <a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=treemap-obama&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">colorMappingBy</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "index,value,id" |
| } |
| }, |
| "data.visibleMin": { |
| "desc": "\n\n<p>如果某个节点的矩形的面积，小于这个数值（单位：px平方），这个节点就不显示。</p>\n<p>如果不加这个限制，很小的节点会影响显示效果。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">visibleMin</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "10", |
| "min": "0" |
| } |
| }, |
| "data.childrenVisibleMin": { |
| "desc": "\n\n<p>如果某个节点的矩形面积，小于这个数值（单位：px平方），则不显示这个节点的子节点。</p>\n<p>这能够在矩形面积不足够大时候，隐藏节点的细节。当用户用鼠标缩放节点时，如果面积大于此阈值，又会显示子节点。</p>\n<p>关于视觉设置，详见 <a href=\"#series-treemap.levels\">series-treemap.levels</a>。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">childrenVisibleMin</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "10", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label": { |
| "desc": "<p><code class=\"codespan\">label</code> 描述了每个矩形中，文本标签的样式。</p>\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">label</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "data.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "data.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "data.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "data.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "data.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "data.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "data.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'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>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel": { |
| "desc": "<p><code class=\"codespan\">upperLabel</code> 用于显示矩形的父节点的标签。当 <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> 为 <code class=\"codespan\">true</code> 的时候，『显示父节点标签』功能开启。</p>\n<p>同 <a href=\"#series-treemap.label\">series-treemap.label</a> 一样，<code class=\"codespan\">upperLabel</code> 可以存在于 <a href=\"#series-treemap\">series-treemap</a> 的根节点，或者 <a href=\"#series-treemap.level\">series-treemap.level</a> 中，或者 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个数据项中。</p>\n<p><a href=\"#series-treemap.label\">series-treemap.label</a> 描述的是，当前节点为叶节点时标签的样式；<code class=\"codespan\">upperLabel</code> 描述的是，当前节点为非叶节点（即含有子节点）时标签的样式。（此时标签一般会被显示在节点的最上部）</p>\n<p>参见：</p>\n<iframe data-src=\"https://echarts.apache.org/next/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\"><iframe />\n\n\n\n\n<blockquote>\n<p>注：treemap中 <code class=\"codespan\">label</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "data.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "data.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "data.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "data.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "data.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.upperLabel.height": { |
| "desc": "\n\n<p>父节点标签区的高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "20", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "data.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "data.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.itemStyle": { |
| "desc": "<blockquote>\n<p>注：treemap中 <code class=\"codespan\">itemStyle</code> 属性可能在多处地方存在：</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap\">sereis-treemap</a> 根下，表示本系列全局的统一设置。</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>于 <a href=\"#series-treemap.levels\">series-treemap.levels</a> 的每个数组元素中，表示树每个层级的统一设置。</li>\n<li>于 <a href=\"#series-treemap.data\">series-treemap.data</a> 的每个节点中，表示每个节点的特定设置。</li>\n</ul>\n</blockquote>\n" |
| }, |
| "data.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.itemStyle.colorAlpha": { |
| "desc": "\n\n<p>矩形颜色的透明度。取值范围是 0 ~ 1 之间的浮点数。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.01", |
| "min": "0", |
| "max": "1", |
| "default": "1" |
| } |
| }, |
| "data.itemStyle.colorSaturation": { |
| "desc": "\n\n<p>矩形颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.01", |
| "min": "0", |
| "max": "1", |
| "default": "0.5" |
| } |
| }, |
| "data.itemStyle.borderRadius": { |
| "desc": "\n\n<p>矩形圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB", |
| "clean": "true" |
| } |
| }, |
| "data.itemStyle.borderWidth": { |
| "desc": "\n\n<p>矩形边框线宽。为 0 时无边框。而矩形的内部子矩形（子节点）的间隔距离是由 <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a> 指定的。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5", |
| "min": "0" |
| } |
| }, |
| "data.itemStyle.gapWidth": { |
| "desc": "\n\n<p>矩形内部子矩形（子节点）的间隔距离。</p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/img/treemap-border-gap.png\"></p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5", |
| "min": "0" |
| } |
| }, |
| "data.itemStyle.borderColor": { |
| "desc": "\n\n<p>矩形边框 和 矩形间隔（gap）的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.itemStyle.borderColorSaturation": { |
| "desc": "\n\n<p>矩形边框的颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。</p>\n<p>注意：</p>\n<p>如果设置此属性，则 <code class=\"codespan\">borderColor</code> 的设置无效，而是：取当前节点计算出的颜色（比如从父节点遗传而来），在此颜色值上设置 <code class=\"codespan\">borderColorSaturation</code> 得到最终颜色。这种方式，能够做出『不同区块有不同色调的矩形间隔线』的效果，能够便于区分层级。</p>\n<p><strong>矩形边框（border）/缝隙（gap）设置如何避免混淆</strong></p>\n<p>如果统一用一种颜色设置矩形的缝隙（gap），那么当不同层级的矩形同时展示时可能会出现混淆。</p>\n<p>参见 <a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/treemap-borderColor&edit=1&reset=1\" target=\"_blank\">例子</a>，注意其中红色的区块中的子矩形其实是更深层级，和其他用白色缝隙区分的矩形不是在一个层级。所以，红色区块中矩形的分割线的颜色，我们在 <code class=\"codespan\">borderColorSaturation</code> 中设置为『加了饱和度变化的红颜色』，以示区别。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.01", |
| "min": "0", |
| "max": "1", |
| "default": "0.5" |
| } |
| }, |
| "data.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "data.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "data.emphasis": { |
| "desc": "<p>高亮状态配置。</p>\n" |
| }, |
| "data.emphasis.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "data.emphasis.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "data.emphasis.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "data.emphasis.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.emphasis.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.emphasis.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "data.emphasis.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "data.emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "data.emphasis.labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "data.emphasis.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</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.emphasis.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "data.emphasis.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "data.emphasis.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "data.emphasis.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "data.emphasis.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "data.emphasis.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.emphasis.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.emphasis.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.emphasis.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.emphasis.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.emphasis.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.emphasis.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.emphasis.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.emphasis.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.emphasis.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.emphasis.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.upperLabel.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.emphasis.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.emphasis.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "data.emphasis.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "data.emphasis.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>淡出状态配置。</p>\n" |
| }, |
| "data.blur.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "data.blur.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "data.blur.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "data.blur.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "data.blur.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.blur.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.blur.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.blur.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.blur.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.blur.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.blur.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.blur.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.blur.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.blur.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.blur.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.blur.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.blur.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.blur.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.blur.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.blur.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.blur.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.blur.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "data.blur.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "data.blur.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.blur.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.blur.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.blur.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "data.blur.labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "data.blur.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur.labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</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.blur.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "data.blur.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "data.blur.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "data.blur.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "data.blur.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "data.blur.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "data.blur.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.blur.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.blur.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.blur.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.blur.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.blur.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.blur.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.blur.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.blur.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.blur.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.blur.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.blur.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.blur.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.blur.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.blur.upperLabel.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.blur.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.blur.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.blur.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "data.blur.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "data.blur.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.blur.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.blur.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.blur.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.blur.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select": { |
| "desc": "<blockquote>\n<p>从 <code class=\"codespan\">v5.0.0</code> 开始支持</p>\n</blockquote>\n<p>选中状态配置。</p>\n" |
| }, |
| "data.select.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "data.select.label.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "data.select.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "data.select.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "data.select.label.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.select.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.select.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.select.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.select.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.select.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.select.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.select.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.select.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.select.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.select.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.select.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.select.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.select.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.select.label.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.select.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.select.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.select.label.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "data.select.label.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "data.select.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.select.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.select.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.select.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.select.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.select.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.select.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.select.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.select.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.select.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.select.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.select.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.select.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.select.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.select.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.select.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.select.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.labelLine": { |
| "desc": "<p>标签的视觉引导线配置。</p>\n" |
| }, |
| "data.select.labelLine.show": { |
| "desc": "\n\n<p>是否显示视觉引导线。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "data.select.labelLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select.labelLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.labelLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选：</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.select.labelLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.labelLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "data.select.labelLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.labelLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.labelLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "data.select.upperLabel.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "data.select.upperLabel.position": { |
| "desc": "\n\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置：</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持：<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例：</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "data.select.upperLabel.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值（如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>）时候有效。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见：<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "data.select.upperLabel.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如：<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>，纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "data.select.upperLabel.formatter": { |
| "desc": "<p>标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有：</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>：系列名。</li>\n<li><code class=\"codespan\">{b}</code>：数据名。</li>\n<li><code class=\"codespan\">{c}</code>：数据值。</li>\n<li><code class=\"codespan\">{@xxx}：数据中名为</code>'xxx'<code class=\"codespan\">的维度的值，如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}：数据中维度</code>n<code class=\"codespan\">的值，如</code>{@[3]}` 表示维度 3 的值，从 0 开始计数。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.select.upperLabel.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.select.upperLabel.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.select.upperLabel.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.select.upperLabel.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.select.upperLabel.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.select.upperLabel.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.select.upperLabel.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.select.upperLabel.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.select.upperLabel.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.select.upperLabel.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.select.upperLabel.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.select.upperLabel.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.select.upperLabel.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select.upperLabel.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.select.upperLabel.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.select.upperLabel.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select.upperLabel.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.select.upperLabel.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.select.upperLabel.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "data.select.upperLabel.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "data.select.upperLabel.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.select.upperLabel.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.select.upperLabel.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.select.upperLabel.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>，则为视觉映射得到的颜色，如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.upperLabel.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.select.itemStyle.color": { |
| "desc": "\n\n<p>矩形的颜色。默认从全局调色盘 <a href=\"#color\">option.color</a> 获取颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.link": { |
| "desc": "<p>点击此节点可跳转的超链接。须 <a href=\"#series-treemap.nodeClick\">series-treemap.nodeClick</a> 值为 <code class=\"codespan\">'link'</code> 时才生效。</p>\n<p>参见 <a href=\"#series-treemap.data.target\">series-treemap.data.target</a>。</p>\n" |
| }, |
| "data.target": { |
| "desc": "<p>意义同 <code class=\"codespan\">html</code> <code class=\"codespan\"><a></code> 标签中的 <code class=\"codespan\">target</code>，参见 <a href=\"#series-treemap.data.link\">series-treemap.data.link</a>。可选值为：<code class=\"codespan\">'blank'</code> 或 <code class=\"codespan\">'self'</code>。</p>\n" |
| }, |
| "data.children": { |
| "desc": "<p>子节点，递归定义，格式同 <a href=\"#series-treemap.data\">series-treemap.data</a>。</p>\n" |
| }, |
| "data.tooltip": { |
| "desc": "<p>本系列每个数据项中特定的 tooltip 设定。</p>\n" |
| }, |
| "data.tooltip.position": { |
| "desc": "<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.data.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。</p>\n<p>可选：</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p> 通过数组表示提示框浮层的位置，支持数字设置绝对位置，百分比设置相对位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对位置，相对于容器左侧 10px, 上侧 10 px\n position: [10, 10]\n // 相对位置，放置在容器正中间\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p> 回调函数，格式如下：</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>参数：</strong><br>\n point: 鼠标位置，如 [20, 40]。<br>\n params: 同 formatter 的参数相同。<br>\n dom: tooltip 的 dom 对象。<br>\n rect: 只有鼠标在图形上时有效，是一个用<code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, <code class=\"codespan\">height</code>四个属性表达的图形包围盒。<br>\n size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：<code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>。<br></p>\n<p> <strong>返回值：</strong><br>\n 可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。<br>\n 也可以是一个对象，如：<code class=\"codespan\">{left: 10, top: 30}</code>，或者 <code class=\"codespan\">{right: '20%', bottom: 40}</code>。<br></p>\n<p> 如下示例：</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // 固定在顶部\n return [point[0], '10%'];\n }\n</code></pre>\n<p> 或者：</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'inside'</code></p>\n<p> 鼠标所在图形的内部中心位置，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'top'</code></p>\n<p> 鼠标所在图形上侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'left'</code></p>\n<p> 鼠标所在图形左侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code></p>\n<p> 鼠标所在图形右侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'bottom'</code></p>\n<p> 鼠标所在图形底侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n</ul>\n" |
| }, |
| "data.tooltip.formatter": { |
| "desc": "<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.data.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层内容格式器，支持字符串模板和回调函数两种形式。</p>\n<p><strong>1, 字符串模板</strong></p>\n<p>模板变量有 <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>，<code class=\"codespan\">{c}</code>，<code class=\"codespan\">{d}</code>，<code class=\"codespan\">{e}</code>，分别表示系列名，数据名，数据值等。\n在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code class=\"codespan\">'axis'</code> 的时候，会有多个系列的数据，此时可以通过 <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, <code class=\"codespan\">{a2}</code> 这种后面加索引的方式表示系列的索引。\n不同图表类型下的 <code class=\"codespan\">{a}</code>，<code class=\"codespan\">{b}</code>，<code class=\"codespan\">{c}</code>，<code class=\"codespan\">{d}</code> 含义不一样。\n其中变量<code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code>在不同图表类型下代表数据含义为：</p>\n<ul>\n<li><p>折线（区域）图、柱状（条形）图、K线图 : <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（类目值），<code class=\"codespan\">{c}</code>（数值）, <code class=\"codespan\">{d}</code>（无）</p>\n</li>\n<li><p>散点图（气泡）图 : <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（数据名称），<code class=\"codespan\">{c}</code>（数值数组）, <code class=\"codespan\">{d}</code>（无）</p>\n</li>\n<li><p>地图 : <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（区域名称），<code class=\"codespan\">{c}</code>（合并数值）, <code class=\"codespan\">{d}</code>（无）</p>\n</li>\n<li><p>饼图、仪表盘、漏斗图: <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（数据项名称），<code class=\"codespan\">{c}</code>（数值）, <code class=\"codespan\">{d}</code>（百分比）</p>\n</li>\n</ul>\n<p>更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2, 回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>第一个参数 <code class=\"codespan\">params</code> 是 formatter 需要的数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n // 饼图的百分比\n percent: number,\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code class=\"codespan\">'axis'</code> 的时候，或者 tooltip 被 <a href=\"#xAxis.axisPointer\">axisPointer</a> 触发的时候，<code class=\"codespan\">params</code> 是多个系列的数据数组。其中每项内容格式同上，并且，</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>注：</strong> ECharts 2.x 使用数组表示各参数的方式不再支持。</p>\n<p>第二个参数 <code class=\"codespan\">ticket</code> 是异步回调标识，配合第三个参数 <code class=\"codespan\">callback</code> 使用。\n第三个参数 <code class=\"codespan\">callback</code> 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 <code class=\"codespan\">ticket</code> 和 <code class=\"codespan\">html</code> 更新提示框浮层内容。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n" |
| }, |
| "data.tooltip.backgroundColor": { |
| "desc": "<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.data.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的背景颜色。</p>\n" |
| }, |
| "data.tooltip.borderColor": { |
| "desc": "\n\n\n\n\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.data.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#333" |
| } |
| }, |
| "data.tooltip.borderWidth": { |
| "desc": "\n\n\n\n\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.data.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的边框宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.tooltip.padding": { |
| "desc": "\n\n\n\n\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.data.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n\n\n<p>提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>\n<p>使用示例：</p>\n<pre><code class=\"lang-js\">// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5，左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n</code></pre>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.tooltip.textStyle": { |
| "desc": "<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.data.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的文本样式。</p>\n" |
| }, |
| "data.tooltip.textStyle.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "'#fff'" |
| } |
| }, |
| "data.tooltip.textStyle.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.tooltip.textStyle.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.tooltip.textStyle.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.tooltip.textStyle.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "14", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.tooltip.textStyle.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.tooltip.textStyle.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.tooltip.textStyle.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "data.tooltip.textStyle.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.tooltip.textStyle.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.tooltip.textStyle.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.tooltip.textStyle.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.tooltip.textStyle.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.tooltip.textStyle.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.tooltip.textStyle.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "data.tooltip.textStyle.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "data.tooltip.textStyle.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "data.tooltip.extraCssText": { |
| "desc": "<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.data.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n" |
| }, |
| "silent": { |
| "desc": "\n\n<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "animationDuration": { |
| "desc": "\n\n<p>初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1500", |
| "step": "20", |
| "clean": "true" |
| } |
| }, |
| "animationEasing": { |
| "desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=line-easing\" target=\"_blank\">缓动示例</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut", |
| "clean": "true" |
| } |
| }, |
| "animationDelay": { |
| "desc": "<p>初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>\n<p>如下示例：</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/next/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n" |
| }, |
| "tooltip": { |
| "desc": "<p>本系列特定的 tooltip 设定。</p>\n" |
| }, |
| "tooltip.position": { |
| "desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。</p>\n<p>可选：</p>\n<ul>\n<li><p><code class=\"codespan\">Array</code></p>\n<p> 通过数组表示提示框浮层的位置，支持数字设置绝对位置，百分比设置相对位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对位置，相对于容器左侧 10px, 上侧 10 px\n position: [10, 10]\n // 相对位置，放置在容器正中间\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">Function</code></p>\n<p> 回调函数，格式如下：</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>参数：</strong><br>\n point: 鼠标位置，如 [20, 40]。<br>\n params: 同 formatter 的参数相同。<br>\n dom: tooltip 的 dom 对象。<br>\n rect: 只有鼠标在图形上时有效，是一个用<code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">width</code>, <code class=\"codespan\">height</code>四个属性表达的图形包围盒。<br>\n size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：<code class=\"codespan\">{contentSize: [width, height], viewSize: [width, height]}</code>。<br></p>\n<p> <strong>返回值：</strong><br>\n 可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。<br>\n 也可以是一个对象，如：<code class=\"codespan\">{left: 10, top: 30}</code>，或者 <code class=\"codespan\">{right: '20%', bottom: 40}</code>。<br></p>\n<p> 如下示例：</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // 固定在顶部\n return [point[0], '10%'];\n }\n</code></pre>\n<p> 或者：</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'inside'</code></p>\n<p> 鼠标所在图形的内部中心位置，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'top'</code></p>\n<p> 鼠标所在图形上侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'left'</code></p>\n<p> 鼠标所在图形左侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'right'</code></p>\n<p> 鼠标所在图形右侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n<li><p><code class=\"codespan\">'bottom'</code></p>\n<p> 鼠标所在图形底侧，只在 <a href=\"#tooltip.trigger\">trigger</a> 为<code class=\"codespan\">'item'</code>的时候有效。</p>\n</li>\n</ul>\n" |
| }, |
| "tooltip.formatter": { |
| "desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层内容格式器，支持字符串模板和回调函数两种形式。</p>\n<p><strong>1, 字符串模板</strong></p>\n<p>模板变量有 <code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>，<code class=\"codespan\">{c}</code>，<code class=\"codespan\">{d}</code>，<code class=\"codespan\">{e}</code>，分别表示系列名，数据名，数据值等。\n在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code class=\"codespan\">'axis'</code> 的时候，会有多个系列的数据，此时可以通过 <code class=\"codespan\">{a0}</code>, <code class=\"codespan\">{a1}</code>, <code class=\"codespan\">{a2}</code> 这种后面加索引的方式表示系列的索引。\n不同图表类型下的 <code class=\"codespan\">{a}</code>，<code class=\"codespan\">{b}</code>，<code class=\"codespan\">{c}</code>，<code class=\"codespan\">{d}</code> 含义不一样。\n其中变量<code class=\"codespan\">{a}</code>, <code class=\"codespan\">{b}</code>, <code class=\"codespan\">{c}</code>, <code class=\"codespan\">{d}</code>在不同图表类型下代表数据含义为：</p>\n<ul>\n<li><p>折线（区域）图、柱状（条形）图、K线图 : <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（类目值），<code class=\"codespan\">{c}</code>（数值）, <code class=\"codespan\">{d}</code>（无）</p>\n</li>\n<li><p>散点图（气泡）图 : <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（数据名称），<code class=\"codespan\">{c}</code>（数值数组）, <code class=\"codespan\">{d}</code>（无）</p>\n</li>\n<li><p>地图 : <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（区域名称），<code class=\"codespan\">{c}</code>（合并数值）, <code class=\"codespan\">{d}</code>（无）</p>\n</li>\n<li><p>饼图、仪表盘、漏斗图: <code class=\"codespan\">{a}</code>（系列名称），<code class=\"codespan\">{b}</code>（数据项名称），<code class=\"codespan\">{c}</code>（数值）, <code class=\"codespan\">{d}</code>（百分比）</p>\n</li>\n</ul>\n<p>更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。</p>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2, 回调函数</strong></p>\n<p>回调函数格式：</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>第一个参数 <code class=\"codespan\">params</code> 是 formatter 需要的数据集。格式如下：</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n // 饼图的百分比\n percent: number,\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>在 <a href=\"#tooltip.trigger\">trigger</a> 为 <code class=\"codespan\">'axis'</code> 的时候，或者 tooltip 被 <a href=\"#xAxis.axisPointer\">axisPointer</a> 触发的时候，<code class=\"codespan\">params</code> 是多个系列的数据数组。其中每项内容格式同上，并且，</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['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>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>注：</strong> ECharts 2.x 使用数组表示各参数的方式不再支持。</p>\n<p>第二个参数 <code class=\"codespan\">ticket</code> 是异步回调标识，配合第三个参数 <code class=\"codespan\">callback</code> 使用。\n第三个参数 <code class=\"codespan\">callback</code> 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 <code class=\"codespan\">ticket</code> 和 <code class=\"codespan\">html</code> 更新提示框浮层内容。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n" |
| }, |
| "tooltip.backgroundColor": { |
| "desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的背景颜色。</p>\n" |
| }, |
| "tooltip.borderColor": { |
| "desc": "\n\n\n\n\n<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#333" |
| } |
| }, |
| "tooltip.borderWidth": { |
| "desc": "\n\n\n\n\n<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的边框宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "tooltip.padding": { |
| "desc": "\n\n\n\n\n<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n\n\n<p>提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>\n<p>使用示例：</p>\n<pre><code class=\"lang-js\">// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5，左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n</code></pre>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "tooltip.textStyle": { |
| "desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>提示框浮层的文本样式。</p>\n" |
| }, |
| "tooltip.textStyle.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "'#fff'" |
| } |
| }, |
| "tooltip.textStyle.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "tooltip.textStyle.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "tooltip.textStyle.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "tooltip.textStyle.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "14", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "tooltip.textStyle.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "tooltip.textStyle.width": { |
| "desc": "\n\n<p>文本显示宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "100", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "tooltip.textStyle.height": { |
| "desc": "\n\n<p>文本显示高度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "50", |
| "min": "1", |
| "max": "500", |
| "step": "1" |
| } |
| }, |
| "tooltip.textStyle.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "tooltip.textStyle.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "tooltip.textStyle.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "tooltip.textStyle.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "tooltip.textStyle.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "tooltip.textStyle.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "tooltip.textStyle.overflow": { |
| "desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断，并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本，默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行，跟<code class=\"codespan\">'break'</code>不同的是，在英语等拉丁文中，<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "truncate,break,breakAll" |
| } |
| }, |
| "tooltip.textStyle.ellipsis": { |
| "desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候，可以通过该属性配置末尾显示的文本。</p>\n" |
| }, |
| "tooltip.textStyle.lineOverflow": { |
| "desc": "<p>文本超出高度部分是否截断，配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n" |
| }, |
| "tooltip.extraCssText": { |
| "desc": "<p><br></p>\n<blockquote>\n<p><strong>注意：</strong><code class=\"codespan\">series.tooltip</code> 仅在 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 为 <code class=\"codespan\">'item'</code> 时有效。<br></p>\n</blockquote>\n<p>额外附加到浮层的 css 样式。如下为浮层添加阴影的示例：</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n" |
| } |
| } |
