This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
commit c9bd8b9a2a1ef7843d60c3385ad5b5a6ac377883
Author: plainheart <y...@all-my-life.cn>
AuthorDate: Mon Feb 5 23:11:43 2024 +0800
feat(editor): support setting theme for charts via the URL parameter:
`theme=themeName`
---
src/common/store.js | 2 ++
src/editor/Editor.vue | 2 +-
src/editor/Preview.vue | 12 +++++++++++-
src/editor/downloadExample.js | 12 ++++++++++--
src/editor/sandbox/openwith/helper.js | 4 +++-
src/editor/sandbox/setup.js | 2 +-
6 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/src/common/store.js b/src/common/store.js
index 59f2e3bb..268cef9b 100644
--- a/src/common/store.js
+++ b/src/common/store.js
@@ -27,6 +27,8 @@ export const store = {
version: '',
locale: '',
+ // 'light' and 'dark' are default built-in themes
+ theme: URL_PARAMS.theme === 'light' ? null : URL_PARAMS.theme,
darkMode: URL_PARAMS.theme === 'dark',
enableDecal: 'decal' in URL_PARAMS,
renderer: (() => {
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index 2f6e775e..ba101851 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -562,7 +562,7 @@ export default {
ts: store.typeCheck,
esm: this.fullCodeConfig.esm,
// legacy: true,
- theme: store.darkMode ? 'dark' : '',
+ theme: store.darkMode ? 'dark' : store.theme,
renderer: store.renderer,
useDirtyRect: store.useDirtyRect,
ROOT_PATH: store.cdnRoot,
diff --git a/src/editor/Preview.vue b/src/editor/Preview.vue
index 9f59eca8..05e078e3 100644
--- a/src/editor/Preview.vue
+++ b/src/editor/Preview.vue
@@ -191,9 +191,11 @@ function getScripts(nightly) {
const code = store.runCode;
return [
+ // echarts
echartsDir +
getScriptURL(SCRIPT_URLS.echartsJS) +
(store.isPR ? '?_=' + (store.prLatestCommit || Date.now()) : ''),
+ // echarts-gl
...(isGL
? [
isLocal
@@ -201,18 +203,26 @@ function getScripts(nightly) {
: getScriptURL(SCRIPT_URLS.echartsGLJS)
]
: []),
+ // echarts theme
+ ...(!store.darkMode && store.theme
+ ? [echartsDir + `/theme/${store.theme}.js`]
+ : []),
+ // echarts bmap extension
...(hasBMap || /coordinateSystem.*:.*['"]bmap['"]/g.test(code)
? [
SCRIPT_URLS.bmapLibJS,
echartsDir + getScriptURL(SCRIPT_URLS.echartsBMapJS)
]
: []),
+ // echarts stat
...(code.indexOf('ecStat.') > -1
? [getScriptURL(SCRIPT_URLS.echartsStatJS)]
: []),
+ // echarts map
...(/map.*:.*['"]world['"]/g.test(code)
? [SCRIPT_URLS.echartsWorldMapJS]
: []),
+ // data gui
...(code.indexOf('app.config') > -1 ? [SCRIPT_URLS.datGUIMinJS] : [])
].map((url) => ({ src: url }));
}
@@ -385,7 +395,7 @@ export default {
renderer: isCanvas ? null : store.renderer,
useDirtyRect: store.useDirtyRect && isCanvas ? 1 : null,
decal: store.enableDecal ? 1 : null,
- theme: store.darkMode ? 'dark' : null
+ theme: store.darkMode ? 'dark' : store.theme || null
};
}
},
diff --git a/src/editor/downloadExample.js b/src/editor/downloadExample.js
index 8dd4d37b..37880360 100644
--- a/src/editor/downloadExample.js
+++ b/src/editor/downloadExample.js
@@ -13,13 +13,18 @@ export function download(sourceHeader) {
const jqueryScriptCode = hasJQueryJS
? `<script type="text/javascript" src="${SCRIPT_URLS.jQueryJS}"></script>`
: '';
-
const echartsDir = SCRIPT_URLS[
store.echartsVersion.indexOf('dev') > -1
? 'echartsNightlyDir'
: 'echartsDir'
].replace('{{version}}', store.echartsVersion);
const echarts4Dir = SCRIPT_URLS.echartsDir.replace('{{version}}', '4.9.0');
+
+ const themeScriptCode =
+ !store.darkMode && store.theme
+ ? `<!-- theme -->\n <script type="text/javascript"
src="${echartsDir}/theme/${store.theme}.js"></script>`
+ : '';
+
const code = `<!--
${sourceHeader}
-->
@@ -35,6 +40,7 @@ ${sourceHeader}
<script type="text/javascript" src="${echartsDir}${
SCRIPT_URLS.echartsJS
}"></script>
+ ${themeScriptCode}
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript"
src="${echartsDir}/dist/extension/dataTool.min.js"></script>
-->
@@ -57,7 +63,9 @@ ${sourceHeader}
<script type="text/javascript">
var dom = document.getElementById('container');
- var myChart = echarts.init(dom, ${store.darkMode ? "'dark'" : 'null'}, {
+ var myChart = echarts.init(dom, ${
+ store.darkMode ? "'dark'" : store.theme ? `'${store.theme}'` : 'null'
+ }, {
renderer: '${store.renderer}',
useDirtyRect: ${store.useDirtyRect}
});
diff --git a/src/editor/sandbox/openwith/helper.js
b/src/editor/sandbox/openwith/helper.js
index 58a0b396..16235b25 100644
--- a/src/editor/sandbox/openwith/helper.js
+++ b/src/editor/sandbox/openwith/helper.js
@@ -46,7 +46,9 @@ export function getTemplates(title, scripts, css) {
</html>`;
const jsTpl = `var dom = document.getElementById('chart-container');
-var myChart = echarts.init(dom, ${store.darkMode ? "'dark'" : 'null'}, {
+var myChart = echarts.init(dom, ${
+ store.darkMode ? "'dark'" : store.theme ? `'${store.theme}'` : 'null'
+ }, {
renderer: '${store.renderer}',
useDirtyRect: ${store.useDirtyRect}
});
diff --git a/src/editor/sandbox/setup.js b/src/editor/sandbox/setup.js
index d50d4f95..95f368cc 100644
--- a/src/editor/sandbox/setup.js
+++ b/src/editor/sandbox/setup.js
@@ -220,7 +220,7 @@ function setup(isShared) {
this.dispose();
chartInstance = echarts.init(
document.getElementById('chart-container'),
- store.darkMode ? 'dark' : '',
+ store.darkMode ? 'dark' : store.theme,
{
renderer: store.renderer,
useDirtyRect: store.useDirtyRect
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
