mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
更新 ECharts 编辑器的配置为 5.0 的文档,补充其它常见图表 (#1198)
This commit is contained in:
parent
84f5a08c52
commit
27642497ff
9
examples/components/EChartsEditor/README.md
Normal file
9
examples/components/EChartsEditor/README.md
Normal file
@ -0,0 +1,9 @@
|
||||
ECharts 配置获取方法
|
||||
|
||||
```
|
||||
git clone apache/incubator-echarts-doc
|
||||
npm i
|
||||
npm run dev
|
||||
```
|
||||
|
||||
然后在 ./public/zh/documents/option-parts 目录下就是
|
@ -6,6 +6,16 @@ import {buildOptions, select} from './Common';
|
||||
|
||||
//@ts-ignore
|
||||
const lineOptions = __inline('./option-parts/option.series-line.json');
|
||||
//@ts-ignore
|
||||
const barOptions = __inline('./option-parts/option.series-bar.json');
|
||||
//@ts-ignore
|
||||
const pieOptions = __inline('./option-parts/option.series-pie.json');
|
||||
//@ts-ignore
|
||||
const gaugeOptions = __inline('./option-parts/option.series-gauge.json');
|
||||
//@ts-ignore
|
||||
const funnelOptions = __inline('./option-parts/option.series-funnel.json');
|
||||
//@ts-ignore
|
||||
const radarOptions = __inline('./option-parts/option.series-radar.json');
|
||||
|
||||
const buildSerieOptions = (type: string, options: any) => {
|
||||
return {
|
||||
@ -26,8 +36,20 @@ export default {
|
||||
multiple: true,
|
||||
addButtonText: '新增系列',
|
||||
controls: [
|
||||
select('type', '图表类型', ['line', 'bar']),
|
||||
select('type', '图表类型', [
|
||||
'line',
|
||||
'bar',
|
||||
'pie',
|
||||
'radar',
|
||||
'funnel',
|
||||
'gauge'
|
||||
]),
|
||||
buildSerieOptions('line', lineOptions),
|
||||
buildSerieOptions('bar', barOptions),
|
||||
buildSerieOptions('pie', pieOptions),
|
||||
buildSerieOptions('funnel', funnelOptions),
|
||||
buildSerieOptions('gauge', gaugeOptions),
|
||||
buildSerieOptions('radar', radarOptions),
|
||||
{
|
||||
type: 'array',
|
||||
name: 'data', //TODO: 目前只支持一维
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,83 +1,128 @@
|
||||
{
|
||||
"show": {
|
||||
"desc": "<p>是否开启无障碍访问。开启后将生成 <code class=\"codespan\">aria-label</code> 属性。</p>\n"
|
||||
"enabled": {
|
||||
"desc": "<p>是否开启无障碍访问。如果不开启,则不会开启 <code class=\"codespan\">label</code> 或 <code class=\"codespan\">decal</code> 效果。</p>\n"
|
||||
},
|
||||
"description": {
|
||||
"desc": "<p>默认采用算法自动生成图表描述,如果用户需要完全自定义,可以将这个值设为描述。如将其设置为 <code class=\"codespan\">'这是一个展示了价格走势的图表'</code>,则 <code class=\"codespan\">aria-label</code> 属性的值即为该字符串。</p>\n<p>这一配置项常用于展示单个的数据并不能展示图表内容时,用户显示指定概括性描述图表的文字。例如图表是一个包含大量散点图的地图,默认的算法只能显示数据点的位置,不能从整体上传达作者的意图。这时候,可以将 <code class=\"codespan\">description</code> 指定为作者想表达的内容即可。</p>\n"
|
||||
"label": {
|
||||
"desc": "<p>如果 <a href=\"#aria.enabled\">aria.enabled</a> 设置为 <code class=\"codespan\">true</code>,<code class=\"codespan\">label</code> 默认开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。</p>\n<p><strong>例子:</strong></p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n // 下面几行可以不写,因为 label.enabled 默认 true\n // label: {\n // enabled: true\n // },\n enabled: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\"><iframe />\n\n\n<p>生成的图表 DOM 上,会有一个 <code class=\"codespan\">aria-label</code> 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:</p>\n<blockquote>\n<p>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。</p>\n</blockquote>\n<p>生成描述的基本流程为,如果 <a href=\"#aria.enabled\">aria.enabled</a> 设置为 <code class=\"codespan\">true</code>(非默认)且 <a href=\"#aria.label.enabled\">aria.label.enabled</a> 设置为 <code class=\"codespan\">true</code>(默认),则生成无障碍访问描述,否则不生成。如果定义了 <a href=\"#aria.label.description\">aria.label.description</a>,则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 <code class=\"codespan\">aria.label.description</code> 完全覆盖。</p>\n<p>使用模板拼接时,先根据是否存在标题 <a href=\"#title.text\">title.text</a> 决定使用 <a href=\"#aria.label.general.withTitle\">aria.label.general.withTitle</a> 还是 <a href=\"#aria.label.general.withoutTitle\">aria.label.general.withoutTitle</a> 作为整体性描述。其中,<code class=\"codespan\">aria.label.general.withTitle</code> 配置项包括模板变量 <code class=\"codespan\">'{title}'</code>,将会被替换成图表标题。也就是说,如果 <code class=\"codespan\">aria.label.general.withTitle</code> 被设置为 <code class=\"codespan\">'图表的标题是:{title}。'</code>,则如果包含标题 <code class=\"codespan\">'价格分布图'</code>,这部分的描述为 <code class=\"codespan\">'图表的标题是:价格分布图。'</code>。</p>\n<p>拼接完标题之后,会依次拼接系列的描述(<a href=\"#aria.label.series\">aria.label.series</a>),和每个系列的数据的描述(<a href=\"#aria.label.data\">aria.label.data</a>)。同样,每个模板都有可能包括模板变量,用以替换实际的值。</p>\n<p>完整的描述生成流程为:</p>\n<p><img width=\"800\" height=\"auto\" src=\"documents/asset/img/echarts-aria.jpg\"></p>\n"
|
||||
},
|
||||
"general": {
|
||||
"label.enabled": {
|
||||
"desc": "<p>是否开启无障碍访问的标签生成。开启后将生成 <code class=\"codespan\">aria-label</code> 属性。</p>\n"
|
||||
},
|
||||
"label.description": {
|
||||
"desc": "<p>默认采用算法自动生成图表描述,如果用户需要完全自定义,可以将这个值设为描述。如将其设置为 <code class=\"codespan\">'这是一个展示了价格走势的图表'</code>,则图表 DOM 元素的 <code class=\"codespan\">aria-label</code> 属性值即为该字符串。</p>\n<p>这一配置项常用于展示单个的数据并不能展示图表内容时,用户显示指定概括性描述图表的文字。例如图表是一个包含大量散点图的地图,默认的算法只能显示数据点的位置,不能从整体上传达作者的意图。这时候,可以将 <code class=\"codespan\">description</code> 指定为作者想表达的内容即可。</p>\n"
|
||||
},
|
||||
"label.general": {
|
||||
"desc": "<p>对于图表的整体性描述。</p>\n"
|
||||
},
|
||||
"general.withTitle": {
|
||||
"label.general.withTitle": {
|
||||
"desc": "<p>如果图表存在 <a href=\"#title.text\">title.text</a>,则采用 <code class=\"codespan\">withTitle</code>。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{title}</code>:将被替换为图表的 <a href=\"#title.text\">title.text</a>。</li>\n</ul>\n"
|
||||
},
|
||||
"general.withoutTitle": {
|
||||
"label.general.withoutTitle": {
|
||||
"desc": "<p>如果图表不存在 <a href=\"#title.text\">title.text</a>,则采用 <code class=\"codespan\">withoutTitle</code>。</p>\n"
|
||||
},
|
||||
"series": {
|
||||
"label.series": {
|
||||
"desc": "<p>系列相关的配置项。</p>\n"
|
||||
},
|
||||
"series.maxCount": {
|
||||
"label.series.maxCount": {
|
||||
"desc": "<p>描述中最多出现的系列个数。</p>\n"
|
||||
},
|
||||
"series.single": {
|
||||
"label.series.single": {
|
||||
"desc": "<p>当图表只包含一个系列时,采用的描述。</p>\n"
|
||||
},
|
||||
"series.single.prefix": {
|
||||
"label.series.single.prefix": {
|
||||
"desc": "<p>对于所有系列的整体性描述,显示在每个系列描述之前。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>:将被替换为系列个数,这里始终为 1。</li>\n</ul>\n"
|
||||
},
|
||||
"series.single.withName": {
|
||||
"label.series.single.withName": {
|
||||
"desc": "<p>如果系列有 <code class=\"codespan\">name</code> 属性,则采用该描述。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>:将被替换为系列的 <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>:将被替换为系列的类型名称,如:<code class=\"codespan\">'柱状图'</code>、 <code class=\"codespan\">'折线图'</code> 等等。</li>\n</ul>\n"
|
||||
},
|
||||
"series.single.withoutName": {
|
||||
"label.series.single.withoutName": {
|
||||
"desc": "<p>如果系列没有 <code class=\"codespan\">name</code> 属性,则采用该描述。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>:将被替换为系列的类型名称,如:<code class=\"codespan\">'柱状图'</code>、 <code class=\"codespan\">'折线图'</code> 等等。</li>\n</ul>\n"
|
||||
},
|
||||
"series.multiple": {
|
||||
"label.series.multiple": {
|
||||
"desc": "<p>当图表只包含多个系列时,采用的描述。</p>\n"
|
||||
},
|
||||
"series.multiple.prefix": {
|
||||
"label.series.multiple.prefix": {
|
||||
"desc": "<p>对于所有系列的整体性描述,显示在每个系列描述之前。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>:将被替换为系列个数。</li>\n</ul>\n"
|
||||
},
|
||||
"series.multiple.withName": {
|
||||
"label.series.multiple.withName": {
|
||||
"desc": "<p>如果系列有 <code class=\"codespan\">name</code> 属性,则采用该描述。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>:将被替换为系列的 <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{seriesType}</code>:将被替换为系列的类型名称,如:<code class=\"codespan\">'柱状图'</code>、 <code class=\"codespan\">'折线图'</code> 等等。</li>\n</ul>\n"
|
||||
},
|
||||
"series.multiple.withoutName": {
|
||||
"label.series.multiple.withoutName": {
|
||||
"desc": "<p>如果系列没有 <code class=\"codespan\">name</code> 属性,则采用该描述。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>:将被替换为系列的类型名称,如:<code class=\"codespan\">'柱状图'</code>、 <code class=\"codespan\">'折线图'</code> 等等。</li>\n</ul>\n"
|
||||
},
|
||||
"series.multiple.separator": {
|
||||
"label.series.multiple.separator": {
|
||||
"desc": "<p>系列与系列之间描述的分隔符。</p>\n"
|
||||
},
|
||||
"series.multiple.separator.middle": {
|
||||
"label.series.multiple.separator.middle": {
|
||||
"desc": "<p>除了最后一个系列后的分隔符。</p>\n"
|
||||
},
|
||||
"series.multiple.separator.end": {
|
||||
"label.series.multiple.separator.end": {
|
||||
"desc": "<p>最后一个系列后的分隔符。</p>\n"
|
||||
},
|
||||
"data": {
|
||||
"label.data": {
|
||||
"desc": "<p>数据相关的配置项。</p>\n"
|
||||
},
|
||||
"data.maxCount": {
|
||||
"label.data.maxCount": {
|
||||
"desc": "<p>描述中每个系列最多出现的数据个数。</p>\n"
|
||||
},
|
||||
"data.allData": {
|
||||
"label.data.allData": {
|
||||
"desc": "<p>当数据全部显示时采用的描述。这一配置项<strong>不会</strong>使得数据全部显示,可以通过将 <a href=\"#aria.data.maxCount\">aria.data.maxCount</a> 设置为 <code class=\"codespan\">Number.MAX_VALUE</code> 实现全部显示的效果。</p>\n"
|
||||
},
|
||||
"data.partialData": {
|
||||
"label.data.partialData": {
|
||||
"desc": "<p>当只有部分数据显示时采用的描述。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{displayCnt}</code>:将被替换为显示的数据个数。</li>\n</ul>\n"
|
||||
},
|
||||
"data.withName": {
|
||||
"label.data.withName": {
|
||||
"desc": "<p>如果数据有 <code class=\"codespan\">name</code> 属性,则采用该描述。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{name}</code>:将被替换为数据的 <code class=\"codespan\">name</code>;</li>\n<li><code class=\"codespan\">{value}</code>:将被替换为数据的值。</li>\n</ul>\n"
|
||||
},
|
||||
"data.withoutName": {
|
||||
"label.data.withoutName": {
|
||||
"desc": "<p>如果数据没有 <code class=\"codespan\">name</code> 属性,则采用该描述。其中包括模板变量:</p>\n<ul>\n<li><code class=\"codespan\">{value}</code>:将被替换为数据的值。</li>\n</ul>\n"
|
||||
},
|
||||
"data.separator": {
|
||||
"label.data.separator": {
|
||||
"desc": "<p>数据与数据之间描述的分隔符。</p>\n"
|
||||
},
|
||||
"data.separator.middle": {
|
||||
"label.data.separator.middle": {
|
||||
"desc": "<p>除了最后一个数据后的分隔符。</p>\n"
|
||||
},
|
||||
"data.separator.end": {
|
||||
"label.data.separator.end": {
|
||||
"desc": "<p>最后一个数据后的分隔符。</p>\n<p>需要注意的是,通常最后一个数据后是系列的 <code class=\"codespan\">separator.end</code>,所以 <code class=\"codespan\">data.separator.end</code> 在大多数情况下为空字符串。</p>\n"
|
||||
},
|
||||
"decal": {
|
||||
"desc": "<p>为系列数据增加贴花纹理,作为颜色的辅助,帮助区分数据。使用默认贴花图案的方式非常简单,只需要开启即可:</p>\n<pre><code>aria: {\n enabled: true,\n decal: {\n show: true\n }\n}\n</code></pre><iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/aria-decal-simple&edit=1&reset=1\" width=\"700\" height=\"300\"><iframe />\n\n\n<p>绝大部分支持填充色的系列都支持贴花图案,包括:<code class=\"codespan\">'line'</code>, <code class=\"codespan\">'bar'</code>, <code class=\"codespan\">'pie'</code>, <code class=\"codespan\">'radar'</code>, <code class=\"codespan\">'treemap'</code>, <code class=\"codespan\">'sunburst'</code>, <code class=\"codespan\">'boxplot'</code>, <code class=\"codespan\">'sankey'</code>, <code class=\"codespan\">'funnel'</code>, <code class=\"codespan\">'gauge'</code>, <code class=\"codespan\">'pictorialBar'</code>, <code class=\"codespan\">'themeRiver'</code>, <code class=\"codespan\">'custom'</code> 等。其中,部分系列默认没有填充色(如 <code class=\"codespan\">'line'</code>, <code class=\"codespan\">'radar'</code>, <code class=\"codespan\">'boxplot'</code>)需要在设置了填充样式 <code class=\"codespan\">areaStyle</code> 的情况下才生效。</p>\n"
|
||||
},
|
||||
"decal.show": {
|
||||
"desc": "<p>是否显示贴花图案,默认不显示。如果要显示贴花,需要保证 <a href=\"#aria.enabled\">aria.enabled</a> 与 <code class=\"codespan\">aria.decal.show</code> 都是 <code class=\"codespan\">true</code>。</p>\n"
|
||||
},
|
||||
"decal.decals": {
|
||||
"desc": "<p>贴花图案的样式。如果是 <code class=\"codespan\">Object</code> 类型,表示为所有数据采用同样的样式,如果是数组,则数组的每一项各为一种样式,数据将会依次循环取数组中的样式。</p>\n"
|
||||
},
|
||||
"decal.decals.symbol(string|string[]) = 'rect'": {
|
||||
"desc": "<p>贴花的图案,如果是 <code class=\"codespan\">string[]</code> 表示循环使用数组中的图案。</p>\n<p>ECharts 提供的标记类型包括</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"
|
||||
},
|
||||
"decal.decals.symbolSize": {
|
||||
"desc": "<p>取值范围:<code class=\"codespan\">0</code> 到 <code class=\"codespan\">1</code>,表示占图案区域的百分比。</p>\n"
|
||||
},
|
||||
"decal.decals.symbolKeepAspect": {
|
||||
"desc": "<p>是否保持图案的长宽比。</p>\n"
|
||||
},
|
||||
"decal.decals.color": {
|
||||
"desc": "<p>贴花图案的颜色,建议使用半透明色,这样能叠加在系列本身的颜色上。</p>\n"
|
||||
},
|
||||
"decal.decals.backgroundColor": {
|
||||
"desc": "<p>贴花的背景色,将会覆盖在系列本身颜色之上,贴花图案之下。</p>\n"
|
||||
},
|
||||
"decal.decals.dashArrayX(number | number[] | (number | number[])[]) = 5": {
|
||||
"desc": "<p>贴花图案的基本模式是在横向和纵向上分别以<code class=\"codespan\">图案 - 空白 - 图案 - 空白 - 图案 - 空白</code>的形式无限循环。通过设置每个图案和空白的长度,可以实现复杂的图案效果。</p>\n<p><code class=\"codespan\">dashArrayX</code> 控制了横向的图案模式。当其值为 <code class=\"codespan\">number</code> 或 <code class=\"codespan\">number[]</code> 类型时,与 <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a> 类似。</p>\n<ul>\n<li><p>如果是 <code class=\"codespan\">number</code> 类型,表示图案和空白分别是这个值。如 <code class=\"codespan\">5</code> 表示先显示宽度为 5 的图案,然后空 5 像素,再然后显示宽度为 5 的图案……</p>\n</li>\n<li><p>如果是 <code class=\"codespan\">number[]</code> 类型,则表示图案和空白依次为数组值的循环。如:<code class=\"codespan\">[5, 10, 2, 6]</code> 表示图案宽 5 像素,然后空 10 像素,然后图案宽 2 像素,然后空 6 像素,然后图案宽 5 像素……</p>\n</li>\n<li><p>如果是 <code class=\"codespan\">(number | number[])[]</code> 类型,表示每行的图案和空白依次为数组值的循环。如:<code class=\"codespan\">[10, [2, 5]]</code> 表示第一行以图案 10 像素空 10 像素循环,第二行以图案 2 像素空 5 像素循环,第三行以图案 10 像素空 10 像素循环……</p>\n</li>\n</ul>\n<p>可以结合以下的例子理解本接口:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"><iframe />\n\n"
|
||||
},
|
||||
"decal.decals.dashArrayY(number | number[]) = 5": {
|
||||
"desc": "<p>贴花图案的基本模式是在横向和纵向上分别以<code class=\"codespan\">图案 - 空白 - 图案 - 空白 - 图案 - 空白</code>的形式无限循环。通过设置每个图案和空白的长度,可以实现复杂的图案效果。</p>\n<p><code class=\"codespan\">dashArrayY</code> 控制了横向的图案模式。与 <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\" target=\"_blank\">SVG stroke-dasharray</a> 类似。</p>\n<ul>\n<li><p>如果是 <code class=\"codespan\">number</code> 类型,表示图案和空白分别是这个值。如 <code class=\"codespan\">5</code> 表示先显示高度为 5 的图案,然后空 5 像素,再然后显示高度为 5 的图案……</p>\n</li>\n<li><p>如果是 <code class=\"codespan\">number[]</code> 类型,则表示图案和空白依次为数组值的循环。如:<code class=\"codespan\">[5, 10, 2, 6]</code> 表示图案高 5 像素,然后空 10 像素,然后图案高 2 像素,然后空 6 像素,然后图案高 5 像素……</p>\n</li>\n</ul>\n<p>可以结合以下的例子理解本接口:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\"><iframe />\n\n"
|
||||
},
|
||||
"decal.decals.rotation": {
|
||||
"desc": "<p>图案的整体旋转角度(弧度制),取值范围从 <code class=\"codespan\">-Math.PI</code> 到 <code class=\"codespan\">Math.PI</code>。</p>\n"
|
||||
},
|
||||
"decal.decals.maxTileWidth": {
|
||||
"desc": "<p>生成的图案在未重复之前的宽度上限。通常不需要设置该值,当你发现图案在重复的时候出现不连续的接缝时,可以尝试提高该值。</p>\n"
|
||||
},
|
||||
"decal.decals.maxTileHeight": {
|
||||
"desc": "<p>生成的图案在未重复之前的高度上限。通常不需要设置该值,当你发现图案在重复的时候出现不连续的接缝时,可以尝试提高该值。</p>\n"
|
||||
}
|
||||
}
|
@ -31,7 +31,7 @@
|
||||
"desc": "<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code class=\"codespan\">2</code> 表示保留两位小数。</p>\n"
|
||||
},
|
||||
"label.formatter": {
|
||||
"desc": "<p>文本标签文字的格式化器。</p>\n<p>如果为 <code class=\"codespan\">string</code>,可以是例如:<code class=\"codespan\">formatter: 'some text {value} some text</code>,其中 <code class=\"codespan\">{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code class=\"codespan\">function</code>,可以是例如:</p>\n<p><strong>参数:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: 含有:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: 轴当前值,如果 axis.type 为 'category' 时,其值为 axis.data 里的数值。如果 axis.type 为 <code class=\"codespan\">'time'</code>,其值为时间戳。</p>\n<p><code class=\"codespan\">{Array.<Object>}</code> params.seriesData: 一个数组,是当前 axisPointer 最近的点的信息,每项内容为</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: 轴的维度名,例如直角坐标系中是 <code class=\"codespan\">'x'</code>、<code class=\"codespan\">'y'</code>,极坐标系中是 <code class=\"codespan\">'radius'</code>、<code class=\"codespan\">'angle'</code>。</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: 轴的 index,<code class=\"codespan\">0</code>、<code class=\"codespan\">1</code>、<code class=\"codespan\">2</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</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>每项内容还包括轴的信息:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // 当前 axisPointer 对应的 value。\n axisValueLabel: '文本'\n}\n</code></pre>\n<p><strong>返回值:</strong></p>\n<p>显示的 string。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // 假设此轴的 type 为 'time'。\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"
|
||||
"desc": "<p>文本标签文字的格式化器。</p>\n<p>如果为 <code class=\"codespan\">string</code>,可以是例如:<code class=\"codespan\">formatter: 'some text {value} some text</code>,其中 <code class=\"codespan\">{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code class=\"codespan\">function</code>,可以是例如:</p>\n<p><strong>参数:</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: 含有:</p>\n<p><code class=\"codespan\">{Object}</code> params.value: 轴当前值,如果 axis.type 为 'category' 时,其值为 axis.data 里的数值。如果 axis.type 为 <code class=\"codespan\">'time'</code>,其值为时间戳。</p>\n<p><code class=\"codespan\">{Array.<Object>}</code> params.seriesData: 一个数组,是当前 axisPointer 最近的点的信息,每项内容为</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: 轴的维度名,例如直角坐标系中是 <code class=\"codespan\">'x'</code>、<code class=\"codespan\">'y'</code>,极坐标系中是 <code class=\"codespan\">'radius'</code>、<code class=\"codespan\">'angle'</code>。</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: 轴的 index,<code class=\"codespan\">0</code>、<code class=\"codespan\">1</code>、<code class=\"codespan\">2</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>每项内容还包括轴的信息:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // 当前 axisPointer 对应的 value。\n axisValueLabel: '文本'\n}\n</code></pre>\n<p><strong>返回值:</strong></p>\n<p>显示的 string。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // 假设此轴的 type 为 'time'。\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"
|
||||
},
|
||||
"label.margin": {
|
||||
"desc": "<p>label 距离轴的距离。</p>\n"
|
||||
@ -86,10 +86,24 @@
|
||||
}
|
||||
},
|
||||
"label.width": {
|
||||
"desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"label.height": {
|
||||
"desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
"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",
|
||||
@ -134,6 +148,19 @@
|
||||
"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.padding": {
|
||||
"desc": "\n\n<p>axisPointer内边距,单位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": {
|
||||
@ -320,7 +347,7 @@
|
||||
}
|
||||
},
|
||||
"handle": {
|
||||
"desc": "<p>拖拽手柄,适用于触屏的环境。参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"
|
||||
"desc": "<p>拖拽手柄,适用于触屏的环境。参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"
|
||||
},
|
||||
"handle.show": {
|
||||
"desc": "\n\n<p>当 show 设为 <code class=\"codespan\">true</code> 时开启,这时显示手柄,并且 axisPointer 会一直显示。</p>\n",
|
||||
@ -329,7 +356,7 @@
|
||||
}
|
||||
},
|
||||
"handle.icon": {
|
||||
"desc": "\n\n<p>手柄的图标。</p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">使用图片的例子</a></p>\n",
|
||||
"desc": "\n\n<p>手柄的图标。</p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">使用图片的例子</a></p>\n",
|
||||
"uiControl": {
|
||||
"type": "icon",
|
||||
"clean": "true"
|
||||
@ -402,7 +429,7 @@
|
||||
}
|
||||
},
|
||||
"link": {
|
||||
"desc": "<p>不同轴的 axisPointer 可以进行联动,在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。</p>\n<p>联动的效果可以看这两个例子:<a href=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=candlestick-brush&edit=1&reset=1\" target=\"_blank\">例子A</a>,<a href=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=scatter-nutrients-matrix&edit=1&reset=1\" target=\"_blank\">例子B</a>。</p>\n<p>link 是一个数组,其中每一项表示一个 link group,一个 group 中的坐标轴互相联动。例如:</p>\n<pre><code class=\"lang-js\">link: [\n {\n // 表示所有 xAxisIndex 为 0、3、4 和 yAxisName 为 'someName' 的坐标轴联动。\n xAxisIndex: [0, 3, 4],\n yAxisName: 'someName'\n },\n {\n // 表示左右 xAxisId 为 'aa'、'cc' 以及所有的 angleAxis 联动。\n xAxisId: ['aa', 'cc'],\n angleAxis: 'all'\n },\n ...\n]\n</code></pre>\n<p>如上所示,每个 link group 中可以用这些方式引用坐标轴:</p>\n<pre><code class=\"lang-js\">{\n // 以下的 'some' 均表示轴的维度,也就是表示 'x', 'y', 'radius', 'angle', 'single'\n someAxisIndex: [...], // 可以是一个数组或单值或 'all'\n someAxisName: [...], // 可以是一个数组或单值或 'all'\n someAxisId: [...], // 可以是一个数组或单值或 'all'\n}\n</code></pre>\n<hr>\n<p><strong>如何联动不同类型(<a href=\"#xAxis.type\">axis.type</a>)的轴?</strong></p>\n<p>如果 axis 的类型不同,比如 axisA type 为 'category',axisB type 为 'time',可以在每个 link group 中写转换函数(mapper)来进行值的转换,例如:</p>\n<pre><code class=\"lang-js\">link: [{\n xAxisIndex: [0, 1],\n yAxisName: ['yy'],\n mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n if (sourceAxisInfo.axisName === 'yy') {\n // from timestamp to '2012-02-05'\n return echarts.format.formatTime('yyyy-MM-dd', sourceVal);\n }\n else if (targetAxisInfo.axisName === 'yy') {\n // from '2012-02-05' to date\n return echarts.number.parseDate(dates[sourceVal]);\n }\n else {\n return sourceVal;\n }\n }\n}]\n</code></pre>\n<p>mapper 的输入参数:</p>\n<p><code class=\"codespan\">{number}</code> sourceVal</p>\n<p><code class=\"codespan\">{Object}</code> sourceAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息</p>\n<p><code class=\"codespan\">{Object}</code> targetAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息</p>\n<p>mapper 的返回值:</p>\n<p><code class=\"codespan\">{number}</code> 转换结果</p>\n"
|
||||
"desc": "<p>不同轴的 axisPointer 可以进行联动,在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。</p>\n<p>联动的效果可以看这两个例子:<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=candlestick-brush&edit=1&reset=1\" target=\"_blank\">例子A</a>,<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=scatter-nutrients-matrix&edit=1&reset=1\" target=\"_blank\">例子B</a>。</p>\n<p>link 是一个数组,其中每一项表示一个 link group,一个 group 中的坐标轴互相联动。例如:</p>\n<pre><code class=\"lang-js\">link: [\n {\n // 表示所有 xAxisIndex 为 0、3、4 和 yAxisName 为 'someName' 的坐标轴联动。\n xAxisIndex: [0, 3, 4],\n yAxisName: 'someName'\n },\n {\n // 表示左右 xAxisId 为 'aa'、'cc' 以及所有的 angleAxis 联动。\n xAxisId: ['aa', 'cc'],\n angleAxis: 'all'\n },\n ...\n]\n</code></pre>\n<p>如上所示,每个 link group 中可以用这些方式引用坐标轴:</p>\n<pre><code class=\"lang-js\">{\n // 以下的 'some' 均表示轴的维度,也就是表示 'x', 'y', 'radius', 'angle', 'single'\n someAxisIndex: [...], // 可以是一个数组或单值或 'all'\n someAxisName: [...], // 可以是一个数组或单值或 'all'\n someAxisId: [...], // 可以是一个数组或单值或 'all'\n}\n</code></pre>\n<hr>\n<p><strong>如何联动不同类型(<a href=\"#xAxis.type\">axis.type</a>)的轴?</strong></p>\n<p>如果 axis 的类型不同,比如 axisA type 为 'category',axisB type 为 'time',可以在每个 link group 中写转换函数(mapper)来进行值的转换,例如:</p>\n<pre><code class=\"lang-js\">link: [{\n xAxisIndex: [0, 1],\n yAxisName: ['yy'],\n mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n if (sourceAxisInfo.axisName === 'yy') {\n // from timestamp to '2012-02-05'\n return echarts.format.formatTime('yyyy-MM-dd', sourceVal);\n }\n else if (targetAxisInfo.axisName === 'yy') {\n // from '2012-02-05' to date\n return echarts.number.parseDate(dates[sourceVal]);\n }\n else {\n return sourceVal;\n }\n }\n}]\n</code></pre>\n<p>mapper 的输入参数:</p>\n<p><code class=\"codespan\">{number}</code> sourceVal</p>\n<p><code class=\"codespan\">{Object}</code> sourceAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息</p>\n<p><code class=\"codespan\">{Object}</code> targetAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息</p>\n<p>mapper 的返回值:</p>\n<p><code class=\"codespan\">{number}</code> 转换结果</p>\n"
|
||||
},
|
||||
"triggerOn": {
|
||||
"desc": "\n\n<p>提示框触发的条件,可选:</p>\n<ul>\n<li><p><code class=\"codespan\">'mousemove'</code></p>\n<p> 鼠标移动时触发。</p>\n</li>\n<li><p><code class=\"codespan\">'click'</code></p>\n<p> 鼠标点击时触发。</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code></p>\n<p> 不在 <code class=\"codespan\">'mousemove'</code> 或 <code class=\"codespan\">'click'</code> 时触发。</p>\n</li>\n</ul>\n",
|
||||
|
@ -6,7 +6,7 @@
|
||||
"desc": "<p>使用在 toolbox 中的按钮。</p>\n<p>brush 相关的 toolbox 按钮有:</p>\n<ul>\n<li><code class=\"codespan\">'rect'</code>:开启矩形选框选择功能。</li>\n<li><code class=\"codespan\">'polygon'</code>:开启任意形状选框选择功能。</li>\n<li><code class=\"codespan\">'lineX'</code>:开启横向选择功能。</li>\n<li><code class=\"codespan\">'lineY'</code>:开启纵向选择功能。</li>\n<li><code class=\"codespan\">'keep'</code>:切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。</li>\n<li><code class=\"codespan\">'clear'</code>:清空所有选框。</li>\n</ul>\n"
|
||||
},
|
||||
"brushLink": {
|
||||
"desc": "<p>不同系列间,选中的项可以联动。</p>\n<p>参见如下效果(刷选一个 <code class=\"codespan\">scatter</code>,其他 <code class=\"codespan\">scatter</code> 以及 <code class=\"codespan\">parallel</code> 图都会有选中效果):</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=scatter-matrix&edit=1&reset=1\" width=\"800\" height=\"550\"><iframe />\n\n\n<p><code class=\"codespan\">brushLink</code> 配置项是一个数组,内容是 seriesIndex,指定了哪些 series 可以被联动。例如可以是:</p>\n<ul>\n<li><code class=\"codespan\">[3, 4, 5]</code> 表示 seriesIndex 为 <code class=\"codespan\">3</code>, <code class=\"codespan\">4</code>, <code class=\"codespan\">5</code> 的 series 可以被联动。</li>\n<li><code class=\"codespan\">'all'</code> 表示所有 series 都进行 brushLink。</li>\n<li><code class=\"codespan\">'none'</code> 或 <code class=\"codespan\">null</code> 或 <code class=\"codespan\">undefined</code> 表示不启用 brushLink 功能。</li>\n</ul>\n<p><strong>注意</strong></p>\n<p>brushLink 是通过 dataIndex 进行映射,所以需要保证,<strong>联动的每个系列的 <code class=\"codespan\">data</code> 都是 <code class=\"codespan\">index</code> 对应的</strong>。*</p>\n<p>例如:</p>\n<pre><code class=\"lang-javascript\">option = {\n brush: {\n brushLink: [0, 1]\n },\n series: [\n {\n type: 'bar'\n data: [232, 4434, 545, 654] // data 有四个项\n },\n {\n type: 'parallel',\n data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data 同样有四个项,两个系列的 data 是对应的。\n }\n ]\n};\n</code></pre>\n"
|
||||
"desc": "<p>不同系列间,选中的项可以联动。</p>\n<p>参见如下效果(刷选一个 <code class=\"codespan\">scatter</code>,其他 <code class=\"codespan\">scatter</code> 以及 <code class=\"codespan\">parallel</code> 图都会有选中效果):</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=scatter-matrix&edit=1&reset=1\" width=\"800\" height=\"550\"><iframe />\n\n\n<p><code class=\"codespan\">brushLink</code> 配置项是一个数组,内容是 seriesIndex,指定了哪些 series 可以被联动。例如可以是:</p>\n<ul>\n<li><code class=\"codespan\">[3, 4, 5]</code> 表示 seriesIndex 为 <code class=\"codespan\">3</code>, <code class=\"codespan\">4</code>, <code class=\"codespan\">5</code> 的 series 可以被联动。</li>\n<li><code class=\"codespan\">'all'</code> 表示所有 series 都进行 brushLink。</li>\n<li><code class=\"codespan\">'none'</code> 或 <code class=\"codespan\">null</code> 或 <code class=\"codespan\">undefined</code> 表示不启用 brushLink 功能。</li>\n</ul>\n<p><strong>注意</strong></p>\n<p>brushLink 是通过 dataIndex 进行映射,所以需要保证,<strong>联动的每个系列的 <code class=\"codespan\">data</code> 都是 <code class=\"codespan\">index</code> 对应的</strong>。*</p>\n<p>例如:</p>\n<pre><code class=\"lang-javascript\">option = {\n brush: {\n brushLink: [0, 1]\n },\n series: [\n {\n type: 'bar'\n data: [232, 4434, 545, 654] // data 有四个项\n },\n {\n type: 'parallel',\n data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data 同样有四个项,两个系列的 data 是对应的。\n }\n ]\n};\n</code></pre>\n"
|
||||
},
|
||||
"seriesIndex": {
|
||||
"desc": "<p>指定哪些 series 可以被刷选,可取值为:</p>\n<ul>\n<li><code class=\"codespan\">'all'</code>: 所有 series</li>\n<li><code class=\"codespan\">'Array'</code>: series index 列表</li>\n<li><code class=\"codespan\">'number'</code>: 某个 series index</li>\n</ul>\n"
|
||||
|
@ -394,10 +394,24 @@
|
||||
}
|
||||
},
|
||||
"dayLabel.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"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"dayLabel.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"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"dayLabel.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
@ -442,6 +456,19 @@
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"dayLabel.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"
|
||||
}
|
||||
},
|
||||
"dayLabel.ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"dayLabel.lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
},
|
||||
"dayLabel.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"
|
||||
},
|
||||
@ -790,10 +817,24 @@
|
||||
}
|
||||
},
|
||||
"monthLabel.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"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"monthLabel.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"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"monthLabel.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
@ -838,6 +879,19 @@
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"monthLabel.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"
|
||||
}
|
||||
},
|
||||
"monthLabel.ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"monthLabel.lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
},
|
||||
"monthLabel.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"
|
||||
},
|
||||
@ -1177,10 +1231,24 @@
|
||||
}
|
||||
},
|
||||
"yearLabel.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"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"yearLabel.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"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"yearLabel.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
@ -1225,6 +1293,19 @@
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"yearLabel.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"
|
||||
}
|
||||
},
|
||||
"yearLabel.ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"yearLabel.lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
},
|
||||
"yearLabel.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"
|
||||
},
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -6,9 +6,45 @@
|
||||
"desc": "<p>原始数据。一般来说,原始数据表达的是二维表。可以用如下这些格式表达二维表:</p>\n<p>二维数组,其中第一行/列可以给出 <a href=\"#dataset.dimensions\">维度名</a>,也可以不给出,直接就是数据:</p>\n<pre><code class=\"lang-js\">[\n ['product', '2015', '2016', '2017'],\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</code></pre>\n<p>按行的 key-value 形式(对象数组),其中键(key)表明了 <a href=\"#dataset.dimensions\">维度名</a>:</p>\n<pre><code class=\"lang-js\">[\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n]\n</code></pre>\n<p>按列的 key-value 形式,每一项表示二维表的 “一列”:</p>\n<pre><code class=\"lang-js\">{\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n}\n</code></pre>\n<p>关于 <code class=\"codespan\">dataset</code> 的详情,请参见<a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">教程</a>。</p>\n"
|
||||
},
|
||||
"dimensions": {
|
||||
"desc": "<p>使用 dimensions 定义 <code class=\"codespan\">series.data</code> 或者 <code class=\"codespan\">dataset.source</code> 的每个维度的信息。</p>\n<p>注意:如果使用了 <a href=\"#dataset\">dataset</a>,那么可以在 <a href=\"#dataset.source\">dataset.source</a> 的第一行/列中给出 dimension 名称。于是就不用在这里指定 dimension。但是,如果在这里指定了 <code class=\"codespan\">dimensions</code>,那么 ECharts 不再会自动从 <code class=\"codespan\">dataset.source</code> 的第一行/列中获取维度信息。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 有了上面 dimensions 定义后,下面这五个维度的名称分别为:\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // 如果此维度不想给出定义,则使用 null 即可\n {type: 'ordinal'}, // 只定义此维度的类型。\n // 'ordinal' 表示离散型,一般文本使用这种类型。\n // 如果类型没有被定义,会自动猜测类型。\n {name: 'good', type: 'number'},\n 'bad' // 等同于 {name: 'bad'}\n ]\n}\n</code></pre>\n<p><code class=\"codespan\">dimensions</code> 数组中的每一项可以是:</p>\n<ul>\n<li><code class=\"codespan\">string</code>,如 <code class=\"codespan\">'someName'</code>,等同于 <code class=\"codespan\">{name: 'someName'}</code></li>\n<li><code class=\"codespan\">Object</code>,属性可以有:<ul>\n<li>name: <code class=\"codespan\">string</code>。</li>\n<li>type: <code class=\"codespan\">string</code>,支持<ul>\n<li><code class=\"codespan\">number</code>,默认,表示普通数据。</li>\n<li><code class=\"codespan\">ordinal</code>,对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的,所以使用者也可以手动强制指定。</li>\n<li><code class=\"codespan\">float</code>,即 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a>。</li>\n<li><code class=\"codespan\">int</code>,即 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a>。</li>\n<li><code class=\"codespan\">time</code>,表示时间类型。设置成 'time' 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。时间类型的支持参见 <a href=\"#series.data\">data</a>。</li>\n</ul>\n</li>\n<li>displayName: 一般用于 tooltip 中维度名的展示。<code class=\"codespan\">string</code> 如果没有指定,默认使用 name 来展示。</li>\n</ul>\n</li>\n</ul>\n<p>值得一提的是,当定义了 <code class=\"codespan\">dimensions</code> 后,默认 <code class=\"codespan\">tooltip</code> 中对个维度的显示,会变为『竖排』,从而方便显示每个维度的名称。如果没有定义 <code class=\"codespan\">dimensions</code>,则默认 <code class=\"codespan\">tooltip</code> 会横排显示,且只显示数值没有维度名称可显示。</p>\n"
|
||||
"desc": "<p>使用 dimensions 定义 <code class=\"codespan\">series.data</code> 或者 <code class=\"codespan\">dataset.source</code> 的每个维度的信息。</p>\n<p>注意:如果使用了 <a href=\"#dataset\">dataset</a>,那么可以在 <a href=\"#dataset.dimensions\">dataset.dimensions</a> 中定义 dimension ,或者在 <a href=\"#dataset.source\">dataset.source</a> 的第一行/列中给出 dimension 名称。于是就不用在这里指定 dimension。但如果在这里指定了 <code class=\"codespan\">dimensions</code>,那么优先使用这里的。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 有了上面 dimensions 定义后,下面这五个维度的名称分别为:\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // 如果此维度不想给出定义,则使用 null 即可\n {type: 'ordinal'}, // 只定义此维度的类型。\n // 'ordinal' 表示离散型,一般文本使用这种类型。\n // 如果类型没有被定义,会自动猜测类型。\n {name: 'good', type: 'number'},\n 'bad' // 等同于 {name: 'bad'}\n ]\n}\n</code></pre>\n<p><code class=\"codespan\">dimensions</code> 数组中的每一项可以是:</p>\n<ul>\n<li><code class=\"codespan\">string</code>,如 <code class=\"codespan\">'someName'</code>,等同于 <code class=\"codespan\">{name: 'someName'}</code></li>\n<li><code class=\"codespan\">Object</code>,属性可以有:<ul>\n<li>name: <code class=\"codespan\">string</code>。</li>\n<li>type: <code class=\"codespan\">string</code>,支持<ul>\n<li><code class=\"codespan\">number</code>,默认,表示普通数据。</li>\n<li><code class=\"codespan\">ordinal</code>,对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的,所以使用者也可以手动强制指定。</li>\n<li><code class=\"codespan\">float</code>,即 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a>。</li>\n<li><code class=\"codespan\">int</code>,即 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a>。</li>\n<li><code class=\"codespan\">time</code>,表示时间类型。设置成 'time' 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。时间类型的支持参见 <a href=\"#series.data\">data</a>。</li>\n</ul>\n</li>\n<li>displayName: 一般用于 tooltip 中维度名的展示。<code class=\"codespan\">string</code> 如果没有指定,默认使用 name 来展示。</li>\n</ul>\n</li>\n</ul>\n<p>值得一提的是,当定义了 <code class=\"codespan\">dimensions</code> 后,默认 <code class=\"codespan\">tooltip</code> 中对个维度的显示,会变为『竖排』,从而方便显示每个维度的名称。如果没有定义 <code class=\"codespan\">dimensions</code>,则默认 <code class=\"codespan\">tooltip</code> 会横排显示,且只显示数值没有维度名称可显示。</p>\n"
|
||||
},
|
||||
"sourceHeader": {
|
||||
"desc": "<p><code class=\"codespan\">dataset.source</code> 第一行/列是否是 <a href=\"dataset.dimensions\" target=\"_blank\">维度名</a> 信息。可选值:</p>\n<ul>\n<li><code class=\"codespan\">null/undefine</code>:默认,自动探测。</li>\n<li><code class=\"codespan\">true</code>:第一行/列是维度名信息。</li>\n<li><code class=\"codespan\">false</code>:第一行/列直接开始是数据。</li>\n</ul>\n<p>注意:“第一行/列” 的意思是,如果 <a href=\"#series.seriesLayoutBy\">series.seriesLayoutBy</a> 设置为 <code class=\"codespan\">'column'</code>(默认值),则取第一行,如果 <code class=\"codespan\">series.seriesLayoutBy</code> 设置为 <code class=\"codespan\">'row'</code>,则取第一列。</p>\n"
|
||||
},
|
||||
"transform": {
|
||||
"desc": "<p>参见这个教程: <a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20transform%20%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2\" target=\"_blank\">datat transform</a>.</p>\n"
|
||||
},
|
||||
"transform-filter.config": {
|
||||
"desc": "<p>"sort" 数据转换器的“条件”。</p>\n<p>参见这个教程: <a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20transform%20%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2\" target=\"_blank\">datat transform</a>.</p>\n"
|
||||
},
|
||||
"transform-filter.print": {
|
||||
"desc": "<p>使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 <code class=\"codespan\">transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: [{\n source: [ ... ]\n }, {\n transform: {\n type: 'filter',\n config: { ... }\n // 配置为 `true` 后, transform 的结果\n // 会被 console.log 打印出来。\n print: true\n }\n }],\n ...\n}\n</code></pre>\n"
|
||||
},
|
||||
"transform-sort.config": {
|
||||
"desc": "<p>"sort" 数据转换器的“条件”。</p>\n<p>参见这个教程: <a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20transform%20%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2\" target=\"_blank\">datat transform</a>.</p>\n"
|
||||
},
|
||||
"transform-sort.print": {
|
||||
"desc": "<p>使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 <code class=\"codespan\">transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: [{\n source: [ ... ]\n }, {\n transform: {\n type: 'filter',\n config: { ... }\n // 配置为 `true` 后, transform 的结果\n // 会被 console.log 打印出来。\n print: true\n }\n }],\n ...\n}\n</code></pre>\n"
|
||||
},
|
||||
"transform-xxx:xxx": {
|
||||
"desc": "<p>除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。</p>\n<p>参见这个教程: <a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20transform%20%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2\" target=\"_blank\">datat transform</a>.</p>\n"
|
||||
},
|
||||
"transform-xxx:xxx.type": {
|
||||
"desc": "<p>内置数据转换器没有名空间(如 <code class=\"codespan\">type: 'filter'</code>, <code class=\"codespan\">type: 'sort'</code>)。</p>\n<p>外部数据转换器须有名空间(如 <code class=\"codespan\">type: 'ecStat:regression'</code>)。</p>\n"
|
||||
},
|
||||
"transform-xxx:xxx.config": {
|
||||
"desc": "<p>这里设置每个数据转换器所须的参数。每种数据转换器有自己的参数格式定义。</p>\n"
|
||||
},
|
||||
"transform-xxx:xxx.print": {
|
||||
"desc": "<p>使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 <code class=\"codespan\">transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: [{\n source: [ ... ]\n }, {\n transform: {\n type: 'filter',\n config: { ... }\n // 配置为 `true` 后, transform 的结果\n // 会被 console.log 打印出来。\n print: true\n }\n }],\n ...\n}\n</code></pre>\n"
|
||||
},
|
||||
"fromDatasetIndex": {
|
||||
"desc": "<p>指定 <a href=\"#dataset.transform\">dataset.transform</a> 以哪个 dataset 作为输入。如果 <a href=\"#dataset.transform\">dataset.transform</a> 被指定了,但是 <code class=\"codespan\">fromDatasetIndex</code> 和 <code class=\"codespan\">fromDatasetId</code> 都没有被指定,那么默认会使用 <code class=\"codespan\">fromDatasetIndex: 0</code>.</p>\n<p>参见这个教程: <a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20transform%20%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2\" target=\"_blank\">datat transform</a>.</p>\n"
|
||||
},
|
||||
"fromDatasetId": {
|
||||
"desc": "<p>指定 <a href=\"#dataset.transform\">dataset.transform</a> 以哪个 dataset 作为输入。</p>\n<p>参见这个教程: <a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20transform%20%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2\" target=\"_blank\">datat transform</a>.</p>\n"
|
||||
},
|
||||
"fromTransformResult": {
|
||||
"desc": "<p>如果一个 <a href=\"#dataset.transform\">dataset.transform</a> 会产出多个结果 data ,我们可以使用 <code class=\"codespan\">fromTransformResult</code> 获得特定的结果。</p>\n<p>大多数场景下,transform 只会产出一个结果,所以大多数情况下 <code class=\"codespan\">fromTransformResult</code> 并不需要指定。当不指定 <code class=\"codespan\">fromTransformResult</code> 时,默认使用 <code class=\"codespan\">fromTransformResult: 0</code>。</p>\n<p>参见这个教程: <a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20transform%20%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2\" target=\"_blank\">datat transform</a>.</p>\n"
|
||||
}
|
||||
}
|
File diff suppressed because it is too large
Load Diff
@ -17,32 +17,41 @@
|
||||
"elements-group.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-group.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-group.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-group.x\">x</a> 和 <a href=\"#graphic.elements-group.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-group.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-group.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-group.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-group.originX\">originX</a> 和 <a href=\"#graphic.elements-group.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-group.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-group.x\">x</a> 和 <a href=\"#graphic.elements-group.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-group.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-group.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-group.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-group.originX\">originX</a> 和 <a href=\"#graphic.elements-group.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-group.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-group.x\">x</a> 和 <a href=\"#graphic.elements-group.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-group.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-group.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-group.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-group.originX\">originX</a> 和 <a href=\"#graphic.elements-group.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-group.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-group.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-group.x\">x</a> 和 <a href=\"#graphic.elements-group.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-group.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-group.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-group.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-group.originX\">originX</a> 和 <a href=\"#graphic.elements-group.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-group.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-group.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-group.x\">x</a> 和 <a href=\"#graphic.elements-group.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-group.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-group.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-group.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-group.originX\">originX</a> 和 <a href=\"#graphic.elements-group.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-group.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-group.x\">x</a> 和 <a href=\"#graphic.elements-group.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-group.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-group.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-group.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-group.originX\">originX</a> 和 <a href=\"#graphic.elements-group.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-group.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-group.x\">x</a> 和 <a href=\"#graphic.elements-group.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-group.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-group.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-group.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-group.originX\">originX</a> 和 <a href=\"#graphic.elements-group.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-group.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-group.left\">left</a> 和 <a href=\"#graphic.elements-group.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-group.left\">left</a> 或 <a href=\"#graphic.elements-group.right\">right</a>,则 <a href=\"#graphic.elements-group.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-group.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-group.left\">left</a> 和 <a href=\"#graphic.elements-group.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-group.left\">left</a> 或 <a href=\"#graphic.elements-group.right\">right</a>,则 <a href=\"#graphic.elements-group.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-group.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-group.top\">top</a> 和 <a href=\"#graphic.elements-group.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-group.top\">top</a> 或 <a href=\"#graphic.elements-group.bottom\">bottom</a>,则 <a href=\"#graphic.elements-group.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-group.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-group.top\">top</a> 和 <a href=\"#graphic.elements-group.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-group.top\">top</a> 或 <a href=\"#graphic.elements-group.bottom\">bottom</a>,则 <a href=\"#graphic.elements-group.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-group.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-group.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -97,32 +106,41 @@
|
||||
"elements-image.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-image.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-image.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-image.x\">x</a> 和 <a href=\"#graphic.elements-image.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-image.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-image.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-image.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-image.originX\">originX</a> 和 <a href=\"#graphic.elements-image.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-image.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-image.x\">x</a> 和 <a href=\"#graphic.elements-image.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-image.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-image.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-image.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-image.originX\">originX</a> 和 <a href=\"#graphic.elements-image.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-image.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-image.x\">x</a> 和 <a href=\"#graphic.elements-image.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-image.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-image.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-image.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-image.originX\">originX</a> 和 <a href=\"#graphic.elements-image.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-image.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-image.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-image.x\">x</a> 和 <a href=\"#graphic.elements-image.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-image.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-image.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-image.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-image.originX\">originX</a> 和 <a href=\"#graphic.elements-image.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-image.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-image.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-image.x\">x</a> 和 <a href=\"#graphic.elements-image.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-image.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-image.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-image.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-image.originX\">originX</a> 和 <a href=\"#graphic.elements-image.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-image.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-image.x\">x</a> 和 <a href=\"#graphic.elements-image.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-image.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-image.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-image.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-image.originX\">originX</a> 和 <a href=\"#graphic.elements-image.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-image.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-image.x\">x</a> 和 <a href=\"#graphic.elements-image.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-image.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-image.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-image.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-image.originX\">originX</a> 和 <a href=\"#graphic.elements-image.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-image.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-image.left\">left</a> 和 <a href=\"#graphic.elements-image.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-image.left\">left</a> 或 <a href=\"#graphic.elements-image.right\">right</a>,则 <a href=\"#graphic.elements-image.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-image.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-image.left\">left</a> 和 <a href=\"#graphic.elements-image.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-image.left\">left</a> 或 <a href=\"#graphic.elements-image.right\">right</a>,则 <a href=\"#graphic.elements-image.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-image.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-image.top\">top</a> 和 <a href=\"#graphic.elements-image.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-image.top\">top</a> 或 <a href=\"#graphic.elements-image.bottom\">bottom</a>,则 <a href=\"#graphic.elements-image.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-image.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-image.top\">top</a> 和 <a href=\"#graphic.elements-image.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-image.top\">top</a> 或 <a href=\"#graphic.elements-image.bottom\">bottom</a>,则 <a href=\"#graphic.elements-image.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-image.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-image.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -204,32 +222,41 @@
|
||||
"elements-text.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-text.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-text.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-text.x\">x</a> 和 <a href=\"#graphic.elements-text.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-text.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-text.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-text.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-text.originX\">originX</a> 和 <a href=\"#graphic.elements-text.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-text.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-text.x\">x</a> 和 <a href=\"#graphic.elements-text.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-text.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-text.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-text.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-text.originX\">originX</a> 和 <a href=\"#graphic.elements-text.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-text.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-text.x\">x</a> 和 <a href=\"#graphic.elements-text.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-text.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-text.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-text.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-text.originX\">originX</a> 和 <a href=\"#graphic.elements-text.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-text.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-text.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-text.x\">x</a> 和 <a href=\"#graphic.elements-text.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-text.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-text.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-text.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-text.originX\">originX</a> 和 <a href=\"#graphic.elements-text.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-text.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-text.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-text.x\">x</a> 和 <a href=\"#graphic.elements-text.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-text.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-text.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-text.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-text.originX\">originX</a> 和 <a href=\"#graphic.elements-text.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-text.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-text.x\">x</a> 和 <a href=\"#graphic.elements-text.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-text.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-text.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-text.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-text.originX\">originX</a> 和 <a href=\"#graphic.elements-text.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-text.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-text.x\">x</a> 和 <a href=\"#graphic.elements-text.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-text.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-text.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-text.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-text.originX\">originX</a> 和 <a href=\"#graphic.elements-text.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-text.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-text.left\">left</a> 和 <a href=\"#graphic.elements-text.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-text.left\">left</a> 或 <a href=\"#graphic.elements-text.right\">right</a>,则 <a href=\"#graphic.elements-text.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-text.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-text.left\">left</a> 和 <a href=\"#graphic.elements-text.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-text.left\">left</a> 或 <a href=\"#graphic.elements-text.right\">right</a>,则 <a href=\"#graphic.elements-text.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-text.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-text.top\">top</a> 和 <a href=\"#graphic.elements-text.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-text.top\">top</a> 或 <a href=\"#graphic.elements-text.bottom\">bottom</a>,则 <a href=\"#graphic.elements-text.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-text.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-text.top\">top</a> 和 <a href=\"#graphic.elements-text.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-text.top\">top</a> 或 <a href=\"#graphic.elements-text.bottom\">bottom</a>,则 <a href=\"#graphic.elements-text.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-text.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-text.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -314,32 +341,41 @@
|
||||
"elements-rect.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-rect.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-rect.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-rect.x\">x</a> 和 <a href=\"#graphic.elements-rect.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-rect.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-rect.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-rect.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-rect.originX\">originX</a> 和 <a href=\"#graphic.elements-rect.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-rect.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-rect.x\">x</a> 和 <a href=\"#graphic.elements-rect.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-rect.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-rect.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-rect.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-rect.originX\">originX</a> 和 <a href=\"#graphic.elements-rect.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-rect.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-rect.x\">x</a> 和 <a href=\"#graphic.elements-rect.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-rect.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-rect.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-rect.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-rect.originX\">originX</a> 和 <a href=\"#graphic.elements-rect.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-rect.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-rect.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-rect.x\">x</a> 和 <a href=\"#graphic.elements-rect.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-rect.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-rect.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-rect.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-rect.originX\">originX</a> 和 <a href=\"#graphic.elements-rect.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-rect.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-rect.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-rect.x\">x</a> 和 <a href=\"#graphic.elements-rect.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-rect.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-rect.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-rect.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-rect.originX\">originX</a> 和 <a href=\"#graphic.elements-rect.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-rect.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-rect.x\">x</a> 和 <a href=\"#graphic.elements-rect.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-rect.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-rect.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-rect.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-rect.originX\">originX</a> 和 <a href=\"#graphic.elements-rect.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-rect.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-rect.x\">x</a> 和 <a href=\"#graphic.elements-rect.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-rect.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-rect.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-rect.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-rect.originX\">originX</a> 和 <a href=\"#graphic.elements-rect.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-rect.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-rect.left\">left</a> 和 <a href=\"#graphic.elements-rect.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-rect.left\">left</a> 或 <a href=\"#graphic.elements-rect.right\">right</a>,则 <a href=\"#graphic.elements-rect.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-rect.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-rect.left\">left</a> 和 <a href=\"#graphic.elements-rect.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-rect.left\">left</a> 或 <a href=\"#graphic.elements-rect.right\">right</a>,则 <a href=\"#graphic.elements-rect.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-rect.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-rect.top\">top</a> 和 <a href=\"#graphic.elements-rect.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-rect.top\">top</a> 或 <a href=\"#graphic.elements-rect.bottom\">bottom</a>,则 <a href=\"#graphic.elements-rect.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-rect.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-rect.top\">top</a> 和 <a href=\"#graphic.elements-rect.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-rect.top\">top</a> 或 <a href=\"#graphic.elements-rect.bottom\">bottom</a>,则 <a href=\"#graphic.elements-rect.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-rect.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-rect.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -424,32 +460,41 @@
|
||||
"elements-circle.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-circle.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-circle.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-circle.x\">x</a> 和 <a href=\"#graphic.elements-circle.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-circle.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-circle.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-circle.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-circle.originX\">originX</a> 和 <a href=\"#graphic.elements-circle.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-circle.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-circle.x\">x</a> 和 <a href=\"#graphic.elements-circle.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-circle.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-circle.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-circle.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-circle.originX\">originX</a> 和 <a href=\"#graphic.elements-circle.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-circle.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-circle.x\">x</a> 和 <a href=\"#graphic.elements-circle.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-circle.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-circle.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-circle.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-circle.originX\">originX</a> 和 <a href=\"#graphic.elements-circle.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-circle.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-circle.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-circle.x\">x</a> 和 <a href=\"#graphic.elements-circle.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-circle.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-circle.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-circle.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-circle.originX\">originX</a> 和 <a href=\"#graphic.elements-circle.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-circle.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-circle.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-circle.x\">x</a> 和 <a href=\"#graphic.elements-circle.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-circle.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-circle.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-circle.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-circle.originX\">originX</a> 和 <a href=\"#graphic.elements-circle.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-circle.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-circle.x\">x</a> 和 <a href=\"#graphic.elements-circle.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-circle.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-circle.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-circle.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-circle.originX\">originX</a> 和 <a href=\"#graphic.elements-circle.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-circle.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-circle.x\">x</a> 和 <a href=\"#graphic.elements-circle.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-circle.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-circle.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-circle.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-circle.originX\">originX</a> 和 <a href=\"#graphic.elements-circle.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-circle.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-circle.left\">left</a> 和 <a href=\"#graphic.elements-circle.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-circle.left\">left</a> 或 <a href=\"#graphic.elements-circle.right\">right</a>,则 <a href=\"#graphic.elements-circle.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-circle.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-circle.left\">left</a> 和 <a href=\"#graphic.elements-circle.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-circle.left\">left</a> 或 <a href=\"#graphic.elements-circle.right\">right</a>,则 <a href=\"#graphic.elements-circle.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-circle.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-circle.top\">top</a> 和 <a href=\"#graphic.elements-circle.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-circle.top\">top</a> 或 <a href=\"#graphic.elements-circle.bottom\">bottom</a>,则 <a href=\"#graphic.elements-circle.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-circle.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-circle.top\">top</a> 和 <a href=\"#graphic.elements-circle.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-circle.top\">top</a> 或 <a href=\"#graphic.elements-circle.bottom\">bottom</a>,则 <a href=\"#graphic.elements-circle.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-circle.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-circle.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -528,32 +573,41 @@
|
||||
"elements-ring.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-ring.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-ring.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-ring.x\">x</a> 和 <a href=\"#graphic.elements-ring.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-ring.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-ring.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-ring.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-ring.originX\">originX</a> 和 <a href=\"#graphic.elements-ring.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-ring.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-ring.x\">x</a> 和 <a href=\"#graphic.elements-ring.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-ring.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-ring.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-ring.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-ring.originX\">originX</a> 和 <a href=\"#graphic.elements-ring.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-ring.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-ring.x\">x</a> 和 <a href=\"#graphic.elements-ring.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-ring.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-ring.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-ring.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-ring.originX\">originX</a> 和 <a href=\"#graphic.elements-ring.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-ring.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-ring.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-ring.x\">x</a> 和 <a href=\"#graphic.elements-ring.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-ring.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-ring.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-ring.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-ring.originX\">originX</a> 和 <a href=\"#graphic.elements-ring.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-ring.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-ring.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-ring.x\">x</a> 和 <a href=\"#graphic.elements-ring.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-ring.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-ring.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-ring.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-ring.originX\">originX</a> 和 <a href=\"#graphic.elements-ring.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-ring.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-ring.x\">x</a> 和 <a href=\"#graphic.elements-ring.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-ring.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-ring.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-ring.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-ring.originX\">originX</a> 和 <a href=\"#graphic.elements-ring.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-ring.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-ring.x\">x</a> 和 <a href=\"#graphic.elements-ring.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-ring.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-ring.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-ring.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-ring.originX\">originX</a> 和 <a href=\"#graphic.elements-ring.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-ring.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-ring.left\">left</a> 和 <a href=\"#graphic.elements-ring.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-ring.left\">left</a> 或 <a href=\"#graphic.elements-ring.right\">right</a>,则 <a href=\"#graphic.elements-ring.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-ring.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-ring.left\">left</a> 和 <a href=\"#graphic.elements-ring.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-ring.left\">left</a> 或 <a href=\"#graphic.elements-ring.right\">right</a>,则 <a href=\"#graphic.elements-ring.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-ring.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-ring.top\">top</a> 和 <a href=\"#graphic.elements-ring.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-ring.top\">top</a> 或 <a href=\"#graphic.elements-ring.bottom\">bottom</a>,则 <a href=\"#graphic.elements-ring.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-ring.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-ring.top\">top</a> 和 <a href=\"#graphic.elements-ring.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-ring.top\">top</a> 或 <a href=\"#graphic.elements-ring.bottom\">bottom</a>,则 <a href=\"#graphic.elements-ring.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-ring.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-ring.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -635,32 +689,41 @@
|
||||
"elements-sector.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-sector.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-sector.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-sector.x\">x</a> 和 <a href=\"#graphic.elements-sector.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-sector.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-sector.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-sector.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-sector.originX\">originX</a> 和 <a href=\"#graphic.elements-sector.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-sector.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-sector.x\">x</a> 和 <a href=\"#graphic.elements-sector.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-sector.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-sector.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-sector.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-sector.originX\">originX</a> 和 <a href=\"#graphic.elements-sector.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-sector.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-sector.x\">x</a> 和 <a href=\"#graphic.elements-sector.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-sector.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-sector.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-sector.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-sector.originX\">originX</a> 和 <a href=\"#graphic.elements-sector.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-sector.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-sector.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-sector.x\">x</a> 和 <a href=\"#graphic.elements-sector.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-sector.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-sector.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-sector.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-sector.originX\">originX</a> 和 <a href=\"#graphic.elements-sector.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-sector.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-sector.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-sector.x\">x</a> 和 <a href=\"#graphic.elements-sector.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-sector.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-sector.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-sector.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-sector.originX\">originX</a> 和 <a href=\"#graphic.elements-sector.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-sector.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-sector.x\">x</a> 和 <a href=\"#graphic.elements-sector.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-sector.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-sector.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-sector.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-sector.originX\">originX</a> 和 <a href=\"#graphic.elements-sector.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-sector.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-sector.x\">x</a> 和 <a href=\"#graphic.elements-sector.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-sector.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-sector.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-sector.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-sector.originX\">originX</a> 和 <a href=\"#graphic.elements-sector.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-sector.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-sector.left\">left</a> 和 <a href=\"#graphic.elements-sector.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-sector.left\">left</a> 或 <a href=\"#graphic.elements-sector.right\">right</a>,则 <a href=\"#graphic.elements-sector.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-sector.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-sector.left\">left</a> 和 <a href=\"#graphic.elements-sector.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-sector.left\">left</a> 或 <a href=\"#graphic.elements-sector.right\">right</a>,则 <a href=\"#graphic.elements-sector.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-sector.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-sector.top\">top</a> 和 <a href=\"#graphic.elements-sector.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-sector.top\">top</a> 或 <a href=\"#graphic.elements-sector.bottom\">bottom</a>,则 <a href=\"#graphic.elements-sector.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-sector.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-sector.top\">top</a> 和 <a href=\"#graphic.elements-sector.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-sector.top\">top</a> 或 <a href=\"#graphic.elements-sector.bottom\">bottom</a>,则 <a href=\"#graphic.elements-sector.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-sector.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-sector.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -751,32 +814,41 @@
|
||||
"elements-arc.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-arc.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-arc.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-arc.x\">x</a> 和 <a href=\"#graphic.elements-arc.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-arc.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-arc.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-arc.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-arc.originX\">originX</a> 和 <a href=\"#graphic.elements-arc.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-arc.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-arc.x\">x</a> 和 <a href=\"#graphic.elements-arc.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-arc.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-arc.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-arc.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-arc.originX\">originX</a> 和 <a href=\"#graphic.elements-arc.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-arc.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-arc.x\">x</a> 和 <a href=\"#graphic.elements-arc.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-arc.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-arc.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-arc.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-arc.originX\">originX</a> 和 <a href=\"#graphic.elements-arc.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-arc.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-arc.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-arc.x\">x</a> 和 <a href=\"#graphic.elements-arc.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-arc.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-arc.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-arc.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-arc.originX\">originX</a> 和 <a href=\"#graphic.elements-arc.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-arc.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-arc.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-arc.x\">x</a> 和 <a href=\"#graphic.elements-arc.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-arc.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-arc.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-arc.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-arc.originX\">originX</a> 和 <a href=\"#graphic.elements-arc.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-arc.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-arc.x\">x</a> 和 <a href=\"#graphic.elements-arc.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-arc.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-arc.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-arc.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-arc.originX\">originX</a> 和 <a href=\"#graphic.elements-arc.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-arc.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-arc.x\">x</a> 和 <a href=\"#graphic.elements-arc.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-arc.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-arc.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-arc.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-arc.originX\">originX</a> 和 <a href=\"#graphic.elements-arc.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-arc.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-arc.left\">left</a> 和 <a href=\"#graphic.elements-arc.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-arc.left\">left</a> 或 <a href=\"#graphic.elements-arc.right\">right</a>,则 <a href=\"#graphic.elements-arc.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-arc.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-arc.left\">left</a> 和 <a href=\"#graphic.elements-arc.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-arc.left\">left</a> 或 <a href=\"#graphic.elements-arc.right\">right</a>,则 <a href=\"#graphic.elements-arc.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-arc.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-arc.top\">top</a> 和 <a href=\"#graphic.elements-arc.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-arc.top\">top</a> 或 <a href=\"#graphic.elements-arc.bottom\">bottom</a>,则 <a href=\"#graphic.elements-arc.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-arc.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-arc.top\">top</a> 和 <a href=\"#graphic.elements-arc.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-arc.top\">top</a> 或 <a href=\"#graphic.elements-arc.bottom\">bottom</a>,则 <a href=\"#graphic.elements-arc.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-arc.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-arc.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -867,17 +939,26 @@
|
||||
"elements-polygon.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polygon.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-polygon.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polygon.x\">x</a> 和 <a href=\"#graphic.elements-polygon.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polygon.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polygon.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polygon.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polygon.originX\">originX</a> 和 <a href=\"#graphic.elements-polygon.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polygon.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polygon.x\">x</a> 和 <a href=\"#graphic.elements-polygon.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polygon.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polygon.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polygon.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polygon.originX\">originX</a> 和 <a href=\"#graphic.elements-polygon.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polygon.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polygon.x\">x</a> 和 <a href=\"#graphic.elements-polygon.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polygon.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polygon.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polygon.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polygon.originX\">originX</a> 和 <a href=\"#graphic.elements-polygon.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polygon.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-polygon.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polygon.x\">x</a> 和 <a href=\"#graphic.elements-polygon.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polygon.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polygon.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polygon.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polygon.originX\">originX</a> 和 <a href=\"#graphic.elements-polygon.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polygon.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-polygon.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polygon.x\">x</a> 和 <a href=\"#graphic.elements-polygon.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polygon.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polygon.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polygon.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polygon.originX\">originX</a> 和 <a href=\"#graphic.elements-polygon.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polygon.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polygon.x\">x</a> 和 <a href=\"#graphic.elements-polygon.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polygon.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polygon.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polygon.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polygon.originX\">originX</a> 和 <a href=\"#graphic.elements-polygon.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polygon.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polygon.x\">x</a> 和 <a href=\"#graphic.elements-polygon.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polygon.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polygon.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polygon.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polygon.originX\">originX</a> 和 <a href=\"#graphic.elements-polygon.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polygon.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
@ -892,7 +973,7 @@
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-polygon.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polygon.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -971,32 +1052,41 @@
|
||||
"elements-polyline.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polyline.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-polyline.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polyline.x\">x</a> 和 <a href=\"#graphic.elements-polyline.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polyline.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polyline.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polyline.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polyline.originX\">originX</a> 和 <a href=\"#graphic.elements-polyline.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polyline.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polyline.x\">x</a> 和 <a href=\"#graphic.elements-polyline.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polyline.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polyline.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polyline.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polyline.originX\">originX</a> 和 <a href=\"#graphic.elements-polyline.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polyline.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polyline.x\">x</a> 和 <a href=\"#graphic.elements-polyline.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polyline.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polyline.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polyline.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polyline.originX\">originX</a> 和 <a href=\"#graphic.elements-polyline.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polyline.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-polyline.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polyline.x\">x</a> 和 <a href=\"#graphic.elements-polyline.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polyline.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polyline.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polyline.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polyline.originX\">originX</a> 和 <a href=\"#graphic.elements-polyline.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polyline.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-polyline.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polyline.x\">x</a> 和 <a href=\"#graphic.elements-polyline.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polyline.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polyline.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polyline.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polyline.originX\">originX</a> 和 <a href=\"#graphic.elements-polyline.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polyline.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polyline.x\">x</a> 和 <a href=\"#graphic.elements-polyline.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polyline.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polyline.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polyline.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polyline.originX\">originX</a> 和 <a href=\"#graphic.elements-polyline.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polyline.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-polyline.x\">x</a> 和 <a href=\"#graphic.elements-polyline.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-polyline.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-polyline.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-polyline.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-polyline.originX\">originX</a> 和 <a href=\"#graphic.elements-polyline.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polyline.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polyline.left\">left</a> 和 <a href=\"#graphic.elements-polyline.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polyline.left\">left</a> 或 <a href=\"#graphic.elements-polyline.right\">right</a>,则 <a href=\"#graphic.elements-polyline.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-polyline.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polyline.left\">left</a> 和 <a href=\"#graphic.elements-polyline.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polyline.left\">left</a> 或 <a href=\"#graphic.elements-polyline.right\">right</a>,则 <a href=\"#graphic.elements-polyline.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-polyline.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polyline.top\">top</a> 和 <a href=\"#graphic.elements-polyline.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polyline.top\">top</a> 或 <a href=\"#graphic.elements-polyline.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polyline.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-polyline.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polyline.top\">top</a> 和 <a href=\"#graphic.elements-polyline.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polyline.top\">top</a> 或 <a href=\"#graphic.elements-polyline.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polyline.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-polyline.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-polyline.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -1075,32 +1165,41 @@
|
||||
"elements-line.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-line.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-line.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-line.x\">x</a> 和 <a href=\"#graphic.elements-line.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-line.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-line.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-line.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-line.originX\">originX</a> 和 <a href=\"#graphic.elements-line.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-line.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-line.x\">x</a> 和 <a href=\"#graphic.elements-line.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-line.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-line.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-line.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-line.originX\">originX</a> 和 <a href=\"#graphic.elements-line.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-line.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-line.x\">x</a> 和 <a href=\"#graphic.elements-line.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-line.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-line.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-line.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-line.originX\">originX</a> 和 <a href=\"#graphic.elements-line.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-line.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-line.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-line.x\">x</a> 和 <a href=\"#graphic.elements-line.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-line.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-line.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-line.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-line.originX\">originX</a> 和 <a href=\"#graphic.elements-line.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-line.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-line.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-line.x\">x</a> 和 <a href=\"#graphic.elements-line.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-line.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-line.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-line.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-line.originX\">originX</a> 和 <a href=\"#graphic.elements-line.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-line.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-line.x\">x</a> 和 <a href=\"#graphic.elements-line.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-line.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-line.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-line.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-line.originX\">originX</a> 和 <a href=\"#graphic.elements-line.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-line.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-line.x\">x</a> 和 <a href=\"#graphic.elements-line.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-line.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-line.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-line.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-line.originX\">originX</a> 和 <a href=\"#graphic.elements-line.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-line.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-line.left\">left</a> 和 <a href=\"#graphic.elements-line.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-line.left\">left</a> 或 <a href=\"#graphic.elements-line.right\">right</a>,则 <a href=\"#graphic.elements-line.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-line.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-line.left\">left</a> 和 <a href=\"#graphic.elements-line.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-line.left\">left</a> 或 <a href=\"#graphic.elements-line.right\">right</a>,则 <a href=\"#graphic.elements-line.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-line.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-line.top\">top</a> 和 <a href=\"#graphic.elements-line.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-line.top\">top</a> 或 <a href=\"#graphic.elements-line.bottom\">bottom</a>,则 <a href=\"#graphic.elements-line.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-line.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-line.top\">top</a> 和 <a href=\"#graphic.elements-line.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-line.top\">top</a> 或 <a href=\"#graphic.elements-line.bottom\">bottom</a>,则 <a href=\"#graphic.elements-line.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-line.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-line.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
@ -1185,32 +1284,41 @@
|
||||
"elements-bezierCurve.$action": {
|
||||
"desc": "<p>setOption 时指定本次对该图形元素的操作行为。</p>\n<p>可取值:</p>\n<ul>\n<li><code class=\"codespan\">'merge'</code>:如果已有元素,则新的配置项和已有的设定进行 merge。如果没有则新建。</li>\n<li><code class=\"codespan\">'replace'</code>:如果已有元素,删除之,新建元素替代之。</li>\n<li><code class=\"codespan\">'remove'</code>:删除元素。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-bezierCurve.position": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-bezierCurve.x": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-bezierCurve.x\">x</a> 和 <a href=\"#graphic.elements-bezierCurve.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-bezierCurve.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-bezierCurve.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-bezierCurve.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-bezierCurve.originX\">originX</a> 和 <a href=\"#graphic.elements-bezierCurve.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-bezierCurve.y": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-bezierCurve.x\">x</a> 和 <a href=\"#graphic.elements-bezierCurve.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-bezierCurve.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-bezierCurve.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-bezierCurve.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-bezierCurve.originX\">originX</a> 和 <a href=\"#graphic.elements-bezierCurve.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-bezierCurve.rotation": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-bezierCurve.x\">x</a> 和 <a href=\"#graphic.elements-bezierCurve.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-bezierCurve.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-bezierCurve.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-bezierCurve.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-bezierCurve.originX\">originX</a> 和 <a href=\"#graphic.elements-bezierCurve.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-bezierCurve.scale": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-bezierCurve.scaleX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-bezierCurve.x\">x</a> 和 <a href=\"#graphic.elements-bezierCurve.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-bezierCurve.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-bezierCurve.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-bezierCurve.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-bezierCurve.originX\">originX</a> 和 <a href=\"#graphic.elements-bezierCurve.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-bezierCurve.origin": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">平移(position)</a>:默认值是 <code class=\"codespan\">[0, 0]</code>。表示 <code class=\"codespan\">[横向平移的距离, 纵向平移的距离]</code>。右和下为正值。</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">旋转(rotation)</a>:默认值是 0。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li><a href=\"#graphic.elements-polygon.scale\">缩放(scale)</a>:默认值是 <code class=\"codespan\">[1, 1]</code>。表示 <code class=\"codespan\">[横向缩放的倍数, 纵向缩放的倍数]</code>。</li>\n</ul>\n<p>其中,<a href=\"#graphic.elements-polygon.origin\">origin</a> 指定了旋转和缩放的中心点,默认值是 <code class=\"codespan\">[0, 0]</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(scale),再旋转(rotation),再平移(position)。</li>\n</ul>\n"
|
||||
"elements-bezierCurve.scaleY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-bezierCurve.x\">x</a> 和 <a href=\"#graphic.elements-bezierCurve.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-bezierCurve.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-bezierCurve.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-bezierCurve.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-bezierCurve.originX\">originX</a> 和 <a href=\"#graphic.elements-bezierCurve.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-bezierCurve.originX": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-bezierCurve.x\">x</a> 和 <a href=\"#graphic.elements-bezierCurve.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-bezierCurve.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-bezierCurve.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-bezierCurve.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-bezierCurve.originX\">originX</a> 和 <a href=\"#graphic.elements-bezierCurve.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-bezierCurve.originY": {
|
||||
"desc": "<p>图形元素可以进行标准的 <code class=\"codespan\">2D transform</code>,其中包含:</p>\n<ul>\n<li>平移(依照 <a href=\"#graphic.elements-bezierCurve.x\">x</a> 和 <a href=\"#graphic.elements-bezierCurve.y\">y</a>):默认值都是 <code class=\"codespan\">0</code>。右和下为正值。</li>\n<li>旋转(依照 <a href=\"#graphic.elements-bezierCurve.rotation\">rotation</a>):默认值是 <code class=\"codespan\">0</code>。表示旋转的弧度值。正值表示逆时针旋转。</li>\n<li>缩放(依照 <a href=\"#graphic.elements-bezierCurve.scaleX\">scaleX</a> 和 <a href=\"#graphic.elements-bezierCurve.scaleY\">scaleY</a>):默认值都是 <code class=\"codespan\">1</code>。这个值表示缩放的倍数。</li>\n</ul>\n<p>另外,<a href=\"#graphic.elements-bezierCurve.originX\">originX</a> 和 <a href=\"#graphic.elements-bezierCurve.originY\">originY</a> 指定了旋转和缩放的中心点,默认值都是 <code class=\"codespan\">0</code>。</p>\n<p>注意:</p>\n<ul>\n<li>transform 中设定的坐标,都是相对于图形元素的父元素的(即 <a href=\"#graphic.elements-group\">group</a> 元素或者顶层画布)的 <code class=\"codespan\">[0, 0]</code> 点。也就是说,我们可以使用 <a href=\"#graphic.elements-group\">group</a> 来组织多个图形元素,并且 <a href=\"#graphic.elements-group\">group</a> 可以嵌套。</li>\n<li>对于一个图形元素,<code class=\"codespan\">transform</code> 执行的顺序是:先缩放(依照 <code class=\"codespan\">scaleX</code>,<code class=\"codespan\">scaleY</code>),再旋转(依照 <code class=\"codespan\">rotation</code>),再平移(依照 <code class=\"codespan\">x</code>,<code class=\"codespan\">y</code>)。</li>\n</ul>\n"
|
||||
},
|
||||
"elements-bezierCurve.left": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-bezierCurve.left\">left</a> 和 <a href=\"#graphic.elements-bezierCurve.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-bezierCurve.left\">left</a> 或 <a href=\"#graphic.elements-bezierCurve.right\">right</a>,则 <a href=\"#graphic.elements-bezierCurve.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-bezierCurve.right": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.left\">left</a> 和 <a href=\"#graphic.elements-polygon.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.left\">left</a> 或 <a href=\"#graphic.elements-polygon.right\">right</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的高和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'center'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-bezierCurve.left\">left</a> 和 <a href=\"#graphic.elements-bezierCurve.right\">right</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-bezierCurve.left\">left</a> 或 <a href=\"#graphic.elements-bezierCurve.right\">right</a>,则 <a href=\"#graphic.elements-bezierCurve.shape\">shape</a> 里的 <code class=\"codespan\">x</code>、<code class=\"codespan\">cx</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-bezierCurve.top": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-bezierCurve.top\">top</a> 和 <a href=\"#graphic.elements-bezierCurve.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-bezierCurve.top\">top</a> 或 <a href=\"#graphic.elements-bezierCurve.bottom\">bottom</a>,则 <a href=\"#graphic.elements-bezierCurve.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-bezierCurve.bottom": {
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.top\">top</a> 和 <a href=\"#graphic.elements-polygon.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-polygon.top\">top</a> 或 <a href=\"#graphic.elements-polygon.bottom\">bottom</a>,则 <a href=\"#graphic.elements-polygon.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
"desc": "<p>描述怎么根据父元素进行定位。</p>\n<p>『父元素』是指:如果是顶层元素,父元素是 echarts 图表容器。如果是 <code class=\"codespan\">group</code> 的子元素,父元素就是 <code class=\"codespan\">group</code> 元素。</p>\n<p>值的类型可以是:</p>\n<ul>\n<li><code class=\"codespan\">number</code>:表示像素值。</li>\n<li>百分比值:如 '33%',用父元素的宽和此百分比计算出最终值。</li>\n<li><code class=\"codespan\">'middle'</code>:表示自动居中。</li>\n</ul>\n<p><a href=\"#graphic.elements-bezierCurve.top\">top</a> 和 <a href=\"#graphic.elements-bezierCurve.bottom\">bottom</a> 只有一个可以生效。</p>\n<p>如果指定 <a href=\"#graphic.elements-bezierCurve.top\">top</a> 或 <a href=\"#graphic.elements-bezierCurve.bottom\">bottom</a>,则 <a href=\"#graphic.elements-bezierCurve.shape\">shape</a> 里的 <code class=\"codespan\">y</code>、<code class=\"codespan\">cy</code> 等定位属性不再生效。</p>\n"
|
||||
},
|
||||
"elements-bezierCurve.bounding": {
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
"desc": "<p>决定此图形元素在定位时,对自身的包围盒计算方式。</p>\n<p>参见例子:</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/next/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\"><iframe />\n\n\n<p>可取值:</p>\n<ul>\n<li><p><code class=\"codespan\">'all'</code>:(默认)\n 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。\n 这种方式易于使整体都限制在父元素范围中。</p>\n</li>\n<li><p><code class=\"codespan\">'raw'</code>:\n 表示仅仅用自身(不包括子节点)的没经过 tranform 的包围盒进行定位。\n 这种方式易于内容超出父元素范围的定位方式。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"elements-bezierCurve.z": {
|
||||
"desc": "<p>z 方向的高度,决定层叠关系。</p>\n"
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"type": {
|
||||
"desc": "\n\n<p>图例的类型。可选值:</p>\n<ul>\n<li><code class=\"codespan\">'plain'</code>:普通图例。缺省就是普通图例。</li>\n<li><code class=\"codespan\">'scroll'</code>:可滚动翻页的图例。当图例数量较多时可以使用。</li>\n</ul>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n<p>当使用 <code class=\"codespan\">'scroll'</code> 时,使用这些设置进行细节配置:</p>\n<ul>\n<li><a href=\"#legend.scrollDataIndex\">legend.scrollDataIndex</a></li>\n<li><a href=\"#legend.pageButtonItemGap\">legend.pageButtonItemGap</a></li>\n<li><a href=\"#legend.pageButtonGap\">legend.pageButtonGap</a></li>\n<li><a href=\"#legend.pageButtonPosition\">legend.pageButtonPosition</a></li>\n<li><a href=\"#legend.pageFormatter\">legend.pageFormatter</a></li>\n<li><a href=\"#legend.pageIcons\">legend.pageIcons</a></li>\n<li><a href=\"#legend.pageIconColor\">legend.pageIconColor</a></li>\n<li><a href=\"#legend.pageIconInactiveColor\">legend.pageIconInactiveColor</a></li>\n<li><a href=\"#legend.pageIconSize\">legend.pageIconSize</a></li>\n<li><a href=\"#legend.pageTextStyle\">legend.pageTextStyle</a></li>\n<li><a href=\"#legend.animation\">legend.animation</a></li>\n<li><a href=\"#legend.animationDurationUpdate\">legend.animationDurationUpdate</a></li>\n</ul>\n",
|
||||
"desc": "\n\n<p>图例的类型。可选值:</p>\n<ul>\n<li><code class=\"codespan\">'plain'</code>:普通图例。缺省就是普通图例。</li>\n<li><code class=\"codespan\">'scroll'</code>:可滚动翻页的图例。当图例数量较多时可以使用。</li>\n</ul>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n<p>当使用 <code class=\"codespan\">'scroll'</code> 时,使用这些设置进行细节配置:</p>\n<ul>\n<li><a href=\"#legend.scrollDataIndex\">legend.scrollDataIndex</a></li>\n<li><a href=\"#legend.pageButtonItemGap\">legend.pageButtonItemGap</a></li>\n<li><a href=\"#legend.pageButtonGap\">legend.pageButtonGap</a></li>\n<li><a href=\"#legend.pageButtonPosition\">legend.pageButtonPosition</a></li>\n<li><a href=\"#legend.pageFormatter\">legend.pageFormatter</a></li>\n<li><a href=\"#legend.pageIcons\">legend.pageIcons</a></li>\n<li><a href=\"#legend.pageIconColor\">legend.pageIconColor</a></li>\n<li><a href=\"#legend.pageIconInactiveColor\">legend.pageIconInactiveColor</a></li>\n<li><a href=\"#legend.pageIconSize\">legend.pageIconSize</a></li>\n<li><a href=\"#legend.pageTextStyle\">legend.pageTextStyle</a></li>\n<li><a href=\"#legend.animation\">legend.animation</a></li>\n<li><a href=\"#legend.animationDurationUpdate\">legend.animationDurationUpdate</a></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "plain,scroll"
|
||||
@ -260,10 +260,24 @@
|
||||
}
|
||||
},
|
||||
"textStyle.width": {
|
||||
"desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"textStyle.height": {
|
||||
"desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"textStyle.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
@ -308,6 +322,19 @@
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.overflow": {
|
||||
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行,跟<code class=\"codespan\">'break'</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "truncate,break,breakAll"
|
||||
}
|
||||
},
|
||||
"textStyle.ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"textStyle.lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
@ -493,7 +520,7 @@
|
||||
"desc": "<p>图例的 tooltip 配置,配置项同 <a href=\"#tooltip\">tooltip</a>。默认不显示,可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip,如下示例:</p>\n<pre><code class=\"lang-js\">legend: {\n formatter: function (name) {\n return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');\n },\n tooltip: {\n show: true\n }\n}\n</code></pre>\n"
|
||||
},
|
||||
"icon": {
|
||||
"desc": "\n\n<p>图例项的 icon。</p>\n<p>ECharts 提供的标记类型包括 \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>",
|
||||
"desc": "\n\n<p>图例项的 icon。</p>\n<p>ECharts 提供的标记类型包括</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>",
|
||||
"uiControl": {
|
||||
"type": "icon"
|
||||
}
|
||||
@ -505,7 +532,7 @@
|
||||
"desc": "<p>图例项的名称,应等于某系列的<code class=\"codespan\">name</code>值(如果是饼图,也可以是饼图单个数据的 <code class=\"codespan\">name</code>)。</p>\n"
|
||||
},
|
||||
"data.icon": {
|
||||
"desc": "<p>图例项的 icon。</p>\n<p>ECharts 提供的标记类型包括 \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"
|
||||
"desc": "<p>图例项的 icon。</p>\n<p>ECharts 提供的标记类型包括</p>\n<p><code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"
|
||||
},
|
||||
"data.textStyle": {
|
||||
"desc": "<p>图例项的文本样式。</p>\n"
|
||||
@ -573,45 +600,45 @@
|
||||
}
|
||||
},
|
||||
"scrollDataIndex": {
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例当前最左上显示项的 <code class=\"codespan\">dataIndex</code>。</p>\n<p><code class=\"codespan\">setOption</code> 时指定此项的话,可决定当前图例滚动到哪里。</p>\n<p>但是,如果仅仅想改变图例翻页,一般并不调用 <code class=\"codespan\">setOption</code>(因为这太重量了),仅仅使用 action <a href=\"api.html#action.legend.legendScroll\" target=\"_blank\">legendScroll</a> 即可。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例当前最左上显示项的 <code class=\"codespan\">dataIndex</code>。</p>\n<p><code class=\"codespan\">setOption</code> 时指定此项的话,可决定当前图例滚动到哪里。</p>\n<p>但是,如果仅仅想改变图例翻页,一般并不调用 <code class=\"codespan\">setOption</code>(因为这太重量了),仅仅使用 action <a href=\"api.html#action.legend.legendScroll\" target=\"_blank\">legendScroll</a> 即可。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
},
|
||||
"pageButtonItemGap": {
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块中,按钮和页信息之间的间隔。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块中,按钮和页信息之间的间隔。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
},
|
||||
"pageButtonGap": {
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块和图例项之间的间隔。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块和图例项之间的间隔。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
},
|
||||
"pageButtonPosition": {
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块的位置。可选值为:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code>:控制块在左或上。</li>\n<li><code class=\"codespan\">'end'</code>:控制块在右或下。</li>\n</ul>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块的位置。可选值为:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code>:控制块在左或上。</li>\n<li><code class=\"codespan\">'end'</code>:控制块在右或下。</li>\n</ul>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
},
|
||||
"pageFormatter": {
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块中,页信息的显示格式。默认为 <code class=\"codespan\">'{current}/{total}'</code>,其中 <code class=\"codespan\">{current}</code> 是当前页号(从 1 开始计数),<code class=\"codespan\">{total}</code> 是总页数。</p>\n<p>如果 <code class=\"codespan\">pageFormatter</code> 使用函数,须返回字符串,参数为:</p>\n<pre><code class=\"lang-js\">{\n current: number\n total: number\n}\n</code></pre>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块中,页信息的显示格式。默认为 <code class=\"codespan\">'{current}/{total}'</code>,其中 <code class=\"codespan\">{current}</code> 是当前页号(从 1 开始计数),<code class=\"codespan\">{total}</code> 是总页数。</p>\n<p>如果 <code class=\"codespan\">pageFormatter</code> 使用函数,须返回字符串,参数为:</p>\n<pre><code class=\"lang-js\">{\n current: number\n total: number\n}\n</code></pre>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
},
|
||||
"pageIcons": {
|
||||
"desc": "<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>图例控制块的图标。</p>\n"
|
||||
},
|
||||
"pageIcons.horizontal": {
|
||||
"desc": "<p><a href=\"#legend.orient\">legend.orient</a> 为 <code class=\"codespan\">'horizontal'</code> 时的翻页按钮图标。</p>\n<p>是一个数组,表示 <code class=\"codespan\">[previous page button, next page button]</code>。默认值为 <code class=\"codespan\">['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']</code>,。</p>\n<p>数组中每项,</p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
"desc": "<p><a href=\"#legend.orient\">legend.orient</a> 为 <code class=\"codespan\">'horizontal'</code> 时的翻页按钮图标。</p>\n<p>是一个数组,表示 <code class=\"codespan\">[previous page button, next page button]</code>。默认值为 <code class=\"codespan\">['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']</code>,。</p>\n<p>数组中每项,</p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
},
|
||||
"pageIcons.vertical": {
|
||||
"desc": "<p><a href=\"#legend.orient\">legend.orient</a> 为 <code class=\"codespan\">'vertical'</code> 时的翻页按钮图标。</p>\n<p>是一个数组,表示 <code class=\"codespan\">[previous page button, next page button]</code>。默认值为 <code class=\"codespan\">['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']</code>,。</p>\n<p>数组中每项,</p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
"desc": "<p><a href=\"#legend.orient\">legend.orient</a> 为 <code class=\"codespan\">'vertical'</code> 时的翻页按钮图标。</p>\n<p>是一个数组,表示 <code class=\"codespan\">[previous page button, next page button]</code>。默认值为 <code class=\"codespan\">['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']</code>,。</p>\n<p>数组中每项,</p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n"
|
||||
},
|
||||
"pageIconColor": {
|
||||
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>翻页按钮的颜色。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n",
|
||||
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>翻页按钮的颜色。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#2f4554"
|
||||
}
|
||||
},
|
||||
"pageIconInactiveColor": {
|
||||
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>翻页按钮不激活时(即翻页到头时)的颜色。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n",
|
||||
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>翻页按钮不激活时(即翻页到头时)的颜色。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#aaa"
|
||||
}
|
||||
},
|
||||
"pageIconSize": {
|
||||
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>翻页按钮的大小。可以是数字,也可以是数组,如 <code class=\"codespan\">[10, 3]</code>,表示 <code class=\"codespan\">[宽,高]</code>。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n",
|
||||
"desc": "\n\n<p><a href=\"#legend.type\">legend.type</a> 为 <code class=\"codespan\">'scroll'</code> 时有效。</p>\n<p>翻页按钮的大小。可以是数字,也可以是数组,如 <code class=\"codespan\">[10, 3]</code>,表示 <code class=\"codespan\">[宽,高]</code>。</p>\n<p>参见 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">滚动图例(垂直)</a> 或 <a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">滚动图例(水平)</a>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"default": "15,15",
|
||||
@ -671,10 +698,24 @@
|
||||
}
|
||||
},
|
||||
"pageTextStyle.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"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"pageTextStyle.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"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"pageTextStyle.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
@ -719,6 +760,19 @@
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"pageTextStyle.overflow": {
|
||||
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行,跟<code class=\"codespan\">'break'</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "truncate,break,breakAll"
|
||||
}
|
||||
},
|
||||
"pageTextStyle.ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"pageTextStyle.lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
},
|
||||
"animation": {
|
||||
"desc": "\n\n<p>图例翻页是否使用动画。</p>\n",
|
||||
"uiControl": {
|
||||
@ -746,7 +800,7 @@
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.distance": {
|
||||
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
|
||||
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "5",
|
||||
@ -755,7 +809,7 @@
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.rotate": {
|
||||
"desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n",
|
||||
"desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "angle",
|
||||
"default": "0",
|
||||
@ -774,7 +828,7 @@
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.color": {
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "null"
|
||||
@ -837,14 +891,14 @@
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.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",
|
||||
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.borderColor": {
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
@ -903,13 +957,27 @@
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.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"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.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"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
@ -951,11 +1019,24 @@
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.overflow": {
|
||||
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行,跟<code class=\"codespan\">'break'</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "truncate,break,breakAll"
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"emphasis.selectorLabel.lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
},
|
||||
"emphasis.selectorLabel.rich": {
|
||||
"desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
|
||||
},
|
||||
"emphasis.selectorLabel.rich.<style_name>.color": {
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "null"
|
||||
@ -1018,14 +1099,14 @@
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.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",
|
||||
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
}
|
||||
},
|
||||
"emphasis.selectorLabel.rich.<style_name>.borderColor": {
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
@ -1090,7 +1171,7 @@
|
||||
"desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"emphasis.selectorLabel.rich.<style_name>.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
@ -1146,7 +1227,7 @@
|
||||
}
|
||||
},
|
||||
"selectorLabel.distance": {
|
||||
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
|
||||
"desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "5",
|
||||
@ -1155,7 +1236,7 @@
|
||||
}
|
||||
},
|
||||
"selectorLabel.rotate": {
|
||||
"desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n",
|
||||
"desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "angle",
|
||||
"default": "0",
|
||||
@ -1174,7 +1255,7 @@
|
||||
}
|
||||
},
|
||||
"selectorLabel.color": {
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "null"
|
||||
@ -1237,14 +1318,14 @@
|
||||
}
|
||||
},
|
||||
"selectorLabel.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",
|
||||
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
}
|
||||
},
|
||||
"selectorLabel.borderColor": {
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
@ -1303,13 +1384,27 @@
|
||||
}
|
||||
},
|
||||
"selectorLabel.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"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"selectorLabel.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"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"selectorLabel.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
@ -1351,11 +1446,24 @@
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"selectorLabel.overflow": {
|
||||
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行,跟<code class=\"codespan\">'break'</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "truncate,break,breakAll"
|
||||
}
|
||||
},
|
||||
"selectorLabel.ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"selectorLabel.lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
},
|
||||
"selectorLabel.rich": {
|
||||
"desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
|
||||
},
|
||||
"selectorLabel.rich.<style_name>.color": {
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "null"
|
||||
@ -1418,14 +1526,14 @@
|
||||
}
|
||||
},
|
||||
"selectorLabel.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",
|
||||
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
}
|
||||
},
|
||||
"selectorLabel.rich.<style_name>.borderColor": {
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
@ -1490,7 +1598,7 @@
|
||||
"desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"selectorLabel.rich.<style_name>.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'inherit'</code>,则为视觉映射得到的颜色,如系列色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -362,7 +362,7 @@
|
||||
}
|
||||
},
|
||||
"animationEasing": {
|
||||
"desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=line-easing\" target=\"_blank\">缓动示例</a>。</p>\n",
|
||||
"desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"http://localhost/incubator-echarts-website/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",
|
||||
@ -370,7 +370,7 @@
|
||||
}
|
||||
},
|
||||
"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=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
|
||||
"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=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
|
||||
},
|
||||
"animationDurationUpdate": {
|
||||
"desc": "\n\n<p>数据更新动画的时长。</p>\n<p>支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n",
|
||||
@ -389,6 +389,6 @@
|
||||
}
|
||||
},
|
||||
"animationDelayUpdate": {
|
||||
"desc": "<p>数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
|
||||
"desc": "<p>数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"http://localhost/incubator-echarts-website/next/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
|
||||
}
|
||||
}
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,18 @@
|
||||
{
|
||||
"duration": {
|
||||
"desc": "\n\n<p>状态切换的动画时长,设为 0 则关闭状态动画。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"default": "300",
|
||||
"step": "20"
|
||||
}
|
||||
},
|
||||
"easing": {
|
||||
"desc": "\n\n<p>状态切换的动画缓动。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"
|
||||
}
|
||||
}
|
||||
}
|
@ -49,10 +49,24 @@
|
||||
}
|
||||
},
|
||||
"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"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"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"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
@ -96,5 +110,18 @@
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
}
|
||||
}
|
File diff suppressed because one or more lines are too long
@ -71,10 +71,24 @@
|
||||
}
|
||||
},
|
||||
"textStyle.width": {
|
||||
"desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"textStyle.height": {
|
||||
"desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"textStyle.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
@ -119,6 +133,19 @@
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.overflow": {
|
||||
"desc": "\n\n<p>文字超出宽度是否截断或者换行。配置<code class=\"codespan\">width</code>时有效</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 截断,并在末尾显示<code class=\"codespan\">ellipsis</code>配置的文本,默认为<code class=\"codespan\">...</code></li>\n<li><code class=\"codespan\">'break'</code> 换行</li>\n<li><code class=\"codespan\">'breakAll'</code> 换行,跟<code class=\"codespan\">'break'</code>不同的是,在英语等拉丁文中,<code class=\"codespan\">'breakAll'</code>还会强制单词内换行</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "truncate,break,breakAll"
|
||||
}
|
||||
},
|
||||
"textStyle.ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"textStyle.lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
@ -376,10 +403,24 @@
|
||||
}
|
||||
},
|
||||
"subtextStyle.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"
|
||||
"desc": "\n\n<p>文本显示宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "100",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"subtextStyle.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"
|
||||
"desc": "\n\n<p>文本显示高度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "1",
|
||||
"max": "500",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"subtextStyle.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
@ -424,6 +465,19 @@
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.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"
|
||||
}
|
||||
},
|
||||
"subtextStyle.ellipsis": {
|
||||
"desc": "<p>在<code class=\"codespan\">overflow</code>配置为<code class=\"codespan\">'truncate'</code>的时候,可以通过该属性配置末尾显示的文本。</p>\n"
|
||||
},
|
||||
"subtextStyle.lineOverflow": {
|
||||
"desc": "<p>文本超出高度部分是否截断,配置<code class=\"codespan\">height</code>时有效。</p>\n<ul>\n<li><code class=\"codespan\">'truncate'</code> 在文本行数超出高度部分截断。</li>\n</ul>\n"
|
||||
},
|
||||
"subtextStyle.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"
|
||||
},
|
||||
@ -633,7 +687,7 @@
|
||||
}
|
||||
},
|
||||
"itemGap": {
|
||||
"desc": "\n\n\n<p>主副标题之间的间距。</p>\n",
|
||||
"desc": "\n\n<p>主副标题之间的间距。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
|
@ -45,7 +45,7 @@
|
||||
"desc": "<p>保存为图片。</p>\n"
|
||||
},
|
||||
"feature.saveAsImage.type": {
|
||||
"desc": "\n\n<p>保存的图片格式。</p>\n<ul>\n<li>如果 <code class=\"codespan\">renderer</code> 的类型在 <a href=\"api.html#echarts.init\" target=\"_blank\">初始化图表</a> 时被设为 <code class=\"codespan\">'canvas'</code>(默认),则支持 <code class=\"codespan\">'png'</code>(默认)和 <code class=\"codespan\">'jpeg'</code>;</li>\n<li>如果 <code class=\"codespan\">renderer</code> 的类型在 <a href=\"api.html#echarts.init\" target=\"_blank\">初始化图表</a> 时被设为 <code class=\"codespan\">'svg'</code>,则 <code class=\"codespan\">type</code> 只支持 <code class=\"codespan\">'svg'</code>(<code class=\"codespan\">'svg'</code> 格式的图片从 <code class=\"codespan\">v4.8.0</code> 开始支持)。</li>\n</ul>\n",
|
||||
"desc": "\n\n<p>保存的图片格式。</p>\n<ul>\n<li>如果 <code class=\"codespan\">renderer</code> 的类型在 <a href=\"api.html#echarts.init\" target=\"_blank\">初始化图表</a> 时被设为 <code class=\"codespan\">'canvas'</code>(默认),则支持 <code class=\"codespan\">'png'</code>(默认)和 <code class=\"codespan\">'jpg'</code>;</li>\n<li>如果 <code class=\"codespan\">renderer</code> 的类型在 <a href=\"api.html#echarts.init\" target=\"_blank\">初始化图表</a> 时被设为 <code class=\"codespan\">'svg'</code>,则 <code class=\"codespan\">type</code> 只支持 <code class=\"codespan\">'svg'</code>(<code class=\"codespan\">'svg'</code> 格式的图片从 <code class=\"codespan\">v4.8.0</code> 开始支持)。</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "png,jpg"
|
||||
@ -246,7 +246,7 @@
|
||||
}
|
||||
},
|
||||
"feature.saveAsImage.emphasis.iconStyle.textBorderRadius": {
|
||||
"desc": "\n\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"desc": "\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
@ -447,7 +447,7 @@
|
||||
}
|
||||
},
|
||||
"feature.restore.emphasis.iconStyle.textBorderRadius": {
|
||||
"desc": "\n\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"desc": "\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
@ -639,7 +639,7 @@
|
||||
}
|
||||
},
|
||||
"feature.dataView.emphasis.iconStyle.textBorderRadius": {
|
||||
"desc": "\n\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"desc": "\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
@ -897,7 +897,7 @@
|
||||
}
|
||||
},
|
||||
"feature.dataZoom.emphasis.iconStyle.textBorderRadius": {
|
||||
"desc": "\n\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"desc": "\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
@ -1190,7 +1190,7 @@
|
||||
}
|
||||
},
|
||||
"feature.magicType.emphasis.iconStyle.textBorderRadius": {
|
||||
"desc": "\n\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"desc": "\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
@ -1409,7 +1409,7 @@
|
||||
}
|
||||
},
|
||||
"emphasis.iconStyle.textBorderRadius": {
|
||||
"desc": "\n\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"desc": "\n\n<p>文本区域圆角大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user