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/17 09:24:26 UTC
[incubator-echarts-doc] branch live-example updated: example: add
clean mode to clear before setOption
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 11eb8ea example: add clean mode to clear before setOption
11eb8ea is described below
commit 11eb8eabec2f272eae62f04bd5bfc5e337d05d57
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jun 17 17:24:11 2020 +0800
example: add clean mode to clear before setOption
---
src/components/DocContentItemCard.vue | 2 +-
src/components/LiveExample.vue | 6 ++++++
src/components/OptionControl.vue | 2 ++
src/controls/ControlEnum.vue | 23 +++++++++++++-------
src/store.js | 2 ++
zh/option/partial/animation.md | 8 +++++--
zh/option/partial/line-style.md | 3 +++
zh/option/partial/roam.md | 2 +-
zh/option/series/graph.md | 40 +++++++++++++++++++++++++++++++++++
zh/option/series/treemap.md | 2 +-
10 files changed, 77 insertions(+), 13 deletions(-)
diff --git a/src/components/DocContentItemCard.vue b/src/components/DocContentItemCard.vue
index bcbace4..33b275d 100644
--- a/src/components/DocContentItemCard.vue
+++ b/src/components/DocContentItemCard.vue
@@ -26,7 +26,7 @@
<span class="default-value" v-if="nodeData.default && nodeData.default !== '*'"> = {{nodeData.default}}</span>
- <span class="control-toggle" v-if="uiControl">
+ <span class="control-toggle" v-if="uiControl && shared.allOptionExamples">
<el-switch :active-text="$t('example.tryDesc')" v-model="enableUIControl"></el-switch>
</span>
</h4>
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index fc7977a..581ca24 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -78,6 +78,9 @@ function updateOption(option) {
if (!this.echartsInstance) {
this.chartInstance = echarts.init(viewport);
}
+ if (this.shared.cleanMode) {
+ this.chartInstance.clear();
+ }
this.chartInstance.setOption(option, true);
})
}
@@ -86,6 +89,9 @@ function updateOption(option) {
this.chartInstance = echarts.init(viewport);
}
try {
+ if (this.shared.cleanMode) {
+ this.chartInstance.clear();
+ }
this.chartInstance.setOption(option, true);
}
catch (e) {
diff --git a/src/components/OptionControl.vue b/src/components/OptionControl.vue
index 23889ba..eeffaa7 100644
--- a/src/components/OptionControl.vue
+++ b/src/components/OptionControl.vue
@@ -98,6 +98,8 @@ export default {
methods: {
onValueChange(value) {
+ // If clean before setOption.
+ this.shared.cleanMode = this.controlConfig.clean;
// console.log(this.optionPath, value);
if (this.shared.currentExampleOption) {
this.shared.currentExampleOption = Object.freeze(
diff --git a/src/controls/ControlEnum.vue b/src/controls/ControlEnum.vue
index 7a79497..feb2076 100644
--- a/src/controls/ControlEnum.vue
+++ b/src/controls/ControlEnum.vue
@@ -4,13 +4,20 @@
<el-option v-for="item in optionsArr"
:key="item"
:value="item"
- :label="item"
- ></el-option>
+ :class="{'control-enum-special': specialValues[item] != null}"
+ >{{item}}</el-option>
</el-select>
</div>
</template>
<script>
+
+// Convert to special value.
+const specialValues = {
+ 'true': true,
+ 'false': false
+}
+
export default {
props: ['value', 'options'],
@@ -18,6 +25,9 @@ export default {
computed: {
optionsArr() {
return this.options.split(',').map(item => item.trim());
+ },
+ specialValues() {
+ return specialValues;
}
},
@@ -35,17 +45,14 @@ export default {
methods: {
onValueChange() {
- this.$emit('change', this.innerValue);
+ this.$emit('change', specialValues.hasOwnProperty(this.innerValue) ? specialValues[this.innerValue] : this.innerValue);
}
}
}
</script>
<style lang="scss">
-.control-color {
- &>* {
- display: inline-block;
- vertical-align: middle;
- }
+.control-enum-special {
+ font-style: italic;
}
</style>
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index a06862a..dd5b5fe 100644
--- a/src/store.js
+++ b/src/store.js
@@ -16,6 +16,8 @@ export const store = {
showOptionExample: false,
allOptionExamples: null,
+ // Clear before setOption
+ cleanMode: false,
currentExampleName: '',
currentExampleOption: ''
};
diff --git a/zh/option/partial/animation.md b/zh/option/partial/animation.md
index 7a7b6be..5138097 100644
--- a/zh/option/partial/animation.md
+++ b/zh/option/partial/animation.md
@@ -2,7 +2,7 @@
#${prefix} animation(boolean) = ${defaultAnimation|default(true)}
-<ExampleUIControlBoolean default="${defaultAnimation|default(true)}" />
+<ExampleUIControlBoolean default="${defaultAnimation|default(true)}" clean="true" />
是否开启动画。
@@ -38,6 +38,8 @@ animationDurationUpdate: function (idx) {
#${prefix} animationEasingUpdate(string) = ${defaultAnimationEasingUpdate|default('cubicOut')}
+<ExampleUIControlEnum 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" />
+
数据更新动画的缓动效果。
{{ if: !${noAnimationDelay} }}
@@ -60,7 +62,7 @@ animationDelayUpdate: function (idx) {
#${prefix} animationDuration(number|Function) = ${defaultAnimationDuration|default(1000)}
-<ExampleUIControlNumber min="0" default="${defaultAnimationDuration|default(1000)}" step="20" />
+<ExampleUIControlNumber min="0" default="${defaultAnimationDuration|default(1000)}" step="20" clean="true" />
初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：
@@ -73,6 +75,8 @@ animationDuration: function (idx) {
#${prefix} animationEasing(string) = ${defaultAnimationEasing|default('cubicOut')}
+<ExampleUIControlEnum options="linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut" clean="true" />
+
初始动画的缓动效果。不同的缓动效果可以参考 [缓动示例](${galleryEditorPath}line-easing)。
{{ if: !${noAnimationDelay} }}
diff --git a/zh/option/partial/line-style.md b/zh/option/partial/line-style.md
index 1ab25be..e2cf336 100644
--- a/zh/option/partial/line-style.md
+++ b/zh/option/partial/line-style.md
@@ -41,5 +41,8 @@ ${name}线的类型。
) }}
{{ if: ${hasCurveness} }}
#${prefix} curveness(number) = 0
+
+<ExampleUIControlNumber min="0" max="1" step="0.01" default="0" />
+
边的曲度，支持从 0 到 1 的值，值越大曲度越大。
{{ /if }}
diff --git a/zh/option/partial/roam.md b/zh/option/partial/roam.md
index f2acf66..14ca894 100644
--- a/zh/option/partial/roam.md
+++ b/zh/option/partial/roam.md
@@ -1,6 +1,6 @@
{{ target: partial-roam }}
-<ExampleUIControlEnum options="scale,move" />
+<ExampleUIControlEnum options="true,false,scale,move" />
是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 `'scale'` 或者 `'move'`。设置成 `true` 为都开启
diff --git a/zh/option/series/graph.md b/zh/option/series/graph.md
index 31e9eb2..68df275 100644
--- a/zh/option/series/graph.md
+++ b/zh/option/series/graph.md
@@ -11,6 +11,10 @@
~[600x400](${galleryViewPath}graph&reset=1&edit=1)
+<ExampleBaseOption name="graph" title="复杂关系图">
+const option = {"title":{"text":"Les Miserables","subtext":"Default layout","top":"bottom","left":"right"},"tooltip":{},"legend":[{"data":["类目0","类目1","类目2","类目3","类目4","类目5","类目6","类目7","类目8"]}],"animationDuration":1500,"animationEasingUpdate":"quinticInOut","series":[{"name":"Les Miserables","type":"graph","layout":"none","data":[{"id":"0","name":"Myriel","symbolSize":19.12381,"x":-266.82776,"y":299.6904,"value":28.685715,"category":0},{"id":"1","name":"Napoleon","symbolSize":2.6666666 [...]
+</ExampleBaseOption>
+
## type(string) = 'graph'
{{use: partial-component-id(prefix="#")}}
@@ -44,6 +48,9 @@ center: [115.97, 29.71]
当前视角的缩放比例。
## layout(string) = 'none'
+
+<ExampleUIControlEnum options="none,force,circular" />
+
图的布局。
**可选：**
@@ -57,6 +64,9 @@ center: [115.97, 29.71]
环形布局相关配置
### rotateLabel(boolean) = false
+
+<ExampleUIControlBoolean />
+
是否旋转标签，默认不旋转
## force(Object)
@@ -72,14 +82,23 @@ center: [115.97, 29.71]
也可以选择使用环形布局 `'circular'`。
### repulsion(Array|number) = 50
+
+<ExampleUIControlNumber min="0" step="5" default="50" />
+
节点之间的斥力因子。
支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
### gravity(number) = 0.1
+
+<ExampleUIControlNumber min="0" step="0.01" default="0.1" />
+
节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
### edgeLength(Array|number) = 30
+
+<ExampleUIControlNumber min="0" step="5" default="30" />
+
边的两个节点之间的距离，这个距离也会受 [repulsion](~series-graph.force.repulsion)。
支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例
@@ -90,9 +109,15 @@ edgeLength: [10, 50]
```
### layoutAnimation(boolean) = true
+
+<ExampleUIControlBoolean defualt="true" />
+
因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
### friction(number) = 0.6
+
+<ExampleUIControlNumber min="0" max="1" step="0.01" default="0.6" />
+
{{ use: partial-version(version = "4.5.0") }}
这个参数能减缓节点的移动速度。取值范围 0 到 1。
@@ -102,12 +127,21 @@ edgeLength: [10, 50]
{{ use: partial-roam }}
## nodeScaleRatio(number) = 0.6
+
+<ExampleUIControlNumber min="0" max="1" step="0.01" default="0.6" />
+
鼠标漫游缩放时节点的相应缩放比例，当设为`0`时节点不随着鼠标的缩放而缩放
## draggable(boolean) = false
+
+<ExampleUIControlBoolean default="false" />
+
节点是否可拖拽，只在使用力引导布局的时候有用。
## focusNodeAdjacency(boolean) = false
+
+<ExampleUIControlBoolean default="false" />
+
是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
{{ use: partial-symbol(
@@ -126,6 +160,9 @@ edgeSymbol: ['circle', 'arrow']
```
## edgeSymbolSize(Array|number) = 10
+
+<ExampleUIControlVector min="0" default="10" />
+
边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
{{ use: partial-cursor }}
@@ -311,6 +348,9 @@ links: [{
prefix="###"
)}}
#### curveness(number) = 0
+
+<ExampleUIControlNumber min="0" max="1" step="0.01" default="0" />
+
边的曲度，支持从 0 到 1 的值，值越大曲度越大。
### label(Object)
diff --git a/zh/option/series/treemap.md b/zh/option/series/treemap.md
index 9c362d0..9ea0e25 100644
--- a/zh/option/series/treemap.md
+++ b/zh/option/series/treemap.md
@@ -252,7 +252,7 @@ const option = {
## roam(boolean|string) = true
-<ExampleUIControlEnum options="scale,move">
+<ExampleUIControlEnum options="true,false,scale,move">
是否开启拖拽漫游（移动和缩放）。可取值有：
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org