You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/16 09:55:50 UTC
[incubator-echarts-doc] branch live-example updated: example: add
on more series
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch live-example
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/live-example by this push:
new 3a94c89 example: add on more series
3a94c89 is described below
commit 3a94c89f4bef1a353060be8a2bcac101516fa9cc
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 16 17:55:35 2020 +0800
example: add on more series
---
src/components/LiveExample.vue | 10 ++-
src/controls/ControlPercent.vue | 4 +
tool/md2json.js | 6 +-
zh/option/partial/label.md | 4 +-
zh/option/series/effectScatter.md | 35 ++++++++
zh/option/series/pie.md | 104 +++++++++++++++++++++++
zh/option/series/radar.md | 36 ++++++++
zh/option/series/scatter.md | 76 +++++++++++++++++
zh/option/series/sunburst.md | 172 ++++++++++++++++++++++++++++++++++++++
zh/option/series/tree.md | 57 +++++++++++++
10 files changed, 500 insertions(+), 4 deletions(-)
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index 4d8d281..e370f0f 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -136,6 +136,9 @@ export default {
if (this.shared.allOptionExamples) {
this.shared.currentExampleName = this.shared.allOptionExamples[0].name;
}
+ else {
+ this.shared.currentExampleName = ''
+ }
},
destroyed() {
@@ -155,7 +158,12 @@ export default {
'shared.allOptionExamples'(newVal) {
// Use the first example as default.
- this.shared.currentExampleName = newVal[0].name;
+ if (newVal) {
+ this.shared.currentExampleName = newVal[0].name;
+ }
+ else {
+ this.shared.currentExampleName = '';
+ }
},
'shared.currentExampleName'(newVal) {
this.changeExample(newVal);
diff --git a/src/controls/ControlPercent.vue b/src/controls/ControlPercent.vue
index 4d5b172..8ce59d6 100644
--- a/src/controls/ControlPercent.vue
+++ b/src/controls/ControlPercent.vue
@@ -55,6 +55,10 @@ export default {
watch: {
value(val) {
this.percentValue = +this.value.replace('%', '');
+ },
+ mode() {
+ // Emit after mode changed.
+ this.onValueChange();
}
},
diff --git a/tool/md2json.js b/tool/md2json.js
index b092506..37a8043 100644
--- a/tool/md2json.js
+++ b/tool/md2json.js
@@ -223,8 +223,12 @@ function mdToJsonSchema(mdStr, maxDepth, imagePath) {
currentExampleCode = attrib;
}
else if (tagName.startsWith('exampleuicontrol')) {
+ const type = tagName.replace('exampleuicontrol', '').toLowerCase();
+ if (['boolean', 'color', 'number', 'vector', 'enum', 'angle', 'percent', 'percentvector'].indexOf(type) < 0) {
+ console.error(`Unkown ExampleUIControl Type ${type}`);
+ }
property.uiControl = {
- type: tagName.replace('exampleuicontrol', '').toLowerCase(),
+ type,
...attrib
};
}
diff --git a/zh/option/partial/label.md b/zh/option/partial/label.md
index 9d3847b..bf0582a 100644
--- a/zh/option/partial/label.md
+++ b/zh/option/partial/label.md
@@ -6,14 +6,14 @@ ${name}图形上的文本标签，可用于说明图形的一些数据信息，
{{target:partial-label}}
#${prefix} show(boolean) = ${defaultShowLabel|default("false")}
-<ExampleUIControlBoolean />
+<ExampleUIControlBoolean default="${defaultShowLabel|default(false)}" />
是否显示标签。
{{ if: !${noPosition} }}
#${prefix} position(string|Array) = ${defaultPosition}
-<ExampleUIControlEnum options="top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight" />
+<ExampleUIControlEnum options="top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" />
{{use:partial-label-position}}
{{ /if }}
diff --git a/zh/option/series/effectScatter.md b/zh/option/series/effectScatter.md
index fc9c0d8..6c9a88d 100644
--- a/zh/option/series/effectScatter.md
+++ b/zh/option/series/effectScatter.md
@@ -7,6 +7,23 @@
**Tip:** ECharts 2.x 中在地图上通过 markPoint 实现地图特效在 ECharts 3 中建议通过地理坐标系上的 effectScatter 实现。
+<ExampleBaseOption name="effectScatter-bubble" title="特效气泡图">
+const option = {
+ xAxis: {},
+ yAxis: {
+ scale: true
+ },
+ series: [{
+ name: '1990',
+ type: 'effectScatter',
+ data: [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[432 [...]
+ symbolSize: function (data) {
+ return Math.sqrt(data[2]) / 5e2;
+ }
+ }]
+};
+</ExampleBaseOption>
+
## type(string) = 'effectScatter'
{{use: partial-component-id(prefix="#")}}
@@ -16,9 +33,15 @@
{{ use: partial-legend-hover-link() }}
## effectType(string) = 'ripple'
+
+<ExampleUIControlEnum options="ripple" />
+
特效类型，目前只支持涟漪特效`'ripple'`。
## showEffectOn(string) = 'render'
+
+<ExampleUIControlEnum options="render,emphasis" default="render" />
+
配置何时显示特效。
**可选：**
@@ -29,12 +52,24 @@
涟漪特效相关配置。
### color(string)
{{ use: partial-version(version = "4.4.0") }}
+
+<ExampleUIControlColor />
+
涟漪的颜色，默认为散点的颜色。
### period(number) = 4
+
+<ExampleUIControlNumber min="0" default="4" step="0.1" />
+
动画的周期，秒数。
### scale(number) = 2.5
+
+<ExampleUIControlNumber min="1" default="2.5" step="0.1" />
+
动画中波纹的最大缩放比例。
### brushType(string) = 'fill'
+
+<ExampleUIControlEnum options="stroke,fill" default="fill" />
+
波纹的绘制方式，可选 `'stroke'` 和 `'fill'`。
{{use: partial-coord-sys(
diff --git a/zh/option/series/pie.md b/zh/option/series/pie.md
index fdb79ab..ad49f16 100644
--- a/zh/option/series/pie.md
+++ b/zh/option/series/pie.md
@@ -17,6 +17,52 @@
**下面是自定义南丁格尔图的示例：**
~[500x400](${galleryViewPath}pie-custom&edit=1&reset=1)
+<ExampleBaseOption name="pie" title="基础饼图">
+const option = {
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ data: [
+ {value: 335, name: '直接访问'},
+ {value: 310, name: '邮件营销'},
+ {value: 234, name: '联盟广告'},
+ {value: 135, name: '视频广告'},
+ {value: 1548, name: '搜索引擎'}
+ ]
+ }
+ ]
+};
+
+<ExampleBaseOption name="pie" title="很多数据的饼图">
+const option = {
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ data: [
+ {value: 335, name: '直接访问'},
+ {value: 310, name: '邮件营销'},
+ {value: 234, name: '联盟广告'},
+ {value: 135, name: '视频广告'},
+ {value: 1548, name: '搜索引擎'}
+ ]
+ }
+ ]
+};
+
+</ExampleBaseOption>
+
## type(string) = 'pie'
{{use: partial-component-id(prefix="#")}}
@@ -26,41 +72,75 @@
{{ use: partial-legend-hover-link }}
## hoverAnimation(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否开启 hover 在扇区上的放大动画效果。
## hoverOffset(number) = 10
+
+<ExampleUIControlNumber min="0" default="10" />
+
高亮扇区的偏移距离。
## selectedMode(boolean|string) = false
+
+<ExampleUIControlEnum options="single,multiple" />
+
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选`'single'`，`'multiple'`，分别表示单选还是多选。
## selectedOffset(number) = 10
+
+<ExampleUIControlNumber min="0" default="10" />
+
选中扇区的偏移距离。
## clockwise(boolean) = true
+
+<ExampleUIControlBoolean />
+
饼图的扇区是否是顺时针排布。
## startAngle(number) = 90
+
+
+<ExampleUIControlAngle step="1" min="0" max="360" default="90" />
+
起始角度，支持范围[0, 360]。
## minAngle(number) = 0
+
+<ExampleUIControlAngle step="1" min="0" max="360" default="0" />
+
最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
## minShowLabelAngle(number) = 0
+
+<ExampleUIControlAngle step="1" min="0" max="360" default="0" />
+
小于这个角度（0 ~ 360）的扇区，不显示标签（label 和 labelLine）。
## roseType(boolean|string) = false
+
+<ExampleUIControlEnum options="radius,area" />
+
是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
+ `'radius'` 扇区圆心角展现数据的百分比，半径展现数据的大小。
+ `'area'` 所有扇区圆心角相同，仅通过半径展现数据大小。
## avoidLabelOverlap(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
如果不需要开启该策略，例如[圆环图](${galleryEditorPath}pie-doughnut)这个例子中需要强制所有标签放在中心位置，可以将该值设为 `false`。
## stillShowZeroSum(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
是否在数据和为`0`（一般情况下所有数据为`0`） 的时候不显示扇区。
{{ use: partial-cursor }}
@@ -84,6 +164,8 @@
### alignTo(string) = 'none'
+<ExampleUIControlEnum options="labelLine,edge" />
+
标签的对齐方式，仅当 `position` 值为 `'outer'` 时有效。
从 ECharts v4.6.0 版本起，我们提供了 `'labelLine'` 与 `'edge'` 两种新的布局方式。
@@ -96,6 +178,8 @@
### margin(string|number) = '25%'
+<ExampleUIControlPercent default="20%" />
+
文字边距，仅当 [label.position](~series-pie.label.position) 为 `'outer'` 并且 [label.alignTo](~series-pie.label.alignTo) 为 `'edge'` 时有效。
~[900x250](${galleryViewPath}doc-example/pie-label-margin&edit=1&reset=1)
@@ -104,12 +188,16 @@
### bleedMargin(number) = 10
+<ExampleUIControlNumber default="10" min="0" step="1" />
+
文字的出血线大小，超过出血线的文字将被裁剪为 `'...'`。仅当 [label.position](~series-pie.label.position) 为 `'outer'` 并且 [label.alignTo](~series-pie.label.alignTo) 为 `'none'` 或 `'labelLine'` 的情况有效。
~[800x250](${galleryViewPath}doc-example/pie-label-bleedMargin&edit=1&reset=1)
### distanceToLabelLine(number) = 5
+<ExampleUIControlNumber default="5" min="0" step="0.5" />
+
文字与 label line 之间的距离。
~[800x250](${galleryViewPath}doc-example/pie-label-distanceToLabelLine&edit=1&reset=1)
@@ -235,11 +323,17 @@
) }}
## animationType(string) = 'expansion'
+
+<ExampleUIControlEnum options="expansion,scale" />
+
初始动画效果，可选
+ `'expansion'` 默认沿圆弧展开的效果。
+ `'scale'` 缩放效果，配合设置 `animationEasing='elasticOut'` 可以做成 popup 的效果。
## animationTypeUpdate(string) = 'transition'
+
+<ExampleUIControlEnum options="expansion,transition" />
+
{{ use: partial-version(version = "4.4.0") }}
更新数据时的动画效果，可选：
+ `'transition'` 通过改变起始和终止角度，从之前的数据过渡到新的数据。
@@ -297,17 +391,27 @@
{{ target: partial-pie-label-line }}
#${prefix} show(boolean)
+
+<ExampleUIControlBoolean />
+
是否显示视觉引导线。
{{ if: ${length} }}
#${prefix} length(number)
+
+<ExampleUIControlNumber default="15" min="0" step="1" />
+
视觉引导线第一段的长度。
{{ /if }}
{{ if: ${length2} }}
#${prefix} length2(number)
+<ExampleUIControlNumber default="15" min="0" step="1" />
视觉引导项第二段的长度。
{{ /if }}
{{ if: ${smooth} }}
#${prefix} smooth(boolean|number) = false
+
+<ExampleUIControlBoolean />
+
是否平滑视觉引导线，默认不平滑，可以设置成 `true` 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。
{{ /if }}
#${prefix} lineStyle(Object)
diff --git a/zh/option/series/radar.md b/zh/option/series/radar.md
index 84d668b..20daa2d 100644
--- a/zh/option/series/radar.md
+++ b/zh/option/series/radar.md
@@ -11,6 +11,42 @@
~[600x500](${galleryViewPath}radar-aqi&edit=1&reset=1)
+<ExampleBaseOption name="radar" title="基础雷达图">
+const option = {
+ title: {
+ text: '基础雷达图'
+ },
+ tooltip: {},
+ legend: {
+ data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
+ },
+ radar: {
+ indicator: [
+ { name: '销售（sales）', max: 6500},
+ { name: '管理（Administration）', max: 16000},
+ { name: '信息技术（Information Techology）', max: 30000},
+ { name: '客服（Customer Support）', max: 38000},
+ { name: '研发（Development）', max: 52000},
+ { name: '市场（Marketing）', max: 25000}
+ ]
+ },
+ series: [{
+ name: '预算 vs 开销（Budget vs spending）',
+ type: 'radar',
+ data: [
+ {
+ value: [4300, 10000, 28000, 35000, 50000, 19000],
+ name: '预算分配（Allocated Budget）'
+ },
+ {
+ value: [5000, 14000, 28000, 31000, 42000, 21000],
+ name: '实际开销（Actual Spending）'
+ }
+ ]
+ }]
+};
+</ExampleBaseOption>
+
## type(string) = 'radar'
{{use: partial-component-id(prefix="#")}}
diff --git a/zh/option/series/scatter.md b/zh/option/series/scatter.md
index 8203d33..a24acc5 100644
--- a/zh/option/series/scatter.md
+++ b/zh/option/series/scatter.md
@@ -7,6 +7,79 @@
可以应用在[直角坐标系](~grid)，[极坐标系](~polar)，[地理坐标系](~geo)上。
+<ExampleBaseOption name="scatter" title="基础散点图">
+const option = {
+ title: {
+ text: '身高体重分布',
+ subtext: '抽样调查来自: Heinz 2003',
+ left: 'center
+ },
+ grid: {
+ left: '3%',
+ right: '7%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ scale: true,
+ axisLabel: {
+ formatter: '{value} cm'
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ scale: true,
+ axisLabel: {
+ formatter: '{value} kg'
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ series: [
+ {
+ name: '男性',
+ type: 'scatter',
+ data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],[183.5, 74.8], [175.5, 70.0], [...]
+ ]
+ }
+ ]
+};
+</ExampleBaseOption>
+
+<ExampleBaseOption name="scatter-bubble" title="气泡图">
+const option = {
+ title: {
+ text: '1990 与 2015 年各国家人均寿命与 GDP'
+ },
+ legend: {
+ right: 10,
+ data: ['1990', '2015']
+ },
+ xAxis: {},
+ yAxis: {},
+ series: [{
+ name: '1990',
+ type: 'scatter',
+ data: [[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[432 [...]
+ symbolSize: function (data) {
+ return Math.sqrt(data[2]) / 5e2;
+ }
+ }, {
+ name: '2015',
+ data: [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand', [...]
+ type: 'scatter',
+ symbolSize: function (data) {
+ return Math.sqrt(data[2]) / 5e2;
+ }
+ }]
+};
+</ExampleBaseOption>
+
## type(string) = 'scatter'
{{use: partial-component-id(prefix="#")}}
@@ -23,6 +96,9 @@
)}}
## hoverAnimation(boolean)
+
+<ExampleUIControlBoolean default="true" />
+
是否开启鼠标 hover 的提示动画效果。
{{ use: partial-legend-hover-link }}
diff --git a/zh/option/series/sunburst.md b/zh/option/series/sunburst.md
index c297691..e702864 100644
--- a/zh/option/series/sunburst.md
+++ b/zh/option/series/sunburst.md
@@ -2,6 +2,8 @@
#${prefix} rotate(string|number) = 'radial'
+<ExampleUIControlEnum options="radial,tangential" default="radial" />
+
如果是 `number` 类型，则表示标签的旋转角，从 -90 度到 90 度，正值是逆时针。
除此之外，还可以是字符串 `'radial'` 表示径向旋转、`'tangential'` 表示切向旋转。
@@ -14,12 +16,16 @@
#${prefix} align(string) = 'center'
+<ExampleUIControlEnum options="left,center,right" default="center" />
+
文字对齐方式，可取值为：`'left'`、 `'center'`、 `'right'`。注意，`'left'` 是指靠近内圈，而 `'right'` 是指靠近外圈。
~[700x400](${galleryViewPath}doc-example/sunburst-label-align&edit=1&reset=1)
#${prefix} minAngle(number) = null
+<ExampleUIControlAngle min="0" step="1" max="360" />
+
当某个扇形块的角度小于该值（角度制）时，扇形块对应的文字不显示。该值用以隐藏过小扇形块中的文字。
@@ -125,6 +131,164 @@ ECharts 中，通常使用 *emphasis* 表示鼠标移动到图形上后的高亮
旭日图默认支持数据下钻，也就是说，当用户点击了某个扇形块之后，将会以该节点作为根结点显示，并且在中间出现一个返回上层节点的圆。如果不希望有数据下钻功能，可以通过将 [series-sunburst.nodeClick](~series-treemap.nodeClick) 设置为 `false` 实现。
+<ExampleBaseOption name="sunburst" title="基础旭日图">
+const data = [{
+ name: 'Food',
+ children: [{
+ value: 5,
+ name: 'Fruit',
+ children: [{
+ value: 1,
+ name: 'Apple'
+ }, {
+ value: 2,
+ name: 'Orange',
+ children: [{
+ name: 'Seville Orange',
+ value: 1
+ }]
+ }, {
+ children: [{
+ name: 'Blood Orange',
+ value: 1
+ }]
+ }]
+ }, {
+ value: 10,
+ name: 'Meat',
+ children: [{
+ value: 6,
+ name: 'Beaf',
+ children: [{
+ name: 'Sirloin',
+ value: 1
+ }, {
+ name: 'Rib',
+ value: 1
+ }, {
+ name: 'Chuck',
+ value: 1
+ }, {
+ name: 'Shank',
+ value: 1
+ }]
+ }, {
+ value: 2,
+ name: 'Chicken',
+ children: [{
+ name: 'Wings',
+ value: 1
+ }]
+ }, {
+ children: [{
+ name: 'Breast',
+ value: 1
+ }]
+ }]
+ }]
+}, {
+ value: 9,
+ name: 'Drinks',
+ children: [{
+ value: 4,
+ name: 'Wine',
+ children: [{
+ name: 'USA',
+ value: 2
+ }, {
+ name: 'Europe',
+ children: [{
+ name: 'Germany',
+ value: 1
+ }]
+ }]
+ }, {
+ name: 'Soft Drink',
+ children: [{
+ value: 3,
+ name: 'Juice',
+ children: [{
+ name: 'Apple Juice',
+ value: 1
+ }, {
+ name: 'Orange Juice',
+ value: 1
+ }]
+ }]
+ }]
+}, {
+ value: 7,
+ name: 'Fashion',
+ children: [{
+ name: 'Clothing',
+ children: [{
+ name: 'Shirts',
+ value: 1
+ }, {
+ name: 'Jackets',
+ value: 3,
+ children: [{
+ name: 'Men',
+ value: 1
+ }, {
+ name: 'Woman',
+ value: 1
+ }]
+ }, {
+ value: 2,
+ name: 'Coats',
+ children: [{
+ name: 'Men',
+ value: 1
+ }, {
+ name: 'Woman',
+ value: 1
+ }]
+ }]
+ }]
+}, {
+ name: 'Computers',
+ children: [{
+ name: 'Components',
+ value: 6,
+ children: [{
+ name: 'Barebones',
+ value: 1
+ }, {
+ value: 2,
+ name: 'External',
+ children: [{
+ name: 'Hard Drives',
+ value: 2
+ }]
+ }, {
+ name: 'Monitors',
+ value: 1
+ }]
+ }, {
+ value: 3,
+ name: 'Other',
+ children: [{
+ name: 'USB',
+ value: 1,
+ }, {
+ name: 'Cases'
+ }, {
+ name: 'Sound Cards',
+ value: 1
+ }]
+ }]
+}];
+
+const option = {
+ series: {
+ radius: ['15%', '80%'],
+ type: 'sunburst',
+ data: data
+ }
+};
+
+</ExampleBaseOption>
## type(string) = 'sunburst'
@@ -219,6 +383,8 @@ ECharts 中，通常使用 *emphasis* 表示鼠标移动到图形上后的高亮
## highlightPolicy(string) = 'descendant'
+<ExampleUIControlEnum default="descendant" options="descendant,ancestor,none" />
+
当鼠标移动到一个扇形块时，可以高亮相关的扇形块。**如果其值为 `'descendant'`，则会高亮该扇形块和后代元素，其他元素将被淡化（*downplay*，参见 [itemStyle](~series-sunburst.itemStyle)）；如果其值为 `'ancestor'`，则会高亮该扇形块和祖先元素；如果其值为 `'self'` 则只高亮自身；`'none'` 则不会淡化其他元素。**
~[700x350](${galleryViewPath}doc-example/sunburst-highlight-descendant&edit=1&reset=1)
@@ -255,6 +421,8 @@ downplay: {
## nodeClick(boolean|string) = 'rootToNode'
+<ExampleUIControlEnum default="rootToNode" options="rootToNode,link" />
+
点击节点后的行为。可取值为：
+ `false`：节点点击无反应。
@@ -265,6 +433,8 @@ downplay: {
## sort(string|Function) = 'desc'
+<ExampleUIControlEnum default="desc" options="desc,asc" />
+
扇形块根据数据 [`value`](~series-sunburst.data.value) 的排序方式，如果未指定 `value`，则其值为子元素 `value` 之和。默认值 `'desc'` 表示降序排序；还可以设置为 `'asc'` 表示升序排序；`null` 表示不排序，使用原始数据的顺序；或者用回调函数进行排列：
```js
@@ -277,6 +447,8 @@ function(nodeA, nodeB) {
## renderLabelForZeroData(boolean) = false
+<ExampleUIControlBoolean />
+
如果数据没有 `name`，是否需要渲染文字。
diff --git a/zh/option/series/tree.md b/zh/option/series/tree.md
index 2a88e3f..dcd3eeb 100644
--- a/zh/option/series/tree.md
+++ b/zh/option/series/tree.md
@@ -17,6 +17,49 @@
~[800x680](${galleryViewPath}tree-legend&edit=1&reset=1)
+
+<ExampleBaseOption name="tree" title="基础树图">
+const option = {
+ series: [{
+ type: 'tree',
+ data: [{
+ name: 'root',
+ children: [{
+ name: 'Child A',
+ children: [{
+ name: 'Leaf C'
+ }, {
+ name: 'Leaf D'
+ }, {
+ name: 'Leaf E'
+ }, {
+ name: 'Leaf F'
+ }]
+ }, {
+ name: 'Child B',
+ children: [{
+ name: 'Leaf G'
+ }, {
+ name: 'Leaf H'
+ }]
+ }, {
+ name: 'Child D'
+ }, {
+ name: 'Child F',
+ children: [{
+ name: 'Leaf J'
+ }, {
+ name: 'Leaf K'
+ }]
+ }]
+ }],
+ label: {
+ position: 'right'
+ }
+ }]
+}
+</ExampleBaseOption>
+
## type(string) = 'tree'
{{use: partial-component-id(prefix="#")}}
@@ -35,6 +78,8 @@
## layout(string) = 'orthogonal'
+<ExampleUIControlEnum options="orthogonal,radial" default="orthogonal" />
+
树图的布局，有 `正交` 和 `径向` 两种。这里的 `正交布局` 就是我们通常所说的 `水平` 和 `垂直` 方向，对应的参数取值为 `'orthogonal'` 。而 `径向布局` 是指以根节点为圆心，每一层节点为环，一层层向外发散绘制而成的布局，对应的参数取值为 `'radial'` 。
**正交布局示例：**
@@ -49,6 +94,9 @@
## orient(string) = 'LR'
+<ExampleUIControlEnum options="LR,RL,TB,BT" default="LR" />
+
+
树图中 `正交布局` 的方向，也就是说只有在 `layout = 'orthogonal'` 的时候，该配置项才生效。对应有 `水平` 方向的 `从左到右`，`从右到左`；以及垂直方向的 `从上到下`，`从下到上`。取值分别为 `'LR'` , `'RL'`, `'TB'`, `'BT'`。**注意**，之前的配置项值 `'horizontal'` 等同于 `'LR'`， `'vertical'` 等同于 `'TB'`。
@@ -62,6 +110,9 @@
## edgeShape(string) = 'curve'
+
+<ExampleUIControlEnum options="curve,polyline" default="curve" />
+
{{ use: partial-version(version = "4.7.0") }}
树图在 `正交布局` 下，边的形状。分别有曲线和折线两种，对应的取值是 `curve` 和 `polyline`.
@@ -71,6 +122,8 @@
## edgeForkPosition(string) = '50%'
+<ExampleUIControlPercent default="50%" />
+
正交布局下当边的形状是折线时，子树中折线段分叉的位置。这里的位置指的是分叉点与子树父节点的距离占整个子树高度的百分比。默认取值是 `'50%'`，可以是 ['0', '100%'] 之间。
**注意：该配置项只有在 `edgeShape = 'curve'` 时才有效。**
@@ -82,12 +135,16 @@
## expandAndCollapse(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
子树折叠和展开的交互，`默认打开` 。由于绘图区域是有限的，而通常一个树图的节点可能会比较多，这样就会出现节点之间相互遮盖的问题。为了避免这一问题，可以将暂时无关的子树折叠收起，等到需要时再将其展开。如上面径向布局树图示例，节点中心用蓝色填充的就是折叠收起的子树，可以点击将其展开。
**注意：如果配置自定义的图片作为节点的标记，是无法通过填充色来区分当前节点是否有折叠的子树的。而目前暂不支持，上传两张图片分别表示节点折叠和展开两种状态。所以，如果想明确地显示节点的两种状态，建议使用 `ECharts` 常规的标记类型，如 `'emptyCircle'` 等。**
## initialTreeDepth(number) = 2
+<ExampleUIControlNumber default="2" min="0" step="1" />
+
树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层，... ，直到叶子节点。该配置项主要和 `折叠展开` 交互一起使用，目的还是为了防止一次展示过多节点，节点之间发生遮盖。如果设置为 `-1` 或者 `null` 或者 `undefined`，所有节点都将展开。
## itemStyle(Object)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org