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 14:42:04 UTC
[incubator-echarts-doc] branch live-example updated: example: can
set option on data.
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 546b342 example: can set option on data.
546b342 is described below
commit 546b34273ded03b46386ca83923dd62c95357310
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 16 22:40:51 2020 +0800
example: can set option on data.
---
src/store.js | 41 +++--
zh/option/partial/rect-layout-width-height.md | 4 +
zh/option/series/sunburst.md | 1 -
zh/option/series/tree.md | 6 +
zh/option/series/treemap.md | 221 ++++++++++++++++++++++++--
5 files changed, 242 insertions(+), 31 deletions(-)
diff --git a/src/store.js b/src/store.js
index a3f4a4e..c5a51b5 100644
--- a/src/store.js
+++ b/src/store.js
@@ -43,42 +43,55 @@ export function isOptionDoc() {
export function changeOption(option, path, value) {
- function changeOptionRecursive(obj, pathParts) {
- const item = pathParts.shift();
+ function changeOptionRecursive(obj, pathParts, objKey) {
+ const itemStr = pathParts.shift();
+ if (typeof obj !== 'object' && objKey === 'data') {
+ // Convert number to object
+ obj = {
+ value: obj
+ };
+ }
+
// Clone a new object because the original one is freezed and cant be changed.
obj = Object.assign({}, obj);
if (!pathParts.length) {
if (value === undefined) {
- delete obj[item];
+ delete obj[itemStr];
return obj;
}
else {
- obj[item] = value;
+ obj[itemStr] = value;
return obj;
}
}
- const subtypeItems = item.split('-');
+ const subtypeItems = itemStr.split('-');
const key = subtypeItems[0];
const subtype = subtypeItems[1];
- const prop = obj[key] || {};
+ // TODO: If prop not exists and it should be an array.
+ const prop = obj[key] == null ? {} : obj[key];
if (Array.isArray(prop)) {
- obj[key] = prop.map(function (childObj, idx) {
- if (subtype && childObj.type !== subtype) {
- return childObj;
- }
- return changeOptionRecursive(childObj, pathParts.slice());
- });
+ if (key === 'series') { // Only set all on series.
+ obj[key] = prop.map(function (childObj, idx) {
+ if (subtype && childObj.type !== subtype) {
+ return childObj;
+ }
+ return changeOptionRecursive(childObj, pathParts.slice(), key);
+ });
+ }
+ // Only change the first one.
+ // TODO: Should be able to choose the index.
+ prop[0] && (prop[0] = changeOptionRecursive(prop[0], pathParts.slice(), key));
}
else {
if (subtype && prop.type !== subtype) {
obj[key] = prop;
}
- obj[key] = changeOptionRecursive(prop, pathParts.slice());
+ obj[key] = changeOptionRecursive(prop, pathParts.slice(), key);
}
return obj;
}
- return changeOptionRecursive(option, path.split('.'));
+ return changeOptionRecursive(option, path.split('.'), '');
}
\ No newline at end of file
diff --git a/zh/option/partial/rect-layout-width-height.md b/zh/option/partial/rect-layout-width-height.md
index c40661c..8455f79 100644
--- a/zh/option/partial/rect-layout-width-height.md
+++ b/zh/option/partial/rect-layout-width-height.md
@@ -10,8 +10,12 @@
## width(string|number) = ${defaultWidth|default("'auto'")}
+<ExampleUIControlPercent default="50%"/>
+
${componentName}组件的宽度。{{ if: !${defaultWidth} }}默认自适应。{{ /if }}
## height(string|number) = ${defaultHeight|default("'auto'")}
+<ExampleUIControlPercent default="50%"/>
+
${componentName}组件的高度。{{ if: !${defaultHeight} }}默认自适应。{{ /if }}
diff --git a/zh/option/series/sunburst.md b/zh/option/series/sunburst.md
index e702864..2fbe057 100644
--- a/zh/option/series/sunburst.md
+++ b/zh/option/series/sunburst.md
@@ -282,7 +282,6 @@ const data = [{
const option = {
series: {
- radius: ['15%', '80%'],
type: 'sunburst',
data: data
}
diff --git a/zh/option/series/tree.md b/zh/option/series/tree.md
index dcd3eeb..5af2a40 100644
--- a/zh/option/series/tree.md
+++ b/zh/option/series/tree.md
@@ -314,14 +314,20 @@ const option = {
#${prefix} color(Color) = "'#ccc'"
+<ExampleUIControlColor default="#ccc" />
+
树图边的颜色。
#${prefix} width(number) = 1.5
+<ExampleUIControlNumber default="1.5" min="0" />
+
树图边的宽度。
#${prefix} curveness(number) = 0.5
+<ExampleUIControlNumber default="0.5" min="0" />
+
树图边的曲度。
{{use: partial-style-shadow(prefix=${prefix})}}
diff --git a/zh/option/series/treemap.md b/zh/option/series/treemap.md
index 8aa72f8..37e51e8 100644
--- a/zh/option/series/treemap.md
+++ b/zh/option/series/treemap.md
@@ -48,6 +48,165 @@ treemap 首先是把数值映射到『面积』这种视觉元素上。
<br>
<br>
+<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: {
+ type: 'treemap',
+ data: data,
+ levels: [{}, {}, {}]
+ }
+};
+
+</ExampleBaseOption>
+
## type(string) = 'treemap'
{{use: partial-component-id(prefix="#")}}
@@ -66,6 +225,8 @@ treemap 首先是把数值映射到『面积』这种视觉元素上。
## squareRatio(number)
+<ExampleUIControlNumber min="0.1" default="0.75" step="0.1" />
+
期望矩形长宽比率。布局计算时会尽量向这个比率靠近。
默认为黄金比：`0.5 * (1 + Math.sqrt(5))`。
@@ -73,6 +234,8 @@ treemap 首先是把数值映射到『面积』这种视觉元素上。
## leafDepth(number) = null
+<ExampleUIControlNumber min="1" step="1" />
+
设置了 `leafDepth` 后，下钻（`drill down`）功能开启。`drill down` 功能即点击后才展示子层级。
`leafDepth` 表示『展示几层』，层次更深的节点则被隐藏起来。点击则可下钻看到层次更深的节点。
@@ -90,6 +253,8 @@ treemap 首先是把数值映射到『面积』这种视觉元素上。
## roam(boolean|string) = true
+<ExampleUIControlEnum options="scale,move">
+
是否开启拖拽漫游（移动和缩放）。可取值有：
+ `false`：关闭。
@@ -110,6 +275,8 @@ treemap 首先是把数值映射到『面积』这种视觉元素上。
## zoomToNodeRatio(number) = 0.32*0.32
+<ExampleUIControlNumber min="0" default="0.1" step="0.01" />
+
点击某个节点，会自动放大那个节点到合适的比例（节点占可视区域的面积比例），这个配置项就是这个比例。
@@ -232,6 +399,8 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
### show(boolean) = true
+<ExampleUIControlBoolean default="true" />
+
是否显示面包屑。
@@ -246,11 +415,15 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
### height(number) = 22
+<ExampleUIControlNumber min="0" default="22" step="1" />
+
面包屑的高度。
### emptyItemWidth(number) = 25
+<ExampleUIControlNumber min="0" default="25" step="1" />
+
当面包屑没有内容时候，设个最小宽度。
@@ -421,12 +594,16 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
#${prefix} visualMin(number) = null
+<ExampleUIControlNumber default="0" />
+
当前层级的最小 value 值。如果不设置则自动统计。
手动指定 `visualMin`、`visualMax` ，即手动控制了 visual mapping 的值域（当 [colorMappingBy](~series-treemap.levels.colorMappingBy) 为 `'value'` 时有意义）。
#${prefix} visualMax(number) = null
+<ExampleUIControlNumber default="100" />
+
当前层级的最大 value 值。如果不设置则自动统计。
手动指定 `visualMin`、`visualMax` ，即手动控制了 visual mapping 的值域（当 [colorMappingBy](~series-treemap.levels.colorMappingBy) 为 `'value'` 时有意义）。
@@ -462,6 +639,8 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
#${prefix} colorMappingBy(string) = 'index'
+<ExampleUIControlEnum options="index,value,id" />
+
表示同一层级节点，在颜色列表中（参见 `color` 属性）选择时，按照什么来选择。可选值：
* `'value'`：
@@ -488,6 +667,8 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
#${prefix} visibleMin(number) = 10
+<ExampleUIControlNumber default="10" min="0" />
+
如果某个节点的矩形的面积，小于这个数值（单位：px平方），这个节点就不显示。
如果不加这个限制，很小的节点会影响显示效果。
@@ -498,6 +679,8 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
#${prefix} childrenVisibleMin(number) = null
+<ExampleUIControlNumber default="10" min="0" step="0.5" />
+
如果某个节点的矩形面积，小于这个数值（单位：px平方），则不显示这个节点的子节点。
这能够在矩形面积不足够大时候，隐藏节点的细节。当用户用鼠标缩放节点时，如果面积大于此阈值，又会显示子节点。
@@ -547,6 +730,8 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
###${prefix} height(number) = 20
+<ExampleUIControlNumber default="20" min="0" step="0.5" />
+
父节点标签区的高度。
#${prefix} itemStyle(Object)
@@ -591,14 +776,9 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
{{target: partial-treemap-prop-location-desc}}
<br>
> 注：treemap中 `${name}` 属性可能在多处地方存在：
-
-{{ if: ${name} !== 'color' }}
-> * 可以存在于 [sereis-treemap](~series-treemap) 根下，表示本系列全局的统一设置。
-
-{{ /if }}
-> * 可以存在于 [series-treemap.levels](~series-treemap.levels) 的每个数组元素中，表示树每个层级的统一设置。
-
-> * 存在于 [series-treemap.data](~series-treemap.data) 的每个节点中，表示每个节点的特定设置。
+{{ if: ${name} !== 'color' }}> * 于 [sereis-treemap](~series-treemap) 根下，表示本系列全局的统一设置。{{ /if }}
+> * 于 [series-treemap.levels](~series-treemap.levels) 的每个数组元素中，表示树每个层级的统一设置。
+> * 于 [series-treemap.data](~series-treemap.data) 的每个节点中，表示每个节点的特定设置。
@@ -617,27 +797,36 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
#${prefix} color(Color) = null
+<ExampleUIControlColor />
+
矩形的颜色。默认从全局调色盘 [option.color](~color) 获取颜色。
{{if: ${itemStyleType} === 'normal' }}
#${prefix} colorAlpha(number) = null
+<ExampleUIControlNumber step="0.01" min="0" max="1" default="1" />
+
矩形颜色的透明度。取值范围是 0 ~ 1 之间的浮点数。
#${prefix} colorSaturation(number) = null
-矩形颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。
+<ExampleUIControlNumber step="0.01" min="0" max="1" default="0.5" />
+矩形颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。
#${prefix} borderWidth(number) = 0
+<ExampleUIControlNumber step="0.5" min="0" />
+
矩形边框线宽。为 0 时无边框。而矩形的内部子矩形（子节点）的间隔距离是由 [gapWidth](~series-treemap.levels.gapWidth) 指定的。
#${prefix} gapWidth(number) = 0
+<ExampleUIControlNumber step="0.5" min="0" />
+
矩形内部子矩形（子节点）的间隔距离。
@@ -645,11 +834,15 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
#${prefix} borderColor(Color) = '#fff',
+<ExampleUIControlColor default="#fff" />
+
矩形边框 和 矩形间隔（gap）的颜色。
#${prefix} borderColorSaturation(Color) = null
+<ExampleUIControlNumber step="0.01" min="0" max="1" default="0.5" />
+
矩形边框的颜色的饱和度。取值范围是 0 ~ 1 之间的浮点数。
注意：
@@ -659,13 +852,9 @@ treemap 默认把第一个维度（Array 第一项）映射到『面积』上。
<br>
{{ use: partial-treemap-borderColor-setting(galleryEditorPath=${galleryEditorPath}) }}
-#${prefix} strokeColor(Color) = null
-
-每个矩形的描边颜色。
-
-#${prefix} strokeWidth(number) = null
-
-每个矩形的描边宽度。
+{{ use:partial-style-shadow-opacity(
+ prefix=${prefix}
+) }}
{{/if }}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org