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/15 04:48:24 UTC
[incubator-echarts-doc] branch live-example updated: add example
panel toggle and refresh
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 ac80528 add example panel toggle and refresh
ac80528 is described below
commit ac80528c8a66335c296c4faa78e99914c5fe2e4c
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Jun 15 12:48:12 2020 +0800
add example panel toggle and refresh
---
src/components/DocContent.vue | 10 ++++--
src/components/DocContentItemCard.vue | 3 ++
src/components/LiveExample.vue | 65 +++++++++++++++++++++++++++++++++--
src/controls/ControlColor.vue | 3 +-
src/controls/ControlVector.vue | 57 +++++++++++++++++++++---------
src/i18n.js | 12 +++++--
src/main.js | 6 +++-
src/store.js | 2 ++
8 files changed, 132 insertions(+), 26 deletions(-)
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index 82f52d8..39da38c 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -1,6 +1,6 @@
<template>
<div class="doc-main" v-loading="loading">
- <div class="doc-content">
+ <div :class="['doc-content', shared.showOptionExample ? 'option-example-actived' : '']">
<h2 :id="pageId">{{pageTitle}}</h2>
<div
class="page-description"
@@ -22,7 +22,7 @@
></DocContentItemCard>
</div>
</div>
- <LiveExample></LiveExample>
+ <LiveExample v-if="shared.showOptionExample"></LiveExample>
</div>
</template>
@@ -229,8 +229,12 @@ export default {
}
.doc-content {
- margin-right: 45%;
text-align: left;
+
+ &.option-example-actived {
+ margin-right: 45%;
+ }
+
h2 {
color: #B03A5B;
font-size: 34px;
diff --git a/src/components/DocContentItemCard.vue b/src/components/DocContentItemCard.vue
index 51c5086..c6fdd1e 100644
--- a/src/components/DocContentItemCard.vue
+++ b/src/components/DocContentItemCard.vue
@@ -107,6 +107,9 @@ export default {
this.shared.previewOption, this.nodeData.path, undefined
));
}
+ else {
+ this.shared.showOptionExample = true;
+ }
}
},
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index fc49942..79c1a28 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -8,6 +8,17 @@
<div class="example-code">
<div class="codemirror-main"></div>
</div>
+ <el-alert
+ :title="$t('example.setOptionError')"
+ v-if="hasError"
+ type="error"
+ >
+ </el-alert>
+ </div>
+ <div class="toolbar">
+ <el-select size='mini' class="example-list"></el-select>
+ <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refreshForce">刷新</el-button>
+ <el-button size='mini' @click="closeExamplePanel">关闭</el-button>
</div>
</div>
</template>
@@ -42,6 +53,8 @@ function fetchECharts() {
function updateOption(option) {
const viewport = this.$el.querySelector('.preview-main');
+ // Clear error msg.
+ this.hasError = false;
if (typeof echarts === 'undefined') {
fetchECharts().then(() => {
if (!this.echartsInstance) {
@@ -54,7 +67,14 @@ function updateOption(option) {
if (!this.echartsInstance) {
this.chartInstance = echarts.init(viewport);
}
- this.chartInstance.setOption(option, true);
+ try {
+ this.chartInstance.setOption(option, true);
+ }
+ catch (e) {
+ // 一些属性切换的时候可能会出现一些位置的错误
+ console.error(e);
+ this.hasError = true
+ }
}
if (!this.cmInstance) {
@@ -76,7 +96,9 @@ export default {
data() {
return {
- shared: store
+ shared: store,
+
+ hasError: false
};
},
@@ -93,6 +115,17 @@ export default {
}
window.addEventListener('resize', resize);
resize();
+
+ if (this.shared.previewOption) {
+ this.updateOptionThrottled(this.shared.previewOption);
+ }
+ },
+
+ destroyed() {
+ if (this.chartInstance) {
+ this.chartInstance.dispose();
+ this.chartInstance = null;
+ }
},
watch: {
@@ -108,7 +141,22 @@ export default {
updateOptionThrottled: throttle(updateOption, 300, {
leading: false
- })
+ }),
+
+ refreshForce: function () {
+ // Dispose first
+ if (this.shared.previewOption) {
+ if (this.chartInstance) {
+ this.chartInstance.dispose();
+ this.chartInstance = null;
+ }
+ this.updateOption(this.shared.previewOption);
+ }
+ },
+
+ closeExamplePanel() {
+ this.shared.showOptionExample = false;
+ }
},
computed: {
@@ -154,6 +202,7 @@ export default {
font-size: 12px;
}
+
.preview-and-code {
position: absolute;
top: 90px;
@@ -162,6 +211,10 @@ export default {
right: 0;
}
+ .el-alert {
+ position: absolute;
+ top: 0;
+ }
.preview-main {
width: 100%;
background: #fefefe;
@@ -187,6 +240,12 @@ export default {
}
}
}
+
+ .toolbar {
+ position: absolute;
+ top: 20px;
+ right: 10px;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/controls/ControlColor.vue b/src/controls/ControlColor.vue
index 43ab730..39610e7 100644
--- a/src/controls/ControlColor.vue
+++ b/src/controls/ControlColor.vue
@@ -46,7 +46,8 @@ export default {
}
span {
- font-size: 14px;
+ font-size: 12px;
+ font-weight: bold;
}
}
</style>
\ No newline at end of file
diff --git a/src/controls/ControlVector.vue b/src/controls/ControlVector.vue
index 13c2bb1..ae9f877 100644
--- a/src/controls/ControlVector.vue
+++ b/src/controls/ControlVector.vue
@@ -1,29 +1,42 @@
<template>
<div class="control-vector">
- <div v-for="(dim, index) in dimsArr"
- :key="index">
- <label>{{dim}}:</label>
- <el-input-number
- v-model="innerValue[index]"
- controls-position="right"
- :min="+min"
- :max="max == null ? 1e4 : +max"
- :step="step == null ? 1 : +step"
- size="mini"
- @change="onValueChange"
- ></el-input-number>
+ <el-switch v-model="innerSeparate" :active-text="$t('example.vectorSetSeparate')"></el-switch>
+ <div v-if="innerSeparate" class="control-vector-group">
+ <div v-for="(dim, index) in dimsArr"
+ :key="index">
+ <label>{{dim}}:</label>
+ <el-input-number
+ v-model="innerValueArr[index]"
+ controls-position="right"
+ :min="+min"
+ :max="max == null ? 1e4 : +max"
+ :step="step == null ? 1 : +step"
+ size="mini"
+ @change="onValueChange"
+ ></el-input-number>
+ </div>
</div>
+ <el-input-number v-else
+ v-model="innerValueArr[0]"
+ controls-position="right"
+ size="mini"
+ :min="+min"
+ :max="max == null ? 1e4 : +max"
+ :step="step == null ? 1 : +step"
+ @change="onValueChange"
+ ></el-input-number>
</div>
</template>
<script>
export default {
- props: ['value', 'min', 'max', "step", 'dims'],
+ props: ['value', 'separate', 'min', 'max', "step", 'dims'],
data() {
return {
- innerValue: this.value.slice()
+ innerSeparate: this.separate || false,
+ innerValueArr: this.value.slice()
};
},
@@ -35,13 +48,18 @@ export default {
watch: {
value(newVal) {
- this.innerValue = newVal;
+ this.innerValueArr = newVal;
}
},
methods: {
onValueChange() {
- this.$emit('change', this.innerValue);
+ if (!this.innerSeparate) {
+ for (let i = 1; i < this.innerValueArr.length; i++) {
+ this.innerValueArr[i] = this.innerValueArr[0];
+ }
+ }
+ this.$emit('change', this.innerValueArr.slice());
}
}
}
@@ -55,6 +73,13 @@ export default {
font-size: 12px;
font-weight: bold;
}
+
+ .control-vector-group {
+ &>div {
+ display: inline-block;
+ margin-left: 5px;
+ }
+ }
.el-input-number {
width: 90px;
}
diff --git a/src/i18n.js b/src/i18n.js
index 20da287..2370b14 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -24,7 +24,11 @@ export default {
tryDesc: 'Try It',
defaultColor: 'Default Color',
- booleanDesc: 'Enable'
+ booleanDesc: 'Enable',
+
+ vectorSetSeparate: 'Separately',
+
+ setOptionError: 'Something Unexpected Happerns. Click refresh to try again!'
}
},
zh: {
@@ -53,7 +57,11 @@ export default {
tryDesc: '试一试',
defaultColor: '默认颜色',
- booleanDesc: '开启该功能'
+ booleanDesc: '开启该功能',
+
+ vectorSetSeparate: '分别设置',
+
+ setOptionError: '发生了一些意料之外的错误，点击刷新再试试！'
}
}
};
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index c2cdfab..3ea67b0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,7 +17,9 @@ import {
Footer,
Switch,
ColorPicker,
- InputNumber
+ InputNumber,
+ Select,
+ Alert
} from 'element-ui';
import {preload} from './docHelper';
// import 'element-ui/lib/theme-chalk/index.css';
@@ -45,6 +47,8 @@ Vue.use(Popover);
Vue.use(Switch);
Vue.use(ColorPicker);
Vue.use(InputNumber);
+Vue.use(Select);
+Vue.use(Alert);
/**
*
diff --git a/src/store.js b/src/store.js
index 19feb3c..4925726 100644
--- a/src/store.js
+++ b/src/store.js
@@ -14,6 +14,8 @@ export const store = {
locale: 'zh',
+ showOptionExample: false,
+
previewOption: ''
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org