feat(editor): support setting theme for charts via the URL parameter:…

… `theme=themeName`

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: (() => {

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,

src/editor/Preview.vue

@@ -191,28 +191,38 @@ function getScripts(nightly) {
   const code = store.runCode;
 
   return [
+    // echarts
     echartsDir +
       getScriptURL(SCRIPT_URLS.echartsJS) +
       (store.isPR ? '?_=' + (store.prLatestCommit || Date.now()) : ''),
+    // echarts-gl
     ...(isGL
       ? [
           isLocal
             ? SCRIPT_URLS.localEChartsGLDir + '/dist/echarts-gl.js'
             : 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
       };
     }
   },

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}
     });

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}
 });

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