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/14 07:31:09 UTC
[incubator-echarts-doc] branch live-example updated: add example
code
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 eced8c2 add example code
eced8c2 is described below
commit eced8c246e96424fb663327970d1331b0e4c0a78
Author: pissang <bm...@gmail.com>
AuthorDate: Sun Jun 14 15:30:51 2020 +0800
add example code
---
package-lock.json | 138 +++++++++++++++++++++++++++-------
package.json | 2 +
src/components/DocContent.vue | 2 +-
src/components/DocContentItemCard.vue | 5 +-
src/components/LiveExample.vue | 86 +++++++++++++++++++--
src/components/OptionControl.vue | 34 ++++++++-
src/controls/ControlBoolean.vue | 2 +-
src/controls/ControlColor.vue | 3 +-
src/controls/ControlNumber.vue | 8 +-
src/controls/ControlVector.vue | 18 ++---
src/directive/highlight.js | 3 +-
11 files changed, 238 insertions(+), 63 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index e1167ae..18e0a81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1565,6 +1565,11 @@
"integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
"dev": true
},
+ "abbrev": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+ "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+ },
"accepts": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -1890,8 +1895,7 @@
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
- "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
- "dev": true
+ "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
},
"base": {
"version": "0.11.2",
@@ -2054,7 +2058,6 @@
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
- "dev": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -2520,6 +2523,11 @@
"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
"dev": true
},
+ "codemirror": {
+ "version": "5.54.0",
+ "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.54.0.tgz",
+ "integrity": "sha512-Pgf3surv4zvw+KaW3doUU7pGjF0BPU8/sj7eglWJjzni46U/DDW8pu3nZY0QgQKUcICDXRkq8jZmq0y6KhxM3Q=="
+ },
"collection-visit": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -2554,8 +2562,7 @@
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
- "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
- "dev": true
+ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
},
"commondir": {
"version": "1.0.1",
@@ -2619,8 +2626,7 @@
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
- "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
- "dev": true
+ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
},
"concat-stream": {
"version": "1.6.2",
@@ -2745,6 +2751,15 @@
}
}
},
+ "config-chain": {
+ "version": "1.1.12",
+ "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
+ "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==",
+ "requires": {
+ "ini": "^1.3.4",
+ "proto-list": "~1.2.1"
+ }
+ },
"connect-history-api-fallback": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
@@ -3299,6 +3314,17 @@
"stream-shift": "^1.0.0"
}
},
+ "editorconfig": {
+ "version": "0.15.3",
+ "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
+ "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
+ "requires": {
+ "commander": "^2.19.0",
+ "lru-cache": "^4.1.5",
+ "semver": "^5.6.0",
+ "sigmund": "^1.0.1"
+ }
+ },
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -4025,8 +4051,7 @@
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
- "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
- "dev": true
+ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
},
"fsevents": {
"version": "2.1.3",
@@ -4538,7 +4563,6 @@
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
- "dev": true,
"requires": {
"once": "^1.3.0",
"wrappy": "1"
@@ -4547,14 +4571,12 @@
"inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
- "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
- "dev": true
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
},
"ini": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
- "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
- "dev": true
+ "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
},
"install": {
"version": "0.13.0",
@@ -4870,6 +4892,38 @@
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
"dev": true
},
+ "js-beautify": {
+ "version": "1.11.0",
+ "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.11.0.tgz",
+ "integrity": "sha512-a26B+Cx7USQGSWnz9YxgJNMmML/QG2nqIaL7VVYPCXbqiKz8PN0waSNvroMtvAK6tY7g/wPdNWGEP+JTNIBr6A==",
+ "requires": {
+ "config-chain": "^1.1.12",
+ "editorconfig": "^0.15.3",
+ "glob": "^7.1.3",
+ "mkdirp": "~1.0.3",
+ "nopt": "^4.0.3"
+ },
+ "dependencies": {
+ "glob": {
+ "version": "7.1.6",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+ "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+ "requires": {
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ }
+ },
+ "mkdirp": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+ }
+ }
+ },
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5642,7 +5696,6 @@
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
"integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
- "dev": true,
"requires": {
"pseudomap": "^1.0.2",
"yallist": "^2.1.2"
@@ -5862,7 +5915,6 @@
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
- "dev": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -6071,6 +6123,15 @@
"optimist": ">=0.3.4"
}
},
+ "nopt": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+ "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+ "requires": {
+ "abbrev": "1",
+ "osenv": "^0.1.4"
+ }
+ },
"normalize-package-data": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -9770,7 +9831,6 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
- "dev": true,
"requires": {
"wrappy": "1"
}
@@ -9835,6 +9895,11 @@
"integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
"dev": true
},
+ "os-homedir": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+ "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+ },
"os-locale": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
@@ -9846,6 +9911,20 @@
"mem": "^4.0.0"
}
},
+ "os-tmpdir": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+ "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+ },
+ "osenv": {
+ "version": "0.1.5",
+ "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+ "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+ "requires": {
+ "os-homedir": "^1.0.0",
+ "os-tmpdir": "^1.0.0"
+ }
+ },
"p-defer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -9983,8 +10062,7 @@
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
- "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
- "dev": true
+ "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
},
"path-is-inside": {
"version": "1.0.2",
@@ -10298,6 +10376,11 @@
"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
"dev": true
},
+ "proto-list": {
+ "version": "1.2.4",
+ "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+ "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk="
+ },
"proxy-addr": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -10317,8 +10400,7 @@
"pseudomap": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
- "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
- "dev": true
+ "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
},
"public-encrypt": {
"version": "4.0.3",
@@ -10860,8 +10942,7 @@
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
- "dev": true
+ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
},
"send": {
"version": "0.17.1",
@@ -11052,6 +11133,11 @@
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
"dev": true
},
+ "sigmund": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+ "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA="
+ },
"signal-exit": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -12881,8 +12967,7 @@
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
- "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
- "dev": true
+ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
},
"ws": {
"version": "6.2.1",
@@ -12908,8 +12993,7 @@
"yallist": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
- "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
- "dev": true
+ "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
},
"yargs": {
"version": "14.2.3",
diff --git a/package.json b/package.json
index d081da9..d81a152 100644
--- a/package.json
+++ b/package.json
@@ -50,9 +50,11 @@
"yargs": "^14.2.3"
},
"dependencies": {
+ "codemirror": "^5.54.0",
"element-ui": "^2.13.2",
"highlight.js": "^9.18.1",
"html-entities": "^1.3.1",
+ "js-beautify": "^1.11.0",
"jsonpack": "^1.1.5",
"lodash.debounce": "^4.0.8",
"lodash.throttle": "^4.1.1",
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index 5deb783..82f52d8 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -212,7 +212,7 @@ export default {
const code = newVal && newVal[0] && newVal[0].code;
if (code) {
const func = new Function(code + '\n return option');
- this.shared.previewOption = func();
+ this.shared.previewOption = Object.freeze(func());
}
}
}
diff --git a/src/components/DocContentItemCard.vue b/src/components/DocContentItemCard.vue
index 9bf711e..44af60c 100644
--- a/src/components/DocContentItemCard.vue
+++ b/src/components/DocContentItemCard.vue
@@ -39,7 +39,10 @@
>{{type}}</span>
</div>
- <OptionControl v-if="enableUIControl" :controlConfig="uiControl"></OptionControl>
+ <OptionControl v-if="enableUIControl"
+ :controlConfig="uiControl"
+ :optionPath="nodeData.path"
+ ></OptionControl>
<div class="item-description"
v-html="desc"
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index 7cd3943..8f5a636 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -3,7 +3,12 @@
<div id="example-panel">
<h2>{{$t('example.title')}}</h2>
<p class="intro">{{$t('example.intro')}}</p>
- <div class="preview-main"></div>
+ <div class="preview-and-code">
+ <div class="preview-main"></div>
+ <div class="example-code">
+ <div class="codemirror-main"></div>
+ </div>
+ </div>
</div>
</template>
@@ -13,8 +18,11 @@
// 代码不能编辑，可以跳转到 examples 带上 base64，在 examples 页面编辑
import {store, getPagePath} from '../store';
-
-let chartInstance;
+import CodeMirror from 'codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/paraiso-dark.css';
+import 'codemirror/mode/javascript/javascript.js'
+import beautify from 'js-beautify';
let echartsLoadPromise;
@@ -40,12 +48,15 @@ export default {
},
mounted() {
+ const self = this;
const examplePanel = this.$el;
const previewMain = examplePanel.querySelector('.preview-main');
// TODO use css?
function resize() {
examplePanel.style.width = examplePanel.parentNode.clientWidth * 0.45 + 'px';
- previewMain.style.height = previewMain.clientWidth * 3 / 4 + 'px';
+ if (self.chartInstance) {
+ self.chartInstance.resize();
+ }
}
window.addEventListener('resize', resize);
resize();
@@ -55,22 +66,52 @@ export default {
'shared.previewOption'(newVal) {
if (newVal) {
this.updateOption(newVal);
+ this.updateCode();
}
}
},
methods: {
updateOption(option) {
+ const viewport = this.$el.querySelector('.preview-main');
if (typeof echarts === 'undefined') {
fetchECharts().then(() => {
- chartInstance = echarts.init(this.$el.querySelector('.preview-main'));
- chartInstance.setOption(option);
+ if (!this.echartsInstance) {
+ this.chartInstance = echarts.init(viewport);
+ }
+ this.chartInstance.setOption(option);
})
}
else {
- chartInstance.setOption(option);
+ if (!this.echartsInstance) {
+ this.chartInstance = echarts.init(viewport);
+ }
+ this.chartInstance.setOption(option);
+ }
+ },
+
+ updateCode() {
+ if (!this.cmInstance) {
+ this.cmInstance = CodeMirror(this.$el.querySelector('.codemirror-main'), {
+ value: this.formattedOptionCodeStr,
+ mode: 'javascript',
+ theme: 'paraiso-dark'
+ });
+ }
+ else {
+ this.cmInstance.setValue(this.formattedOptionCodeStr);
}
}
+ },
+
+ computed: {
+ optionCodeStr() {
+ return `const option = ${JSON.stringify(this.shared.previewOption)}`;
+ },
+
+ formattedOptionCodeStr() {
+ return beautify.js(this.optionCodeStr);
+ }
}
}
</script>
@@ -100,11 +141,42 @@ export default {
p.intro {
color: #aaa;
padding-left: 20px;
+ margin: 5px 0;
+ font-size: 12px;
+ }
+
+ .preview-and-code {
+ position: absolute;
+ top: 90px;
+ bottom: 0;
+ left: 0;
+ right: 0;
}
.preview-main {
width: 100%;
background: #fefefe;
+ height: 50%;
+ }
+
+ .example-code {
+ width: 100%;
+ height: 50%;
+ position: relative;
+
+ // h4 {
+ // margin: 0 10px;
+ // padding: 0;
+ // }
+
+ .codemirror-main {
+ height: 100%;
+
+ .CodeMirror {
+ height: 100%;
+ overflow-y: scroll;
+ }
+ }
}
}
diff --git a/src/components/OptionControl.vue b/src/components/OptionControl.vue
index 72a78ce..5451d90 100644
--- a/src/components/OptionControl.vue
+++ b/src/components/OptionControl.vue
@@ -1,6 +1,10 @@
<template>
<div class="option-control">
- <component :is="uiComponent" v-bind="uiAttrs"></component>
+ <component
+ :is="uiComponent"
+ v-bind="uiAttrs"
+ value="default">
+ </component>
</div>
</template>
@@ -9,6 +13,7 @@ import ControlColor from '../controls/ControlColor.vue';
import ControlBoolean from '../controls/ControlBoolean.vue';
import ControlNumber from '../controls/ControlNumber.vue';
import ControlVector from '../controls/ControlVector.vue';
+import {store} from '../store';
const uiComponentMap = {
boolean: ControlBoolean,
@@ -17,10 +22,23 @@ const uiComponentMap = {
vector: ControlVector
};
-function omitType(obj) {
+const uiComponentDefault = {
+ boolean: () => false,
+ color: () => null,
+ number: () => 0,
+ vector: (conntrolConfig) => {
+ if (!conntrolConfig.dims) {
+ throw new Error('Must specify dims in vector');
+ }
+ return conntrolConfig.dims.split(',')
+ .map(dim => 0)
+ }
+}
+
+function omitTypeAndDefault(obj) {
const newObj = {};
for (let key in obj) {
- if (obj.hasOwnProperty(key) && key !== 'type') {
+ if (obj.hasOwnProperty(key) && key !== 'type' && key !== 'default') {
newObj[key] = obj[key];
}
}
@@ -34,6 +52,7 @@ export default {
data() {
return {
+ shared: store
};
},
@@ -43,7 +62,14 @@ export default {
},
uiAttrs() {
- return omitType(this.controlConfig);
+ return omitTypeAndDefault(this.controlConfig);
+ },
+
+ default() {
+ const controlConfig = this.controlConfig;
+ return controlConfig.default != null
+ ? controlConfig.default
+ : (uiComponentDefault[controlConfig.type] && uiComponentDefault[controlConfig.type](controlConfig));
}
}
}
diff --git a/src/controls/ControlBoolean.vue b/src/controls/ControlBoolean.vue
index 42240c0..f34741c 100644
--- a/src/controls/ControlBoolean.vue
+++ b/src/controls/ControlBoolean.vue
@@ -6,9 +6,9 @@
<script>
export default {
+ props: ['value'],
data() {
return {
- value: null
}
}
}
diff --git a/src/controls/ControlColor.vue b/src/controls/ControlColor.vue
index 35f2d1a..994cf16 100644
--- a/src/controls/ControlColor.vue
+++ b/src/controls/ControlColor.vue
@@ -10,11 +10,10 @@
<script>
export default {
- props: ['default'],
+ props: ['value'],
data() {
return {
- value: this.default
}
}
}
diff --git a/src/controls/ControlNumber.vue b/src/controls/ControlNumber.vue
index bf0aadc..665f8d4 100644
--- a/src/controls/ControlNumber.vue
+++ b/src/controls/ControlNumber.vue
@@ -6,7 +6,7 @@
:min="+min"
:max="max == null ? Infinity : +max"
:step="step == null ? 1 : +step"
- size="small"
+ size="mini"
></el-input-number>
</div>
</template>
@@ -14,12 +14,10 @@
<script>
export default {
- props: ['min', 'max', "step"],
+ props: ['value', 'min', 'max', 'step'],
data() {
- return {
- value: 0
- }
+ return {}
}
}
</script>
diff --git a/src/controls/ControlVector.vue b/src/controls/ControlVector.vue
index 09d5e66..5ef5dbe 100644
--- a/src/controls/ControlVector.vue
+++ b/src/controls/ControlVector.vue
@@ -2,7 +2,7 @@
<div class="control-vector">
<div v-for="(dim, index) in dimsArr"
:key="index">
- {{dim}}:
+ <label>{{dim}}:</label>
<el-input-number
v-model="value[index]"
controls-position="right"
@@ -18,19 +18,10 @@
<script>
export default {
- props: ['min', 'max', "step", 'default', 'dims'],
+ props: ['value', 'min', 'max', "step", 'dims'],
data() {
- if (!this.dims) {
- throw new Error('Must specify dims in vector');
- }
- const arr = this.default
- ? this.default.split(',').map(num => +num.trim())
- : this.dims.split(',').map(dim => 0);
-
- return {
- value: arr,
- };
+ return {};
},
computed: {
@@ -46,7 +37,8 @@ export default {
&>div {
display: inline-block;
margin-left: 8px;
- font-size: 14px;
+ font-size: 12px;
+ font-weight: bold;
}
.el-input-number {
width: 90px;
diff --git a/src/directive/highlight.js b/src/directive/highlight.js
index 2257359..ee57efd 100644
--- a/src/directive/highlight.js
+++ b/src/directive/highlight.js
@@ -4,10 +4,9 @@ import xml from 'highlight.js/lib/languages/xml';
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('xml', xml);
import 'highlight.js/styles/github-gist.css';
+// import 'highlight.js/styles/monokai.css';
import Vue from 'vue';
-hljs.configure()
-
function doHighlight(el) {
el.querySelectorAll('pre code').forEach((block) => {
if (!block.classList.contains('hljs')) {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org