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 06:10:49 UTC
[incubator-echarts-doc] branch live-example updated: add example
select
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 6d544f5 add example select
6d544f5 is described below
commit 6d544f5576a89d8905c91cafda1e31ad48652b8e
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Jun 15 14:10:36 2020 +0800
add example select
---
src/components/DocContent.vue | 13 ++++---
src/components/DocContentItemCard.vue | 4 +-
src/components/LiveExample.vue | 70 +++++++++++++++++++++++++++++------
src/components/OptionControl.vue | 6 +--
src/i18n.js | 10 ++++-
src/main.js | 2 +
src/store.js | 4 +-
zh/option/series/bar.md | 12 +-----
8 files changed, 83 insertions(+), 38 deletions(-)
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index 39da38c..fe7ebbb 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -84,7 +84,7 @@ export default {
return item && item.desc; // In mobile.
},
- pageExampleCode() {
+ pageExamples() {
const item = this.rootPageDescMap[this.pagePath]
|| this.pageDescMap[this.pagePath];
return item && item.exampleBaseOptions;
@@ -206,13 +206,14 @@ export default {
'shared.currentPath'(newVal) {
this.updateCurrentPath(newVal);
},
- 'pageExampleCode'(newVal) {
+ 'pageExamples'(newVal) {
// { code, title, name }
// TODO: Code switch
- const code = newVal && newVal[0] && newVal[0].code;
- if (code) {
- const func = new Function(code + '\n return option');
- this.shared.previewOption = Object.freeze(func());
+ if (newVal && newVal.length) {
+ this.shared.allOptionExamples = Object.freeze(newVal);
+ }
+ else {
+ this.shared.allOptionExamples = null;
}
}
}
diff --git a/src/components/DocContentItemCard.vue b/src/components/DocContentItemCard.vue
index c6fdd1e..80219f8 100644
--- a/src/components/DocContentItemCard.vue
+++ b/src/components/DocContentItemCard.vue
@@ -103,8 +103,8 @@ export default {
watch: {
enableUIControl(newVal) {
if (!newVal) {
- this.shared.previewOption = Object.freeze(changeOption(
- this.shared.previewOption, this.nodeData.path, undefined
+ this.shared.currentPreviewOption = Object.freeze(changeOption(
+ this.shared.currentPreviewOption, this.nodeData.path, undefined
));
}
else {
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index 79c1a28..d8bd00b 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -1,9 +1,9 @@
<template>
-<div id="example-panel">
+<div id="example-panel" v-if="shared.allOptionExamples">
<h2>{{$t('example.title')}}</h2>
<p class="intro">{{$t('example.intro')}}</p>
- <div class="preview-and-code">
+ <div class="preview-and-code" v-if="shared.currentPreviewOption">
<div class="preview-main"></div>
<div class="example-code">
<div class="codemirror-main"></div>
@@ -16,9 +16,16 @@
</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>
+ <el-select size='mini' class="example-list" v-model="exampleName"
+ :popper-append-to-body="false">
+ <el-option v-for="item in shared.allOptionExamples"
+ :key="item.name"
+ :value="item.name"
+ :label="item.title"
+ ></el-option>
+ </el-select>
+ <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refreshForce">{{$t('example.refresh')}}</el-button>
+ <el-button size='mini' @click="closeExamplePanel">{{$t('example.close')}}</el-button>
</div>
</div>
</template>
@@ -52,10 +59,18 @@ function fetchECharts() {
}
function updateOption(option) {
+ if (this.exampleName !== this.lastUpdateExampleName) {
+ this.lastUpdateExampleName = this.exampleName;
+ // Refresh all if example base option is changed.
+ this.refreshForce();
+ return;
+ }
+
const viewport = this.$el.querySelector('.preview-main');
// Clear error msg.
this.hasError = false;
if (typeof echarts === 'undefined') {
+ // TODO Put fetch charts when component is initialized.
fetchECharts().then(() => {
if (!this.echartsInstance) {
this.chartInstance = echarts.init(viewport);
@@ -82,6 +97,7 @@ function updateOption(option) {
value: this.formattedOptionCodeStr,
mode: 'javascript',
theme: 'paraiso-dark',
+ lineNumbers: true,
readOnly: true
});
}
@@ -90,6 +106,8 @@ function updateOption(option) {
// TODO: Only change the changed line. optimize
this.cmInstance.setValue(this.formattedOptionCodeStr);
}
+
+ this.lastUpdateExampleName = this.exampleName;
}
export default {
@@ -98,7 +116,11 @@ export default {
return {
shared: store,
- hasError: false
+ hasError: false,
+
+ exampleName: '',
+
+ lastUpdateExampleName: ''
};
},
@@ -116,8 +138,12 @@ export default {
window.addEventListener('resize', resize);
resize();
- if (this.shared.previewOption) {
- this.updateOptionThrottled(this.shared.previewOption);
+ if (this.shared.currentPreviewOption) {
+ this.updateOptionThrottled(this.shared.currentPreviewOption);
+ }
+
+ if (this.shared.allOptionExamples) {
+ this.exampleName = this.shared.allOptionExamples[0].name;
}
},
@@ -129,10 +155,18 @@ export default {
},
watch: {
- 'shared.previewOption'(newVal) {
+ 'shared.currentPreviewOption'(newVal) {
if (newVal) {
this.updateOptionThrottled(newVal);
}
+ },
+
+ 'shared.allOptionExamples'(newVal) {
+ // Use the first example as default.
+ this.exampleName = newVal[0].name;
+ },
+ 'exampleName'(newVal) {
+ this.changeExample(newVal);
}
},
@@ -145,23 +179,35 @@ export default {
refreshForce: function () {
// Dispose first
- if (this.shared.previewOption) {
+ if (this.shared.currentPreviewOption) {
if (this.chartInstance) {
this.chartInstance.dispose();
this.chartInstance = null;
}
- this.updateOption(this.shared.previewOption);
+ this.updateOption(this.shared.currentPreviewOption);
}
},
closeExamplePanel() {
this.shared.showOptionExample = false;
+ },
+
+ changeExample(exampleName) {
+ const example = this.shared.allOptionExamples &&
+ this.shared.allOptionExamples.find(item => item.name === exampleName);
+ if (!example) {
+ this.shared.currentPreviewOption = null;
+ return false;
+ }
+ const code = example.code;
+ const func = new Function(code + '\n return option');
+ this.shared.currentPreviewOption = Object.freeze(func());
}
},
computed: {
optionCodeStr() {
- return `const option = ${JSON.stringify(this.shared.previewOption)}`;
+ return `const option = ${JSON.stringify(this.shared.currentPreviewOption)}`;
},
formattedOptionCodeStr() {
diff --git a/src/components/OptionControl.vue b/src/components/OptionControl.vue
index 9ade77d..41cc1a3 100644
--- a/src/components/OptionControl.vue
+++ b/src/components/OptionControl.vue
@@ -78,9 +78,9 @@ export default {
methods: {
onValueChange(value) {
// console.log(this.optionPath, value);
- if (this.shared.previewOption) {
- this.shared.previewOption = Object.freeze(
- changeOption(this.shared.previewOption, this.optionPath, value)
+ if (this.shared.currentPreviewOption) {
+ this.shared.currentPreviewOption = Object.freeze(
+ changeOption(this.shared.currentPreviewOption, this.optionPath, value)
);
}
}
diff --git a/src/i18n.js b/src/i18n.js
index 2370b14..42077aa 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -28,7 +28,10 @@ export default {
vectorSetSeparate: 'Separately',
- setOptionError: 'Something Unexpected Happerns. Click refresh to try again!'
+ setOptionError: 'Something Unexpected Happerns. Click refresh to try again!',
+
+ refresh: 'Refresh',
+ close: 'Close'
}
},
zh: {
@@ -61,7 +64,10 @@ export default {
vectorSetSeparate: '分别设置',
- setOptionError: '发生了一些意料之外的错误，点击刷新再试试！'
+ setOptionError: '发生了一些意料之外的错误，点击刷新再试试！',
+
+ refresh: '刷新',
+ close: '关闭'
}
}
};
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 3ea67b0..3b4634a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,6 +19,7 @@ import {
ColorPicker,
InputNumber,
Select,
+ Option,
Alert
} from 'element-ui';
import {preload} from './docHelper';
@@ -48,6 +49,7 @@ Vue.use(Switch);
Vue.use(ColorPicker);
Vue.use(InputNumber);
Vue.use(Select);
+Vue.use(Option);
Vue.use(Alert);
/**
diff --git a/src/store.js b/src/store.js
index 4925726..cc57876 100644
--- a/src/store.js
+++ b/src/store.js
@@ -15,8 +15,8 @@ export const store = {
locale: 'zh',
showOptionExample: false,
-
- previewOption: ''
+ allOptionExamples: null,
+ currentPreviewOption: ''
};
export function getPagePath() {
diff --git a/zh/option/series/bar.md b/zh/option/series/bar.md
index 7fbb951..d203f2e 100644
--- a/zh/option/series/bar.md
+++ b/zh/option/series/bar.md
@@ -28,7 +28,7 @@ const option = {
<ExampleBaseOption name="cartesian-bar-multiple-series" title="直角坐标系上的多系列柱状图">
option = {
legend: {
- data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+ data: ['直接访问', '联盟广告', '搜索引擎']
},
grid: {
left: '3%',
@@ -50,16 +50,6 @@ option = {
data: [320, 302, 301, 334, 390, 330, 320]
},
{
- name: '邮件营销',
- type: 'bar',
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
- name: '联盟广告',
- type: 'bar',
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
name: '视频广告',
type: 'bar',
data: [150, 212, 201, 154, 190, 330, 410]
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org