You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2021/02/28 11:38:51 UTC
[echarts] branch installable-theme-extension-i18n created (now
2700d5f)
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a change to branch installable-theme-extension-i18n
in repository https://gitbox.apache.org/repos/asf/echarts.git.
at 2700d5f refactor(theme): make themes installable, provide self-registered lib, pure object lib and installable lib. - Related apache/echarts#14351, apache/echarts#14352.
This branch includes the following new commits:
new 2700d5f refactor(theme): make themes installable, provide self-registered lib, pure object lib and installable lib. - Related apache/echarts#14351, apache/echarts#14352.
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 01/01: refactor(theme): make themes installable,
provide self-registered lib,
pure object lib and installable lib. - Related apache/echarts#14351,
apache/echarts#14352.
Posted by wa...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch installable-theme-extension-i18n
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 2700d5f043ec26bb73414d9e10ff4d817c037933
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Sun Feb 28 19:33:32 2021 +0800
refactor(theme): make themes installable, provide self-registered lib, pure object lib and installable lib.
- Related apache/echarts#14351, apache/echarts#14352.
---
build/build-theme.js | 67 ++++++
build/umd-wrapper.js | 26 +++
package.json | 5 +-
src/core/echarts.ts | 4 +-
src/extension.ts | 2 +
src/theme/{light.ts => azul.ts} | 18 +-
src/theme/{light.ts => azul/install.ts} | 20 +-
src/theme/azul/theme.ts | 135 +++++++++++++
src/theme/{light.ts => bee-inspired.ts} | 18 +-
src/theme/{light.ts => bee-inspired/install.ts} | 20 +-
src/theme/bee-inspired/theme.ts | 150 ++++++++++++++
src/theme/{light.ts => blue.ts} | 18 +-
src/theme/{light.ts => blue/install.ts} | 20 +-
src/theme/blue/theme.ts | 150 ++++++++++++++
src/theme/{light.ts => caravan.ts} | 18 +-
src/theme/{light.ts => caravan/install.ts} | 20 +-
src/theme/caravan/theme.ts | 150 ++++++++++++++
src/theme/{light.ts => carp.ts} | 18 +-
src/theme/{light.ts => carp/install.ts} | 20 +-
src/theme/carp/theme.ts | 135 +++++++++++++
src/theme/{light.ts => cool.ts} | 18 +-
src/theme/{light.ts => cool/install.ts} | 20 +-
src/theme/cool/theme.ts | 152 ++++++++++++++
src/theme/{light.ts => dark-blue.ts} | 18 +-
src/theme/{light.ts => dark-blue/install.ts} | 20 +-
src/theme/dark-blue/theme.ts | 141 +++++++++++++
src/theme/{light.ts => dark-bold.ts} | 18 +-
src/theme/{light.ts => dark-bold/install.ts} | 20 +-
src/theme/dark-bold/theme.ts | 141 +++++++++++++
src/theme/{light.ts => dark-digerati.ts} | 18 +-
src/theme/{light.ts => dark-digerati/install.ts} | 20 +-
src/theme/dark-digerati/theme.ts | 141 +++++++++++++
src/theme/{light.ts => dark-fresh-cut.ts} | 18 +-
src/theme/{light.ts => dark-fresh-cut/install.ts} | 20 +-
src/theme/dark-fresh-cut/theme.ts | 141 +++++++++++++
src/theme/{light.ts => dark-mushroom.ts} | 18 +-
src/theme/{light.ts => dark-mushroom/install.ts} | 20 +-
src/theme/dark-mushroom/theme.ts | 140 +++++++++++++
src/theme/{light.ts => dark/install.ts} | 20 +-
src/theme/{dark.ts => dark/theme.ts} | 2 +
src/theme/{light.ts => eduardo.ts} | 18 +-
src/theme/{light.ts => eduardo/install.ts} | 20 +-
src/theme/eduardo/theme.ts | 150 ++++++++++++++
src/theme/{light.ts => forest.ts} | 18 +-
src/theme/{light.ts => forest/install.ts} | 20 +-
src/theme/forest/theme.ts | 135 +++++++++++++
src/theme/{light.ts => fresh-cut.ts} | 18 +-
src/theme/{light.ts => fresh-cut/install.ts} | 20 +-
src/theme/fresh-cut/theme.ts | 135 +++++++++++++
src/theme/{light.ts => fruit.ts} | 18 +-
src/theme/{light.ts => fruit/install.ts} | 20 +-
src/theme/fruit/theme.ts | 150 ++++++++++++++
src/theme/{light.ts => gray.ts} | 18 +-
src/theme/{light.ts => gray/install.ts} | 20 +-
src/theme/gray/theme.ts | 192 ++++++++++++++++++
src/theme/{light.ts => green.ts} | 18 +-
src/theme/{light.ts => green/install.ts} | 20 +-
src/theme/green/theme.ts | 194 ++++++++++++++++++
src/theme/{light.ts => helianthus.ts} | 18 +-
src/theme/{light.ts => helianthus/install.ts} | 20 +-
src/theme/helianthus/theme.ts | 235 ++++++++++++++++++++++
src/theme/helper.ts | 13 ++
src/theme/{light.ts => infographic.ts} | 18 +-
src/theme/{light.ts => infographic/install.ts} | 20 +-
src/theme/infographic/theme.ts | 208 +++++++++++++++++++
src/theme/{light.ts => inspired.ts} | 18 +-
src/theme/{light.ts => inspired/install.ts} | 20 +-
src/theme/inspired/theme.ts | 135 +++++++++++++
src/theme/{light.ts => jazz.ts} | 18 +-
src/theme/{light.ts => jazz/install.ts} | 20 +-
src/theme/jazz/theme.ts | 135 +++++++++++++
src/theme/{light.ts => light/install.ts} | 20 +-
src/theme/{light.ts => light/theme.ts} | 4 +-
src/theme/{light.ts => london.ts} | 18 +-
src/theme/{light.ts => london/install.ts} | 20 +-
src/theme/london/theme.ts | 135 +++++++++++++
src/theme/{light.ts => macarons.ts} | 18 +-
src/theme/{light.ts => macarons/install.ts} | 20 +-
src/theme/macarons/theme.ts | 213 ++++++++++++++++++++
src/theme/{light.ts => macarons2.ts} | 18 +-
src/theme/{light.ts => macarons2/install.ts} | 20 +-
src/theme/macarons2/theme.ts | 221 ++++++++++++++++++++
src/theme/{light.ts => mint.ts} | 18 +-
src/theme/{light.ts => mint/install.ts} | 20 +-
src/theme/mint/theme.ts | 127 ++++++++++++
src/theme/{light.ts => red-velvet.ts} | 18 +-
src/theme/{light.ts => red-velvet/install.ts} | 20 +-
src/theme/red-velvet/theme.ts | 135 +++++++++++++
src/theme/{light.ts => red.ts} | 18 +-
src/theme/{light.ts => red/install.ts} | 20 +-
src/theme/red/theme.ts | 197 ++++++++++++++++++
src/theme/{light.ts => roma.ts} | 18 +-
src/theme/{light.ts => roma/install.ts} | 20 +-
src/theme/roma/theme.ts | 91 +++++++++
src/theme/{light.ts => royal.ts} | 18 +-
src/theme/{light.ts => royal/install.ts} | 20 +-
src/theme/royal/theme.ts | 135 +++++++++++++
src/theme/{light.ts => sakura.ts} | 18 +-
src/theme/{light.ts => sakura/install.ts} | 20 +-
src/theme/sakura/theme.ts | 112 +++++++++++
src/theme/{light.ts => shine.ts} | 18 +-
src/theme/{light.ts => shine/install.ts} | 20 +-
src/theme/shine/theme.ts | 151 ++++++++++++++
src/theme/{light.ts => tech-blue.ts} | 18 +-
src/theme/{light.ts => tech-blue/install.ts} | 20 +-
src/theme/tech-blue/theme.ts | 152 ++++++++++++++
src/theme/{light.ts => vintage.ts} | 18 +-
src/theme/{light.ts => vintage/install.ts} | 20 +-
src/theme/vintage/theme.ts | 39 ++++
109 files changed, 5345 insertions(+), 1025 deletions(-)
diff --git a/build/build-theme.js b/build/build-theme.js
new file mode 100644
index 0000000..370405a
--- /dev/null
+++ b/build/build-theme.js
@@ -0,0 +1,67 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+const fs = require('fs');
+const path = require('path');
+const fsExtra = require('fs-extra');
+const {
+ umdWrapperHead,
+ umdWrapperHeadWithECharts,
+ umdWrapperTail
+} = require('./umd-wrapper');
+
+async function buildThemeWrap() {
+ const targetDir = path.join(__dirname, '../theme');
+ const sourceDir = path.join(__dirname, '../src/theme');
+ const files = fs.readdirSync(sourceDir);
+ files.forEach(t => {
+ // only read dir
+ if(t.indexOf('.') !== -1) {
+ return;
+ }
+ const echartsRegister = `
+ echarts.registerTheme('${t}', themeObj);
+ `;
+ const pureExports = `
+ for (var key in themeObj) {
+ if (themeObj.hasOwnProperty(key)) {
+ exports[key] = themeObj[key];
+ }
+ }
+ `;
+ const code = fs.readFileSync(path.join(sourceDir, t + '/theme.ts'), 'utf-8');
+ const outputCode = code.replace(/export\s+?default/, 'var themeObj =')
+ .replace(/\/\*([\w\W]*?)\*\//, '')
+ // PENDING
+ .replace(/const /g, 'var ')
+ .replace(/ ?as any/g, '');
+
+ fsExtra.ensureDirSync(targetDir);
+
+ fs.writeFileSync(path.join(targetDir, t + '.js'), umdWrapperHeadWithECharts + outputCode + echartsRegister + umdWrapperTail, 'utf-8');
+ fs.writeFileSync(path.join(targetDir, t + '-obj.js'), umdWrapperHead + outputCode + pureExports + umdWrapperTail, 'utf-8');
+ })
+ console.log('theme build completed');
+}
+
+buildThemeWrap();
+
+module.exports = {
+ buildTheme: buildThemeWrap
+};
diff --git a/build/umd-wrapper.js b/build/umd-wrapper.js
new file mode 100644
index 0000000..dd34282
--- /dev/null
+++ b/build/umd-wrapper.js
@@ -0,0 +1,26 @@
+const preamble = require('./preamble');
+
+exports.umdWrapperHead = `${preamble.js}
+/**
+* AUTO-GENERATED FILE. DO NOT MODIFY.
+*/
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+ typeof define === 'function' && define.amd ? define(['exports'], factory) :
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory({}));
+ }(this, (function (exports) {
+`;
+
+exports.umdWrapperHeadWithECharts = `${preamble.js}
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('echarts/lib/echarts')) :
+ typeof define === 'function' && define.amd ? define(['exports', 'echarts'], factory) :
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory({}, global.echarts));
+ }(this, (function (exports, echarts) {
+`;
+
+exports.umdWrapperTail = `
+})));`;
diff --git a/package.json b/package.json
index 6d1b0e1..42ad540 100644
--- a/package.json
+++ b/package.json
@@ -43,12 +43,13 @@
"build": "node build/build.js --type all,common,simple --min",
"build:esm": "node build/build.js --type all --min --format esm",
"build:i18n": "node build/build-i18n.js",
+ "build:theme": "node build/build-theme.js",
"build:lib": "node build/build.js --prepublish",
"build:extension": "node build/build.js --type extension",
- "dev:fast": "node build/build-i18n.js && node build/dev-fast.js",
+ "dev:fast": "npm run build:i18n && npm run build:theme && node build/dev-fast.js",
"dev": "npm run dev:fast",
"prepublish": "npm run build:lib",
- "release": "npm run build:lib && npm run build:i18n && npm run build && npm run build:esm && npm run build:extension",
+ "release": "npm run build:lib && npm run build:i18n && npm run build:theme && npm run build && npm run build:esm && npm run build:extension",
"help": "node build/build.js --help",
"test:visual": "node test/runTest/server.js",
"test:visual:report": "node test/runTest/genReport.js",
diff --git a/src/core/echarts.ts b/src/core/echarts.ts
index b272247..8ba8106 100644
--- a/src/core/echarts.ts
+++ b/src/core/echarts.ts
@@ -66,8 +66,8 @@ import {throttle} from '../util/throttle';
import {seriesStyleTask, dataStyleTask, dataColorPaletteTask} from '../visual/style';
import loadingDefault from '../loading/default';
import Scheduler from './Scheduler';
-import lightTheme from '../theme/light';
-import darkTheme from '../theme/dark';
+import lightTheme from '../theme/light/theme';
+import darkTheme from '../theme/dark/theme';
import mapDataStorage from '../coord/geo/mapDataStorage';
import {CoordinateSystemMaster, CoordinateSystemCreator, CoordinateSystemHostModel} from '../coord/CoordinateSystem';
import { parseClassType } from '../util/clazz';
diff --git a/src/extension.ts b/src/extension.ts
index 2f223aa..d5c6780 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -29,6 +29,7 @@ import {
registerTransform,
registerLoading,
registerMap,
+ registerTheme,
PRIORITY
} from './core/echarts';
import ComponentView from './view/Component';
@@ -54,6 +55,7 @@ const extensionRegisters = {
registerTransform,
registerLoading,
registerMap,
+ registerTheme,
PRIORITY,
ComponentModel,
diff --git a/src/theme/light.ts b/src/theme/azul.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/azul.ts
index 8b28ea8..4ccd629 100644
--- a/src/theme/light.ts
+++ b/src/theme/azul.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './azul/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/azul/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/azul/install.ts
index 8b28ea8..4ef26e4 100644
--- a/src/theme/light.ts
+++ b/src/theme/azul/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import azulTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('azul', azulTheme);
+}
diff --git a/src/theme/azul/theme.ts b/src/theme/azul/theme.ts
new file mode 100644
index 0000000..077641a
--- /dev/null
+++ b/src/theme/azul/theme.ts
@@ -0,0 +1,135 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#f2385a',
+ '#f5a503',
+ '#4ad9d9',
+ '#f7879c',
+ '#c1d7a8',
+ '#4dffd2',
+ '#fccfd7',
+ '#d5f6f6'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#f2385a'
+ }
+ },
+
+ visualMap: {
+ color: ['#f2385a', '#f5a503']
+ },
+
+ toolbox: {
+ color: ['#f2385a', '#f2385a', '#f2385a', '#f2385a']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#f2385a',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#f2385a'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#f2385a' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#f2385a'
+ },
+ controlStyle: {
+ color: '#f2385a',
+ borderColor: '#f2385a'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#f2385a',
+ color0: '#f5a503'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#f2385a',
+ color0: '#f5a503'
+ },
+ areaStyle: {
+ color: '#c1d7a8',
+ color0: '#4ad9d9'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#f2385a'
+ },
+ areaStyle: {
+ color: '#ddd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#f2385a'
+ },
+ linkStyle: {
+ color: '#f2385a'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#f5a503'],
+ [0.8, '#f2385a'],
+ [1, '#c1d7a8']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/bee-inspired.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/bee-inspired.ts
index 8b28ea8..e545ee9 100644
--- a/src/theme/light.ts
+++ b/src/theme/bee-inspired.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './bee-inspired/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/bee-inspired/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/bee-inspired/install.ts
index 8b28ea8..f5d72b7 100644
--- a/src/theme/light.ts
+++ b/src/theme/bee-inspired/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import beeInspiredTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('bee-inspired', beeInspiredTheme);
+}
diff --git a/src/theme/bee-inspired/theme.ts b/src/theme/bee-inspired/theme.ts
new file mode 100644
index 0000000..4bcae21
--- /dev/null
+++ b/src/theme/bee-inspired/theme.ts
@@ -0,0 +1,150 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#001727',
+ '#805500',
+ '#ffff00',
+ '#ffd11a',
+ '#f2d71f',
+ '#f2be19',
+ '#f3a81a',
+ '#fff5cc'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#001727'
+ }
+ },
+
+ visualMap: {
+ color: ['#001727', '#805500']
+ },
+
+ toolbox: {
+ color: ['#001727', '#001727', '#001727', '#001727']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#001727',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#001727'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#001727' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#001727'
+ },
+ controlStyle: {
+ color: '#001727',
+ borderColor: '#001727'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#f3a81a',
+ color0: '#ffff00'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#ffff00',
+ color0: '#f3a81a'
+ },
+ areaStyle: {
+ color: '#805500',
+ color0: '#ffff00'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#f3a81a',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#805500'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ffd11a'
+ },
+ areaStyle: {
+ color: '#f2be19'
+ },
+ label: {
+ color: '#ffd11a'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#001727'
+ },
+ linkStyle: {
+ color: '#001727'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#f2d71f'],
+ [0.8, '#001727'],
+ [1, '#ffff00']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/blue.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/blue.ts
index 8b28ea8..83ec2c0 100644
--- a/src/theme/light.ts
+++ b/src/theme/blue.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './blue/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/blue/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/blue/install.ts
index 8b28ea8..cb74098 100644
--- a/src/theme/light.ts
+++ b/src/theme/blue/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import blueTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('blue', blueTheme);
+}
diff --git a/src/theme/blue/theme.ts b/src/theme/blue/theme.ts
new file mode 100644
index 0000000..c9465c0
--- /dev/null
+++ b/src/theme/blue/theme.ts
@@ -0,0 +1,150 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#1790cf',
+ '#1bb2d8',
+ '#99d2dd',
+ '#88b0bb',
+ '#1c7099',
+ '#038cc4',
+ '#75abd0',
+ '#afd6dd'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#1790cf'
+ }
+ },
+
+ visualMap: {
+ color: ['#1790cf', '#a2d4e6']
+ },
+
+ toolbox: {
+ color: ['#1790cf', '#1790cf', '#1790cf', '#1790cf']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#1790cf',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#1790cf'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+ handleColor: '#1790cf' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#1790cfa'
+ },
+ controlStyle: {
+ color: '#1790cf',
+ borderColor: '#1790cf'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#1bb2d8',
+ color0: '#99d2dd'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#1c7099',
+ color0: '#88b0bb'
+ },
+ areaStyle: {
+ color: '#1790cf',
+ color0: '#1bb2d8'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#1bb2d8',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#1790cf'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#1bb2d8'
+ },
+ linkStyle: {
+ color: '#88b0bb'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd'
+ },
+ areaStyle: {
+ color: '99d2dd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#1bb2d8'],
+ [0.8, '#1790cf'],
+ [1, '#1c7099']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/caravan.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/caravan.ts
index 8b28ea8..401d279 100644
--- a/src/theme/light.ts
+++ b/src/theme/caravan.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './caravan/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/caravan/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/caravan/install.ts
index 8b28ea8..6834cc8 100644
--- a/src/theme/light.ts
+++ b/src/theme/caravan/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import caravanTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('caravan', caravanTheme);
+}
diff --git a/src/theme/caravan/theme.ts b/src/theme/caravan/theme.ts
new file mode 100644
index 0000000..a996ece
--- /dev/null
+++ b/src/theme/caravan/theme.ts
@@ -0,0 +1,150 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#fad089',
+ '#ff9c5b',
+ '#f5634a',
+ '#ed303c',
+ '#3b8183',
+ '#f7826e',
+ '#faac9e',
+ '#fcd5cf'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#fad089'
+ }
+ },
+
+ visualMap: {
+ color: ['#fad089', '#a2d4e6']
+ },
+
+ toolbox: {
+ color: ['#fad089', '#fad089', '#fad089', '#fad089']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#fad089',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#fad089'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+ handleColor: '#fad089' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#fad089'
+ },
+ controlStyle: {
+ color: '#fad089',
+ borderColor: '#fad089'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#ff9c5b',
+ color0: '#f5634a'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#3b8183',
+ color0: '#ed303c'
+ },
+ areaStyle: {
+ color: '#fad089',
+ color0: '#ed303c'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#fad089',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#ed303c'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd'
+ },
+ areaStyle: {
+ color: '#f5634a'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#f5634a'
+ },
+ linkStyle: {
+ color: '#fad089'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#ff9c5b'],
+ [0.8, '#fad089'],
+ [1, '#3b8183']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/carp.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/carp.ts
index 8b28ea8..e0161e0 100644
--- a/src/theme/light.ts
+++ b/src/theme/carp.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './carp/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/carp/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/carp/install.ts
index 8b28ea8..bdce2a3 100644
--- a/src/theme/light.ts
+++ b/src/theme/carp/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import carpTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('carp', carpTheme);
+}
diff --git a/src/theme/carp/theme.ts b/src/theme/carp/theme.ts
new file mode 100644
index 0000000..21d6aa0
--- /dev/null
+++ b/src/theme/carp/theme.ts
@@ -0,0 +1,135 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#f0d8A8',
+ '#3d1c00',
+ '#86b8b1',
+ '#f2d694',
+ '#fa2a00',
+ '#ff8066',
+ '#ffd5cc',
+ '#f9edd2'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#f0d8A8'
+ }
+ },
+
+ visualMap: {
+ color: ['#f0d8A8', '#3d1c00']
+ },
+
+ toolbox: {
+ color: ['#f0d8A8', '#f0d8A8', '#f0d8A8', '#f0d8A8']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#f0d8A8',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#f0d8A8'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#f0d8A8' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#f0dba8'
+ },
+ controlStyle: {
+ color: '#f0dba8',
+ borderColor: '#f0dba8'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#3d1c00',
+ color0: '#86b8b1'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#fa2a00',
+ color0: '#f2d694'
+ },
+ areaStyle: {
+ color: '#f0d8A8',
+ color0: '#86b8b1'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd'
+ },
+ areaStyle: {
+ color: '#86b8b1'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#3d1c00'
+ },
+ linkStyle: {
+ color: '#f0d8A8'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#3d1c00'],
+ [0.8, '#f0d8A8'],
+ [1, '#fa2a00']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/cool.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/cool.ts
index 8b28ea8..1da24b3 100644
--- a/src/theme/light.ts
+++ b/src/theme/cool.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './cool/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/cool/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/cool/install.ts
index 8b28ea8..4bc04f3 100644
--- a/src/theme/light.ts
+++ b/src/theme/cool/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import coolTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('cool', coolTheme);
+}
diff --git a/src/theme/cool/theme.ts b/src/theme/cool/theme.ts
new file mode 100644
index 0000000..cf755ab
--- /dev/null
+++ b/src/theme/cool/theme.ts
@@ -0,0 +1,152 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#b21ab4',
+ '#6f0099',
+ '#2a2073',
+ '#0b5ea8',
+ '#17aecc',
+ '#b3b3ff',
+ '#eb99ff',
+ '#fae6ff',
+ '#e6f2ff',
+ '#eeeeee'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#00aecd'
+ }
+ },
+
+ visualMap: {
+ color: ['#00aecd', '#a2d4e6']
+ },
+
+ toolbox: {
+ color: ['#00aecd', '#00aecd', '#00aecd', '#00aecd']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#00aecd',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#00aecd'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+ handleColor: '#00aecd' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#00aecd'
+ },
+ controlStyle: {
+ color: '#00aecd',
+ borderColor: '00aecd'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#00aecd',
+ color0: '#a2d4e6'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#00aecd',
+ color0: '#a2d4e6'
+ },
+ areaStyle: {
+ color: '#b21ab4',
+ color0: '#0b5ea8'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#b21ab4',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#0b5ea8'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#b21ab4'
+ },
+ linkStyle: {
+ color: '#2a2073'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#c12e34'
+ },
+ areaStyle: {
+ color: '#ddd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#dddddd'],
+ [0.8, '#00aecd'],
+ [1, '#f5ccff']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/dark-blue.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-blue.ts
index 8b28ea8..3985b86 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-blue.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './dark-blue/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/dark-blue/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-blue/install.ts
index 8b28ea8..85a9f39 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-blue/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkBlueTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('dark-blue', darkBlueTheme);
+}
diff --git a/src/theme/dark-blue/theme.ts b/src/theme/dark-blue/theme.ts
new file mode 100644
index 0000000..28be1f7
--- /dev/null
+++ b/src/theme/dark-blue/theme.ts
@@ -0,0 +1,141 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+ return {
+ axisLine: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisLabel: {
+ color: contrastColor
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#aaa'
+ }
+ },
+ splitArea: {
+ areaStyle: {
+ color: contrastColor
+ }
+ }
+ };
+};
+
+const colorPalette = [
+ '#00305a',
+ '#004b8d',
+ '#0074d9',
+ '#4192d9',
+ '#7abaf2',
+ '#99cce6',
+ '#d6ebf5',
+ '#eeeeee'
+];
+
+const theme = {
+ color: colorPalette,
+ backgroundColor: '#333',
+ tooltip: {
+ axisPointer: {
+ lineStyle: {
+ color: contrastColor
+ },
+ crossStyle: {
+ color: contrastColor
+ }
+ }
+ },
+ legend: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ title: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ toolbox: {
+ iconStyle: {
+ borderColor: contrastColor
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#00305a' // Handle color
+ },
+
+ timeline: {
+ itemStyle: {
+ color: colorPalette[1]
+ },
+ lineStyle: {
+ color: contrastColor
+ },
+ controlStyle: {
+ color: contrastColor,
+ borderColor: contrastColor
+ },
+ label: {
+ color: contrastColor
+ }
+ },
+
+ timeAxis: axisCommon(),
+ logAxis: axisCommon(),
+ valueAxis: axisCommon(),
+ categoryAxis: axisCommon(),
+
+ line: {
+ symbol: 'circle'
+ },
+ graph: {
+ color: colorPalette
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#004b8d'],
+ [0.8, '#00305a'],
+ [1, '#7abaf2']
+ ],
+ width: 8
+ }
+ }
+ }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;
diff --git a/src/theme/light.ts b/src/theme/dark-bold.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-bold.ts
index 8b28ea8..20a9813 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-bold.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './dark-bold/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/dark-bold/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-bold/install.ts
index 8b28ea8..e4fba80 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-bold/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkBoldTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('dark-bold', darkBoldTheme);
+}
diff --git a/src/theme/dark-bold/theme.ts b/src/theme/dark-bold/theme.ts
new file mode 100644
index 0000000..235f991
--- /dev/null
+++ b/src/theme/dark-bold/theme.ts
@@ -0,0 +1,141 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+ return {
+ axisLine: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisLabel: {
+ color: contrastColor
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#aaa'
+ }
+ },
+ splitArea: {
+ areaStyle: {
+ color: contrastColor
+ }
+ }
+ };
+};
+
+const colorPalette = [
+ '#458c6b',
+ '#f2da87',
+ '#d9a86c',
+ '#d94436',
+ '#a62424',
+ '#76bc9b',
+ '#cce6da',
+ '#eeeeee'
+];
+
+const theme = {
+ color: colorPalette,
+ backgroundColor: '#333',
+ tooltip: {
+ axisPointer: {
+ lineStyle: {
+ color: contrastColor
+ },
+ crossStyle: {
+ color: contrastColor
+ }
+ }
+ },
+ legend: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ title: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ toolbox: {
+ iconStyle: {
+ borderColor: contrastColor
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#458c6b' // Handle color
+ },
+
+ timeline: {
+ itemStyle: {
+ color: colorPalette[1]
+ },
+ lineStyle: {
+ color: contrastColor
+ },
+ controlStyle: {
+ color: contrastColor,
+ borderColor: contrastColor
+ },
+ label: {
+ color: contrastColor
+ }
+ },
+
+ timeAxis: axisCommon(),
+ logAxis: axisCommon(),
+ valueAxis: axisCommon(),
+ categoryAxis: axisCommon(),
+
+ line: {
+ symbol: 'circle'
+ },
+ graph: {
+ color: colorPalette
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#f2da87'],
+ [0.8, '#458c6b'],
+ [1, '#a62424']
+ ],
+ width: 8
+ }
+ }
+ }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;
diff --git a/src/theme/light.ts b/src/theme/dark-digerati.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-digerati.ts
index 8b28ea8..c36bf8d 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-digerati.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './dark-digerati/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/dark-digerati/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-digerati/install.ts
index 8b28ea8..00cfe0f 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-digerati/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkDigeratiTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('dark-digerati', darkDigeratiTheme);
+}
diff --git a/src/theme/dark-digerati/theme.ts b/src/theme/dark-digerati/theme.ts
new file mode 100644
index 0000000..30aac8d
--- /dev/null
+++ b/src/theme/dark-digerati/theme.ts
@@ -0,0 +1,141 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+ return {
+ axisLine: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisLabel: {
+ color: contrastColor
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#aaa'
+ }
+ },
+ splitArea: {
+ areaStyle: {
+ color: contrastColor
+ }
+ }
+ };
+};
+
+const colorPalette = [
+ '#52656b',
+ '#ff3b77',
+ '#a3cc00',
+ '#ffffff',
+ '#b8b89f',
+ '#ffccdb',
+ '#e5ff80',
+ '#f4f4f0'
+];
+
+const theme = {
+ color: colorPalette,
+ backgroundColor: '#333',
+ tooltip: {
+ axisPointer: {
+ lineStyle: {
+ color: contrastColor
+ },
+ crossStyle: {
+ color: contrastColor
+ }
+ }
+ },
+ legend: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ title: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ toolbox: {
+ iconStyle: {
+ borderColor: contrastColor
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#52656b' // Handle color
+ },
+
+ timeline: {
+ itemStyle: {
+ color: colorPalette[1]
+ },
+ lineStyle: {
+ color: contrastColor
+ },
+ controlStyle: {
+ color: contrastColor,
+ borderColor: contrastColor
+ },
+ label: {
+ color: contrastColor
+ }
+ },
+
+ timeAxis: axisCommon(),
+ logAxis: axisCommon(),
+ valueAxis: axisCommon(),
+ categoryAxis: axisCommon(),
+
+ line: {
+ symbol: 'circle'
+ },
+ graph: {
+ color: colorPalette
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#ff3b77'],
+ [0.8, '#52656b'],
+ [1, '#b8b89f']
+ ],
+ width: 8
+ }
+ }
+ }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;
diff --git a/src/theme/light.ts b/src/theme/dark-fresh-cut.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-fresh-cut.ts
index 8b28ea8..5dfce48 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-fresh-cut.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './dark-fresh-cut/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/dark-fresh-cut/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-fresh-cut/install.ts
index 8b28ea8..e39790a 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-fresh-cut/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkFreshCutTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('dark-fresh-cut', darkFreshCutTheme);
+}
diff --git a/src/theme/dark-fresh-cut/theme.ts b/src/theme/dark-fresh-cut/theme.ts
new file mode 100644
index 0000000..1ec9eb5
--- /dev/null
+++ b/src/theme/dark-fresh-cut/theme.ts
@@ -0,0 +1,141 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+ return {
+ axisLine: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisLabel: {
+ color: contrastColor
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#aaa'
+ }
+ },
+ splitArea: {
+ areaStyle: {
+ color: contrastColor
+ }
+ }
+ };
+};
+
+const colorPalette = [
+ '#00a8c6',
+ '#40c0cb',
+ '#ebd3ad',
+ '#aee239',
+ '#8fbe00',
+ '#33e0ff',
+ '#b3f4ff',
+ '#e6ff99'
+];
+
+const theme = {
+ color: colorPalette,
+ backgroundColor: '#333',
+ tooltip: {
+ axisPointer: {
+ lineStyle: {
+ color: contrastColor
+ },
+ crossStyle: {
+ color: contrastColor
+ }
+ }
+ },
+ legend: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ title: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ toolbox: {
+ iconStyle: {
+ borderColor: contrastColor
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#00a8c6' // Handle color
+ },
+
+ timeline: {
+ itemStyle: {
+ color: colorPalette[1]
+ },
+ lineStyle: {
+ color: contrastColor
+ },
+ controlStyle: {
+ color: contrastColor,
+ borderColor: contrastColor
+ },
+ label: {
+ color: contrastColor
+ }
+ },
+
+ timeAxis: axisCommon(),
+ logAxis: axisCommon(),
+ valueAxis: axisCommon(),
+ categoryAxis: axisCommon(),
+
+ line: {
+ symbol: 'circle'
+ },
+ graph: {
+ color: colorPalette
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#40c0cb'],
+ [0.8, '#00a8c6'],
+ [1, '#8fbe00']
+ ],
+ width: 8
+ }
+ }
+ }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;
diff --git a/src/theme/light.ts b/src/theme/dark-mushroom.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-mushroom.ts
index 8b28ea8..7130c8f 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-mushroom.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './dark-mushroom/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/dark-mushroom/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark-mushroom/install.ts
index 8b28ea8..87d9c37 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark-mushroom/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkMushroomTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('dark-mushroom', darkMushroomTheme);
+}
diff --git a/src/theme/dark-mushroom/theme.ts b/src/theme/dark-mushroom/theme.ts
new file mode 100644
index 0000000..8ed86c6
--- /dev/null
+++ b/src/theme/dark-mushroom/theme.ts
@@ -0,0 +1,140 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+ return {
+ axisLine: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: contrastColor
+ }
+ },
+ axisLabel: {
+ color: contrastColor
+ },
+ splitLine: {
+ lineStyle: {
+ type: 'dashed',
+ color: '#aaa'
+ }
+ },
+ splitArea: {
+ areaStyle: {
+ color: contrastColor
+ }
+ }
+ };
+};
+
+const colorPalette = [
+ '#cc0e00',
+ '#ff1a0a',
+ '#ff8880',
+ '#ffc180',
+ '#ffc2b0',
+ '#ffffff',
+ '#ff8880',
+ '#ffe6e6'
+];
+const theme = {
+ color: colorPalette,
+ backgroundColor: '#333',
+ tooltip: {
+ axisPointer: {
+ lineStyle: {
+ color: contrastColor
+ },
+ crossStyle: {
+ color: contrastColor
+ }
+ }
+ },
+ legend: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ title: {
+ textStyle: {
+ color: contrastColor
+ }
+ },
+ toolbox: {
+ iconStyle: {
+ borderColor: contrastColor
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#cc0e00' // Handle color
+ },
+
+ timeline: {
+ itemStyle: {
+ color: colorPalette[1]
+ },
+ lineStyle: {
+ color: contrastColor
+ },
+ controlStyle: {
+ color: contrastColor,
+ borderColor: contrastColor
+ },
+ label: {
+ color: contrastColor
+ }
+ },
+
+ timeAxis: axisCommon(),
+ logAxis: axisCommon(),
+ valueAxis: axisCommon(),
+ categoryAxis: axisCommon(),
+
+ line: {
+ symbol: 'circle'
+ },
+ graph: {
+ color: colorPalette
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#ff1a0a'],
+ [0.8, '#cc0e00'],
+ [1, '#ffc2b0']
+ ],
+ width: 8
+ }
+ }
+ }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;
diff --git a/src/theme/light.ts b/src/theme/dark/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/dark/install.ts
index 8b28ea8..f8a54fc 100644
--- a/src/theme/light.ts
+++ b/src/theme/dark/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('dark', darkTheme);
+}
diff --git a/src/theme/dark.ts b/src/theme/dark/theme.ts
similarity index 99%
rename from src/theme/dark.ts
rename to src/theme/dark/theme.ts
index 2fa611a..5b1091f 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark/theme.ts
@@ -17,6 +17,8 @@
* under the License.
*/
+// registerd by default
+
const contrastColor = '#B9B8CE';
const backgroundColor = '#100C2A';
const axisCommon = function () {
diff --git a/src/theme/light.ts b/src/theme/eduardo.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/eduardo.ts
index 8b28ea8..fa4487f 100644
--- a/src/theme/light.ts
+++ b/src/theme/eduardo.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './eduardo/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/eduardo/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/eduardo/install.ts
index 8b28ea8..bb90a34 100644
--- a/src/theme/light.ts
+++ b/src/theme/eduardo/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import eduardoTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('eduardo', eduardoTheme);
+}
diff --git a/src/theme/eduardo/theme.ts b/src/theme/eduardo/theme.ts
new file mode 100644
index 0000000..1a84df5
--- /dev/null
+++ b/src/theme/eduardo/theme.ts
@@ -0,0 +1,150 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#59535e',
+ '#e7dcef',
+ '#f1baf3',
+ '#5d4970',
+ '#372049',
+ '#c0b2cd',
+ '#ffccff',
+ '#f2f0f5'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#59535e'
+ }
+ },
+
+ visualMap: {
+ color: ['#59535e', '#e7dcef']
+ },
+
+ toolbox: {
+ color: ['#59535e', '#59535e', '#59535e', '#59535e']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#59535e',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#59535e'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#59535e' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#59535e'
+ },
+ controlStyle: {
+ color: '#59535e',
+ borderColor: '#59535e'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#e7dcef',
+ color0: '#f1baf3'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#372049',
+ color0: '#5d4970'
+ },
+ areaStyle: {
+ color: '#59535e',
+ color0: '#e7dcef'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#59535e',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#e7dcef'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd'
+ },
+ areaStyle: {
+ color: '#f1baf3'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#59535e'
+ },
+ linkStyle: {
+ color: '#59535e'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#e7dcef'],
+ [0.8, '#59535e'],
+ [1, '#372049']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/forest.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/forest.ts
index 8b28ea8..1d35023 100644
--- a/src/theme/light.ts
+++ b/src/theme/forest.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './forest/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/forest/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/forest/install.ts
index 8b28ea8..da78353 100644
--- a/src/theme/light.ts
+++ b/src/theme/forest/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import forestTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('forest', forestTheme);
+}
diff --git a/src/theme/forest/theme.ts b/src/theme/forest/theme.ts
new file mode 100644
index 0000000..59e77ac
--- /dev/null
+++ b/src/theme/forest/theme.ts
@@ -0,0 +1,135 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#313b23',
+ '#494f2b',
+ '#606233',
+ '#d6b77b',
+ '#0e0e0e',
+ '#076278',
+ '#808080',
+ '#e7d5b1'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#313b23'
+ }
+ },
+
+ visualMap: {
+ color: ['#313b23', '#494f2b']
+ },
+
+ toolbox: {
+ color: ['#313b23', '#313b23', '#313b23', '#313b23']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#313b23',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#313b23'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#313b23' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#313b23'
+ },
+ controlStyle: {
+ color: '#313b23',
+ borderColor: '#313b23'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#494f2b',
+ color0: '#606233'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#0e0e0e',
+ color0: '#d6b77b'
+ },
+ areaStyle: {
+ color: '#494f2b',
+ color0: '#d6b77b'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#606233'
+ },
+ areaStyle: {
+ color: '#ddd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#494f2b'
+ },
+ linkStyle: {
+ color: '#313b23'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#494f2b'],
+ [0.8, '#313b23'],
+ [1, '0e0e0e']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/fresh-cut.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/fresh-cut.ts
index 8b28ea8..dc5ff8e 100644
--- a/src/theme/light.ts
+++ b/src/theme/fresh-cut.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './fresh-cut/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/fresh-cut/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/fresh-cut/install.ts
index 8b28ea8..dd09ab0 100644
--- a/src/theme/light.ts
+++ b/src/theme/fresh-cut/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import freshCutTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('fresh-cut', freshCutTheme);
+}
diff --git a/src/theme/fresh-cut/theme.ts b/src/theme/fresh-cut/theme.ts
new file mode 100644
index 0000000..45f537f
--- /dev/null
+++ b/src/theme/fresh-cut/theme.ts
@@ -0,0 +1,135 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#00a8c6',
+ '#40c0cb',
+ '#f0dec2',
+ '#aee239',
+ '#8fbe00',
+ '#33e0ff',
+ '#b3f4ff',
+ '#e6ff99'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#00a8c6'
+ }
+ },
+
+ visualMap: {
+ color: ['#00a8c6', '#a2d4e6']
+ },
+
+ toolbox: {
+ color: ['#00a8c6', '#00a8c6', '#00a8c6', '#00a8c6']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#00a8c6',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#00a8c6'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+ handleColor: '#00a8c6' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#00a8c6'
+ },
+ controlStyle: {
+ color: '#00a8c6',
+ borderColor: '#00a8c6'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#40c0cb',
+ color0: '#f0dec2'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#8fbe00',
+ color0: '#aee239'
+ },
+ areaStyle: {
+ color: '#00a8c6',
+ color0: '#aee239'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd'
+ },
+ areaStyle: {
+ color: '#f0dec2'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#f0dec2'
+ },
+ linkStyle: {
+ color: '#00a8c6'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#40c0cb'],
+ [0.8, '#00a8c6'],
+ [1, '#8fbe00']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/fruit.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/fruit.ts
index 8b28ea8..29876c7 100644
--- a/src/theme/light.ts
+++ b/src/theme/fruit.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './fruit/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/fruit/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/fruit/install.ts
index 8b28ea8..c3e1051 100644
--- a/src/theme/light.ts
+++ b/src/theme/fruit/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import fruitTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('fruit', fruitTheme);
+}
diff --git a/src/theme/fruit/theme.ts b/src/theme/fruit/theme.ts
new file mode 100644
index 0000000..19b84a4
--- /dev/null
+++ b/src/theme/fruit/theme.ts
@@ -0,0 +1,150 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#ffcb6a',
+ '#ffa850',
+ '#ffe2c4',
+ '#e5834e',
+ '#ffb081',
+ '#f7826e',
+ '#faac9e',
+ '#fcd5cf'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#ffcb6a'
+ }
+ },
+
+ visualMap: {
+ color: ['#ffcb6a', '#ffa850']
+ },
+
+ toolbox: {
+ color: ['#ffcb6a', '#ffcb6a', '#ffcb6a', '#ffcb6a']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#ffcb6a',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#ffcb6a'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#ffcb6a' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#ffcb6a'
+ },
+ controlStyle: {
+ color: '#ffcb6a',
+ borderColor: '#ffcb6a'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#ffa850',
+ color0: '#ffe2c4'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#ffb081',
+ color0: '#e5834e'
+ },
+ areaStyle: {
+ color: '#e5834e',
+ color0: '#fcd5cf'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#fcd5cf',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#e5834e'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ffe2c4'
+ },
+ areaStyle: {
+ color: '#ddd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#f2385a'
+ },
+ linkStyle: {
+ color: '#ffcb6a'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#ffa850'],
+ [0.8, '#ffcb6a'],
+ [1, '#ffb081']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/gray.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/gray.ts
index 8b28ea8..947091b 100644
--- a/src/theme/light.ts
+++ b/src/theme/gray.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './gray/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/gray/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/gray/install.ts
index 8b28ea8..e31b551 100644
--- a/src/theme/light.ts
+++ b/src/theme/gray/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import grayTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('gray', grayTheme);
+}
diff --git a/src/theme/gray/theme.ts b/src/theme/gray/theme.ts
new file mode 100644
index 0000000..2177f6b
--- /dev/null
+++ b/src/theme/gray/theme.ts
@@ -0,0 +1,192 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#757575',
+ '#c7c7c7',
+ '#dadada',
+ '#8b8b8b',
+ '#b5b5b5',
+ '#e9e9e9'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#757575'
+ }
+ },
+
+ dataRange: {
+ color: ['#636363', '#dcdcdc']
+ },
+
+ toolbox: {
+ color: ['#757575', '#757575', '#757575', '#757575']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#757575',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#757575'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(117,117,117,0.2)', // Fill the color
+ handleColor: '#757575' // Handle color
+ },
+
+ grid: {
+ borderWidth: 0
+ },
+
+ categoryAxis: {
+ axisLine: {
+ // Coordinate axis
+ lineStyle: {
+ // Property 'lineStyle' controls line styles
+ color: '#757575'
+ }
+ },
+ splitLine: {
+ // Separation line
+ lineStyle: {
+ // Property 'lineStyle' (see lineStyle) controls line styles
+ color: ['#eee']
+ }
+ }
+ },
+
+ valueAxis: {
+ axisLine: {
+ // Coordinate axis
+ lineStyle: {
+ // Property 'lineStyle' controls line styles
+ color: '#757575'
+ }
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
+ }
+ },
+ splitLine: {
+ // Separation line
+ lineStyle: {
+ // Property 'lineStyle' (see lineStyle) controls line styles
+ color: ['#eee']
+ }
+ }
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#757575'
+ },
+ controlStyle: {
+ color: '#757575',
+ borderColor: '#757575'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#8b8b8b',
+ color0: '#dadada'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#757575',
+ color0: '#c7c7c7'
+ },
+ areaStyle: {
+ color: '#757575',
+ color0: '#e9e9e9'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#c7c7c7'
+ },
+ areaStyle: {
+ color: 'ddd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#e9e9e9'
+ },
+ linkStyle: {
+ color: '#757575'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#e9e9e9',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#757575'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#b5b5b5'],
+ [0.8, '#757575'],
+ [1, '#5c5c5c']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/green.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/green.ts
index 8b28ea8..341bfbe 100644
--- a/src/theme/light.ts
+++ b/src/theme/green.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './green/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/green/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/green/install.ts
index 8b28ea8..466bfd6 100644
--- a/src/theme/light.ts
+++ b/src/theme/green/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import greenTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('green', greenTheme);
+}
diff --git a/src/theme/green/theme.ts b/src/theme/green/theme.ts
new file mode 100644
index 0000000..57b3424
--- /dev/null
+++ b/src/theme/green/theme.ts
@@ -0,0 +1,194 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#408829',
+ '#68a54a',
+ '#a9cba2',
+ '#86b379',
+ '#397b29',
+ '#8abb6f',
+ '#759c6a',
+ '#bfd3b7'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#408829'
+ }
+ },
+
+ visualMap: {
+ color: ['408829', '#a9cba2']
+ },
+
+ toolbox: {
+ color: ['#408829', '#408829', '#408829', '#408829']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#408829',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#408829'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(64,136,41,0.2)', // Fill the color
+ handleColor: '#408829' // Handle color
+ },
+
+ grid: {
+ borderWidth: 0
+ },
+
+ categoryAxis: {
+ axisLine: {
+ // Coordinate axis
+ lineStyle: {
+ // Property 'lineStyle' controls line styles
+ color: '#408829'
+ }
+ },
+ splitLine: {
+ // Separation line
+ lineStyle: {
+ // Property 'lineStyle' (see lineStyle) controls line styles
+ color: ['#eee']
+ }
+ }
+ },
+
+ valueAxis: {
+ axisLine: {
+ // Coordinate axis
+ lineStyle: {
+ // Property 'lineStyle' controls line styles
+ color: '#408829'
+ }
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
+ }
+ },
+ splitLine: {
+ // Separation line
+ lineStyle: {
+ // Property 'lineStyle' (see lineStyle) controls line styles
+ color: ['#eee']
+ }
+ }
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#408829'
+ },
+ controlStyle: {
+ color: '#408829',
+ borderColor: '#408829'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#68a54a',
+ color0: '#a9cba2'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#408829',
+ color0: '#86b379'
+ },
+ areaStyle: {
+ color: '#408829',
+ color0: '#bfd3b7'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#bfd3b7'
+ },
+ linkStyle: {
+ color: '#408829'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#bfd3b7',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#408829'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd'
+ },
+ areaStyle: {
+ color: '#408829'
+ },
+ label: {
+ color: '#000'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#86b379'],
+ [0.8, '#68a54a'],
+ [1, '#408829']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/helianthus.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/helianthus.ts
index 8b28ea8..ce9dd36 100644
--- a/src/theme/light.ts
+++ b/src/theme/helianthus.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './helianthus/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/helianthus/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/helianthus/install.ts
index 8b28ea8..3e9286d 100644
--- a/src/theme/light.ts
+++ b/src/theme/helianthus/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import helianthusTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('helianthus', helianthusTheme);
+}
diff --git a/src/theme/helianthus/theme.ts b/src/theme/helianthus/theme.ts
new file mode 100644
index 0000000..c52d5b9
--- /dev/null
+++ b/src/theme/helianthus/theme.ts
@@ -0,0 +1,235 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#44B7D3',
+ '#E42B6D',
+ '#F4E24E',
+ '#FE9616',
+ '#8AED35',
+ '#ff69b4',
+ '#ba55d3',
+ '#cd5c5c',
+ '#ffa500',
+ '#40e0d0',
+ '#E95569',
+ '#ff6347',
+ '#7b68ee',
+ '#00fa9a',
+ '#ffd700',
+ '#6699FF',
+ '#ff6666',
+ '#3cb371',
+ '#b8860b',
+ '#30e0e0'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#8A826D'
+ }
+ },
+
+ dataRange: {
+ x: 'right',
+ y: 'center',
+ itemWidth: 5,
+ itemHeight: 25,
+ color: ['#E42B6D', '#F9AD96'],
+ text: ['High', 'Low'], // Text, default is numeric text
+ textStyle: {
+ color: '#8A826D' // Range text color
+ }
+ },
+
+ toolbox: {
+ color: ['#E95569', '#E95569', '#E95569', '#E95569'],
+ effectiveColor: '#ff4500',
+ itemGap: 8
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(138,130,109,0.7)', // Prompt background color, default is black with a transparency of 0.7
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#6B6455',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#A6A299'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: 'rgba(130,197,209,0.6)', // Data background color
+ fillerColor: 'rgba(233,84,105,0.1)', // Fill the color
+ handleColor: 'rgba(107,99,84,0.8)' // Handle color
+ },
+
+ grid: {
+ borderWidth: 0
+ },
+
+ categoryAxis: {
+ axisLine: {
+ // Coordinate axis
+ lineStyle: {
+ // Property 'lineStyle' controls line styles
+ color: '#6B6455'
+ }
+ },
+ splitLine: {
+ // separate line
+ show: false
+ }
+ },
+
+ valueAxis: {
+ axisLine: {
+ // Coordinate axis
+ show: true
+ },
+ splitArea: {
+ show: false
+ },
+ splitLine: {
+ // separate line
+ lineStyle: {
+ // Property 'lineStyle' controls line styles
+ color: ['#FFF'],
+ type: 'dashed'
+ }
+ }
+ },
+
+ polar: {
+ axisLine: {
+ // Coordinate axis
+ lineStyle: {
+ // // Property 'lineStyle' controls line styles
+ color: '#ddd'
+ }
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['rgba(250,250,250,0.2)', 'rgba(200,200,200,0.2)']
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#ddd'
+ }
+ }
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#6B6455'
+ },
+ controlStyle: {
+ color: '#6B6455',
+ borderColor: '#6B6455'
+ }
+ },
+
+ line: {
+ smooth: true,
+ symbol: 'emptyCircle', // Inflection point graphic type
+ symbolSize: 3 // Inflection point graphic size
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#e42B6d',
+ color0: '#44B7d3'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#e42B6d',
+ color0: '#44B7d3'
+ },
+ areaStyle: {
+ color: '#fe994e',
+ color0: '#e42B6d'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#6b6455'
+ },
+ areaStyle: {
+ color: '#ddd'
+ },
+ label: {
+ color: '#e42B6d'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#e42B6d'
+ },
+ linkStyle: {
+ color: '#6b6455'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#e42B6d',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#6b6455'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#44B7D3'],
+ [0.8, '#6B6455'],
+ [1, '#E42B6D']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/helper.ts b/src/theme/helper.ts
new file mode 100644
index 0000000..6d1a17c
--- /dev/null
+++ b/src/theme/helper.ts
@@ -0,0 +1,13 @@
+import type { EChartsExtensionInstallRegisters } from '../extension';
+
+export function checkECharts(registers: EChartsExtensionInstallRegisters) {
+ const log = function (msg: any) {
+ if (typeof console !== 'undefined') {
+ console && console.error && console.error(msg);
+ }
+ };
+ if (!registers) {
+ log('ECharts is not Loaded');
+ return;
+ }
+}
diff --git a/src/theme/light.ts b/src/theme/infographic.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/infographic.ts
index 8b28ea8..337e74e 100644
--- a/src/theme/light.ts
+++ b/src/theme/infographic.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './infographic/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/infographic/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/infographic/install.ts
index 8b28ea8..1a0c8c9 100644
--- a/src/theme/light.ts
+++ b/src/theme/infographic/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import infographicTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('infographic', infographicTheme);
+}
diff --git a/src/theme/infographic/theme.ts b/src/theme/infographic/theme.ts
new file mode 100644
index 0000000..52d026b
--- /dev/null
+++ b/src/theme/infographic/theme.ts
@@ -0,0 +1,208 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+const colorPalette = [
+ '#C1232B',
+ '#27727B',
+ '#FCCE10',
+ '#E87C25',
+ '#B5C334',
+ '#FE8463',
+ '#9BCA63',
+ '#FAD860',
+ '#F3A43B',
+ '#60C0DD',
+ '#D7504B',
+ '#C6E579',
+ '#F4E001',
+ '#F0805A',
+ '#26C0C0'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#27727B'
+ }
+ },
+
+ visualMap: {
+ color: ['#C1232B', '#FCCE10']
+ },
+
+ toolbox: {
+ iconStyle: {
+ normal: {
+ borderColor: colorPalette[0]
+ }
+ }
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(50,50,50,0.5)',
+ axisPointer: {
+ type: 'line',
+ lineStyle: {
+ color: '#27727B',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#27727B'
+ },
+ shadowStyle: {
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ dataZoom: {
+ dataBackgroundColor: 'rgba(181,195,52,0.3)',
+ fillerColor: 'rgba(181,195,52,0.2)',
+ handleColor: '#27727B'
+ },
+
+ categoryAxis: {
+ axisLine: {
+ lineStyle: {
+ color: '#27727B'
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+
+ valueAxis: {
+ axisLine: {
+ show: false
+ },
+ splitArea: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ color: ['#ccc'],
+ type: 'dashed'
+ }
+ }
+ },
+
+ timeline: {
+ itemStyle: {
+ color: '#27727B'
+ },
+ lineStyle: {
+ color: '#27727B'
+ },
+ controlStyle: {
+ color: '#27727B',
+ borderColor: '#27727B'
+ },
+ symbol: 'emptyCircle',
+ symbolSize: 3
+ },
+
+ line: {
+ itemStyle: {
+ borderWidth: 2,
+ borderColor: '#fff',
+ lineStyle: {
+ width: 3
+ },
+ emphasis: {
+ borderWidth: 0
+ }
+ },
+ symbol: 'circle',
+ symbolSize: 3.5
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#c1232b',
+ color0: '#b5c334'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#c1232b',
+ color0: '#b5c334'
+ },
+ areaStyle: {
+ color: '#c1232b',
+ color0: '#27727b'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#c1232b'
+ },
+ linkStyle: {
+ color: '#b5c334'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#f2385a',
+ areaColor: '#ddd',
+ borderColor: '#eee'
+ },
+ areaStyle: {
+ color: '#fe994e'
+ },
+ label: {
+ color: '#c1232b'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#B5C334'],
+ [0.8, '#27727B'],
+ [1, '#C1232B']
+ ]
+ }
+ },
+ axisTick: {
+ splitNumber: 2,
+ length: 5,
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
+ color: '#fff'
+ },
+ splitLine: {
+ length: '5%',
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ title: {
+ offsetCenter: [0, -20]
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/inspired.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/inspired.ts
index 8b28ea8..197a3e6 100644
--- a/src/theme/light.ts
+++ b/src/theme/inspired.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './inspired/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/inspired/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/inspired/install.ts
index 8b28ea8..fed0f96 100644
--- a/src/theme/light.ts
+++ b/src/theme/inspired/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import inspiredTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('inspired', inspiredTheme);
+}
diff --git a/src/theme/inspired/theme.ts b/src/theme/inspired/theme.ts
new file mode 100644
index 0000000..2e967a4
--- /dev/null
+++ b/src/theme/inspired/theme.ts
@@ -0,0 +1,135 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#cc0000',
+ '#002266',
+ '#ff9900',
+ '#006600',
+ '#8a150f',
+ '#076278',
+ '#808080',
+ '#f07b75'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#cc0000'
+ }
+ },
+
+ visualMap: {
+ color: ['#cc0000', '#002266']
+ },
+
+ toolbox: {
+ color: ['#cc0000', '#cc0000', '#cc0000', '#cc0000']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#cc0000',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#cc0000'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#cc0000' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#cc0000'
+ },
+ controlStyle: {
+ color: '#cc0000',
+ borderColor: '#cc0000'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#002266',
+ color0: '#ff9900'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#8a150f',
+ color0: '#006600'
+ },
+ areaStyle: {
+ color: '#cc0000',
+ color0: '#ff9900'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ff9900'
+ },
+ areaStyle: {
+ color: '#ddd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#ff9900'
+ },
+ linkStyle: {
+ color: '#cc0000'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#002266'],
+ [0.8, '#cc0000'],
+ [1, '8a150f']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/jazz.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/jazz.ts
index 8b28ea8..4be2153 100644
--- a/src/theme/light.ts
+++ b/src/theme/jazz.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './jazz/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/jazz/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/jazz/install.ts
index 8b28ea8..283c140 100644
--- a/src/theme/light.ts
+++ b/src/theme/jazz/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import jazzTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('jazz', jazzTheme);
+}
diff --git a/src/theme/jazz/theme.ts b/src/theme/jazz/theme.ts
new file mode 100644
index 0000000..f846a1b
--- /dev/null
+++ b/src/theme/jazz/theme.ts
@@ -0,0 +1,135 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#e9e0d1',
+ '#91a398',
+ '#33605a',
+ '#070001',
+ '#68462b',
+ '#58a79c',
+ '#abd3ce',
+ '#eef6f5'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#e9e0d1'
+ }
+ },
+
+ visualMap: {
+ color: ['#e9e0d1', '#91a398']
+ },
+
+ toolbox: {
+ color: ['#e9e0d1', '#e9e0d1', '#e9e0d1', '#e9e0d1']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#e9e0d1',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#e9e0d1'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#e9e0d1' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#e9e0d1'
+ },
+ controlStyle: {
+ color: '#e9e0d1',
+ borderColor: '#e9e0d1'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#91a398',
+ color0: '#33605a'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#68462b',
+ color0: '#070001'
+ },
+ areaStyle: {
+ color: '#91a398',
+ color0: '#abd3ce'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#c12e34'
+ },
+ areaStyle: {
+ color: '#ddd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#33605a'
+ },
+ linkStyle: {
+ color: '#e9e0d1'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#91a398'],
+ [0.8, '#e9e0d1'],
+ [1, '#68462b']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/light/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/light/install.ts
index 8b28ea8..469a314 100644
--- a/src/theme/light.ts
+++ b/src/theme/light/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import lightTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('light', lightTheme);
+}
diff --git a/src/theme/light.ts b/src/theme/light/theme.ts
similarity index 97%
copy from src/theme/light.ts
copy to src/theme/light/theme.ts
index 8b28ea8..274b8a9 100644
--- a/src/theme/light.ts
+++ b/src/theme/light/theme.ts
@@ -17,6 +17,8 @@
* under the License.
*/
+// registerd by default
+
const colorAll = [
'#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
'#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
@@ -32,4 +34,4 @@ export default {
['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
colorAll
]
-};
\ No newline at end of file
+};
diff --git a/src/theme/light.ts b/src/theme/london.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/london.ts
index 8b28ea8..6928302 100644
--- a/src/theme/light.ts
+++ b/src/theme/london.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './london/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/london/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/london/install.ts
index 8b28ea8..c2675b5 100644
--- a/src/theme/light.ts
+++ b/src/theme/london/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import londonTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('london', londonTheme);
+}
diff --git a/src/theme/london/theme.ts b/src/theme/london/theme.ts
new file mode 100644
index 0000000..7c4a81e
--- /dev/null
+++ b/src/theme/london/theme.ts
@@ -0,0 +1,135 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#02151a',
+ '#043a47',
+ '#087891',
+ '#c8c8c8',
+ '#b31d14',
+ '#0b9cc1',
+ '#f2f2f2',
+ '#f07b75'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#02151a'
+ }
+ },
+
+ visualMap: {
+ color: ['#02151a', '#a2d4e6']
+ },
+
+ toolbox: {
+ color: ['#02151a', '#02151a', '#02151a', '#02151a']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#02151a',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#02151a'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+ handleColor: '#02151a' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#02151a'
+ },
+ controlStyle: {
+ color: '#02151a',
+ borderColor: '#02151a'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#043a47',
+ color0: '#087891'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#b31d14',
+ color0: '#c8c8c8'
+ },
+ areaStyle: {
+ color: '#087891',
+ color0: '#c8c8c8'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd'
+ },
+ areaStyle: {
+ color: '#087891'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#c12e34'
+ },
+ linkStyle: {
+ color: '#02151a'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#043a47'],
+ [0.8, '#02151a'],
+ [1, '#b31d14']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/macarons.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/macarons.ts
index 8b28ea8..69dc0ea 100644
--- a/src/theme/light.ts
+++ b/src/theme/macarons.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './macarons/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/macarons/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/macarons/install.ts
index 8b28ea8..0aca95f 100644
--- a/src/theme/light.ts
+++ b/src/theme/macarons/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import macaronsTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('macarons', macaronsTheme);
+}
diff --git a/src/theme/macarons/theme.ts b/src/theme/macarons/theme.ts
new file mode 100644
index 0000000..32e82f4
--- /dev/null
+++ b/src/theme/macarons/theme.ts
@@ -0,0 +1,213 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+const colorPalette = [
+ '#2ec7c9',
+ '#b6a2de',
+ '#5ab1ef',
+ '#ffb980',
+ '#d87a80',
+ '#8d98b3',
+ '#e5cf0d',
+ '#97b552',
+ '#95706d',
+ '#dc69aa',
+ '#07a2a4',
+ '#9a7fd1',
+ '#588dd5',
+ '#f5994e',
+ '#c05050',
+ '#59678c',
+ '#c9ab00',
+ '#7eb00a',
+ '#6f5553',
+ '#c14089'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#008acd'
+ }
+ },
+
+ visualMap: {
+ itemWidth: 15,
+ color: ['#5ab1ef', '#e0ffff']
+ },
+
+ toolbox: {
+ iconStyle: {
+ normal: {
+ borderColor: colorPalette[0]
+ }
+ }
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(50,50,50,0.5)',
+ axisPointer: {
+ type: 'line',
+ lineStyle: {
+ color: '#008acd'
+ },
+ crossStyle: {
+ color: '#008acd'
+ },
+ shadowStyle: {
+ color: 'rgba(200,200,200,0.2)'
+ }
+ }
+ },
+
+ dataZoom: {
+ dataBackgroundColor: '#efefff',
+ fillerColor: 'rgba(182,162,222,0.2)',
+ handleColor: '#008acd'
+ },
+
+ grid: {
+ borderColor: '#eee'
+ },
+
+ categoryAxis: {
+ axisLine: {
+ lineStyle: {
+ color: '#008acd'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: ['#eee']
+ }
+ }
+ },
+
+ valueAxis: {
+ axisLine: {
+ lineStyle: {
+ color: '#008acd'
+ }
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: ['#eee']
+ }
+ }
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#008acd'
+ },
+ controlStyle: {
+ color: '#008acd',
+ borderColor: '#008acd'
+ },
+ symbol: 'emptyCircle',
+ symbolSize: 3
+ },
+
+ line: {
+ smooth: true,
+ symbol: 'emptyCircle',
+ symbolSize: 3
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#d87a80',
+ color0: '#2ec7c9'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#d87a80',
+ color0: '#2ec7c9'
+ },
+ areaStyle: {
+ color: '#2ec7c9',
+ color0: '#b6a2de'
+ }
+ },
+
+ scatter: {
+ symbol: 'circle',
+ symbolSize: 4
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd'
+ },
+ areaStyle: {
+ color: '#fe994e'
+ },
+ label: {
+ color: '#d87a80'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#d87a80'
+ },
+ linkStyle: {
+ color: '#2ec7c9'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#2ec7c9'],
+ [0.8, '#5ab1ef'],
+ [1, '#d87a80']
+ ],
+ width: 10
+ }
+ },
+ axisTick: {
+ splitNumber: 10,
+ length: 15,
+ lineStyle: {
+ color: 'auto'
+ }
+ },
+ splitLine: {
+ length: 22,
+ lineStyle: {
+ color: 'auto'
+ }
+ },
+ pointer: {
+ width: 5
+ }
+ }
+};
+
diff --git a/src/theme/light.ts b/src/theme/macarons2.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/macarons2.ts
index 8b28ea8..0ee1765 100644
--- a/src/theme/light.ts
+++ b/src/theme/macarons2.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './macarons2/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/macarons2/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/macarons2/install.ts
index 8b28ea8..2d19269 100644
--- a/src/theme/light.ts
+++ b/src/theme/macarons2/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import macarons2Theme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('macarons2', macarons2Theme);
+}
diff --git a/src/theme/macarons2/theme.ts b/src/theme/macarons2/theme.ts
new file mode 100644
index 0000000..af1b320
--- /dev/null
+++ b/src/theme/macarons2/theme.ts
@@ -0,0 +1,221 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#ed9678',
+ '#e7dac9',
+ '#cb8e85',
+ '#f3f39d',
+ '#c8e49c',
+ '#f16d7a',
+ '#f3d999',
+ '#d3758f',
+ '#dcc392',
+ '#2e4783',
+ '#82b6e9',
+ '#ff6347',
+ '#a092f1',
+ '#0a915d',
+ '#eaf889',
+ '#6699FF',
+ '#ff6666',
+ '#3cb371',
+ '#d5b158',
+ '#38b6b6'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#cb8e85'
+ }
+ },
+
+ dataRange: {
+ color: ['#cb8e85', '#e7dac9'], //颜色
+ //text:['高','低'], // 文本，默认为数值文本
+ textStyle: {
+ color: '#333' // 值域文字颜色
+ }
+ },
+
+ bar: {
+ barMinHeight: 0, // 最小高度改为0
+ // barWidth: null, // 默认自适应
+ barGap: '30%', // 柱间距离，默认为柱形宽度的30%，可设固定值
+ barCategoryGap: '20%', // 类目间柱形距离，默认为类目间距的20%，可设固定值
+ itemStyle: {
+ normal: {
+ // color: '各异',
+ barBorderColor: '#fff', // 柱条边线
+ barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
+ barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
+ label: {
+ show: false
+ // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+ // 'inside'|'left'|'right'|'top'|'bottom'
+ // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
+ }
+ },
+ emphasis: {
+ // color: '各异',
+ barBorderColor: 'rgba(0,0,0,0)', // 柱条边线
+ barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
+ barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
+ label: {
+ show: false
+ // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+ // 'inside'|'left'|'right'|'top'|'bottom'
+ // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
+ }
+ }
+ }
+ },
+
+ line: {
+ itemStyle: {
+ normal: {
+ // color: 各异,
+ label: {
+ show: false
+ // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+ // 'inside'|'left'|'right'|'top'|'bottom'
+ // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
+ },
+ lineStyle: {
+ width: 2,
+ type: 'solid',
+ shadowColor: 'rgba(0,0,0,0)', //默认透明
+ shadowBlur: 5,
+ shadowOffsetX: 3,
+ shadowOffsetY: 3
+ }
+ },
+ emphasis: {
+ // color: 各异,
+ label: {
+ show: false
+ // position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
+ // 'inside'|'left'|'right'|'top'|'bottom'
+ // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
+ }
+ }
+ },
+ //smooth : false,
+ //symbol: null, // 拐点图形类型
+ symbolSize: 2, // 拐点图形大小
+ //symbolRotate : null, // 拐点图形旋转控制
+ showAllSymbol: false // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#fe9778',
+ color0: '#e7dac9'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#f78766',
+ color0: '#f1ccb8'
+ },
+ areaStyle: {
+ color: '#e7dac9',
+ color0: '#c8e49c'
+ }
+ },
+
+ // 饼图默认参数
+ pie: {
+ center: ['50%', '50%'], // 默认全局居中
+ radius: [0, '75%'],
+ clockWise: false, // 默认逆时针
+ startAngle: 90,
+ minAngle: 0, // 最小角度改为0
+ selectedOffset: 10, // 选中是扇区偏移量
+ itemStyle: {
+ // color: 各异,
+ borderColor: '#fff',
+ borderWidth: 1,
+ label: {
+ show: true,
+ position: 'outer',
+ color: '#1b1b1b',
+ lineStyle: { color: '#1b1b1b' }
+ // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
+ },
+ labelLine: {
+ show: true,
+ length: 20,
+ lineStyle: {
+ // color: 各异,
+ width: 1,
+ type: 'solid'
+ }
+ }
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#ddd',
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ areaStyle: {
+ color: '#f3f39d'
+ },
+ label: {
+ show: false,
+ color: 'rgba(139,69,19,1)'
+ },
+ showLegendSymbol: true
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#d87a80'
+ },
+ linkStyle: {
+ strokeColor: '#a17e6e'
+ },
+ nodeStyle: {
+ brushType: 'both',
+ strokeColor: '#a17e6e'
+ },
+ label: {
+ show: false
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#ed9678'],
+ [0.8, '#e7dac9'],
+ [1, '#cb8e85']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/mint.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/mint.ts
index 8b28ea8..e857358 100644
--- a/src/theme/light.ts
+++ b/src/theme/mint.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './mint/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/mint/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/mint/install.ts
index 8b28ea8..e4c8bc1 100644
--- a/src/theme/light.ts
+++ b/src/theme/mint/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import mintTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('mint', mintTheme);
+}
diff --git a/src/theme/mint/theme.ts b/src/theme/mint/theme.ts
new file mode 100644
index 0000000..4ab3f3d
--- /dev/null
+++ b/src/theme/mint/theme.ts
@@ -0,0 +1,127 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#8aedd5',
+ '#93bc9e',
+ '#cef1db',
+ '#7fe579',
+ '#a6d7c2',
+ '#bef0bb',
+ '#99e2vb',
+ '#94f8a8',
+ '#7de5b8',
+ '#4dfb70'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#8aedd5'
+ }
+ },
+
+ toolbox: {
+ color: ['#8aedd5', '#8aedd5', '#8aedd5', '#8aedd5']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#8aedd5',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#8aedd5'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(64,136,41,0.2)', // Fill the color
+ handleColor: '#408829' // Handle color
+ },
+
+ dataRange: {
+ color: ['#93bc92', '#bef0bb']
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#8aedd5',
+ color0: '#7fe579'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#8aedd5',
+ color0: '#7fe579'
+ },
+ areaStyle: {
+ color: '#8aedd5',
+ color0: '#93bc9e'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#8aedd5'
+ },
+ linkStyle: {
+ color: '#93bc9e'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#8aedd5'
+ },
+ areaStyle: {
+ color: '#93bc9e'
+ },
+ label: {
+ color: '#cef1db'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#93bc9e'],
+ [0.8, '#8aedd5'],
+ [1, '#a6d7c2']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/red-velvet.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/red-velvet.ts
index 8b28ea8..8a9bfa7 100644
--- a/src/theme/light.ts
+++ b/src/theme/red-velvet.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './red-velvet/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/red-velvet/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/red-velvet/install.ts
index 8b28ea8..1106c92 100644
--- a/src/theme/light.ts
+++ b/src/theme/red-velvet/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import redVelvetTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('red-velvet', redVelvetTheme);
+}
diff --git a/src/theme/red-velvet/theme.ts b/src/theme/red-velvet/theme.ts
new file mode 100644
index 0000000..4f79f3c
--- /dev/null
+++ b/src/theme/red-velvet/theme.ts
@@ -0,0 +1,135 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#8b1a2d',
+ '#a7314b',
+ '#e6004c',
+ '#ff8066',
+ '#8e5c4e',
+ '#ff1a66',
+ '#d6c582',
+ '#f0d4af'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#8b1a2d'
+ }
+ },
+
+ visualMap: {
+ color: ['#8b1a2d', '#a7314b']
+ },
+
+ toolbox: {
+ color: ['#8b1a2d', '#8b1a2d', '#8b1a2d', '#8b1a2d']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#8b1a2d',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#8b1a2d'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#8b1a2d' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#8b1a2d'
+ },
+ controlStyle: {
+ color: '#8b1a2d',
+ borderColor: '#8b1a2d'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#a7314b',
+ color0: '#d6c582'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#8e5c4e',
+ color0: '#f0d4af'
+ },
+ areaStyle: {
+ color: '#8b1a2d',
+ color0: '#ff8066'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#8b1a2d'
+ },
+ areaStyle: {
+ color: '#ff8066'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#ff8066'
+ },
+ linkStyle: {
+ color: '#8b1a2d'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#a7314b'],
+ [0.8, '#8b1a2d'],
+ [1, '#8e5c4e']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/red.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/red.ts
index 8b28ea8..00a7f0f 100644
--- a/src/theme/light.ts
+++ b/src/theme/red.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './red/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/red/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/red/install.ts
index 8b28ea8..27199dc 100644
--- a/src/theme/light.ts
+++ b/src/theme/red/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import redTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('red', redTheme);
+}
diff --git a/src/theme/red/theme.ts b/src/theme/red/theme.ts
new file mode 100644
index 0000000..936138f
--- /dev/null
+++ b/src/theme/red/theme.ts
@@ -0,0 +1,197 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#d8361b',
+ '#f16b4c',
+ '#f7b4a9',
+ '#d26666',
+ '#99311c',
+ '#c42703',
+ '#d07e75'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#d8361b'
+ }
+ },
+
+ visualMap: {
+ color: ['#d8361b', '#ffd2d2']
+ },
+
+ dataRange: {
+ color: ['#bd0707', '#ffd2d2']
+ },
+
+ toolbox: {
+ color: ['#d8361b', '#d8361b', '#d8361b', '#d8361b']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#d8361b',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#d8361b'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(216,54,27,0.2)', // Fill the color
+ handleColor: '#d8361b' // Handle color
+ },
+
+ grid: {
+ borderWidth: 0
+ },
+
+ categoryAxis: {
+ axisLine: {
+ // Coordinate axis
+ lineStyle: {
+ // Property 'lineStyle' controls line styles
+ color: '#d8361b'
+ }
+ },
+ splitLine: {
+ // Separation line
+ lineStyle: {
+ // Property 'lineStyle' (see lineStyle) controls line styles
+ color: ['#eee']
+ }
+ }
+ },
+
+ valueAxis: {
+ axisLine: {
+ // Coordinate axis
+ lineStyle: {
+ // Property 'lineStyle' controls line styles
+ color: '#d8361b'
+ }
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
+ }
+ },
+ splitLine: {
+ // Separation line
+ lineStyle: {
+ // Property 'lineStyle' (see lineStyle) controls line styles
+ color: ['#eee']
+ }
+ }
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#d8361b'
+ },
+ controlStyle: {
+ color: '#d8361b',
+ borderColor: '#d8361b'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#f16b4c',
+ color0: '#f7b4a9'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#d8361b',
+ color0: '#d26666'
+ },
+ areaStyle: {
+ color: '#d8361b',
+ color0: '#d07e75'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#d07e75'
+ },
+ linkStyle: {
+ color: '#d8361b'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#d07e75',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#d8361b'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#d8361b'
+ },
+ areaStyle: {
+ color: '#d07e75'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#f16b4c'],
+ [0.8, '#d8361b'],
+ [1, '#99311c']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/roma.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/roma.ts
index 8b28ea8..78caa04 100644
--- a/src/theme/light.ts
+++ b/src/theme/roma.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './roma/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/roma/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/roma/install.ts
index 8b28ea8..5cab69c 100644
--- a/src/theme/light.ts
+++ b/src/theme/roma/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import romaTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('roma', romaTheme);
+}
diff --git a/src/theme/roma/theme.ts b/src/theme/roma/theme.ts
new file mode 100644
index 0000000..611f1c5
--- /dev/null
+++ b/src/theme/roma/theme.ts
@@ -0,0 +1,91 @@
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+const colorPalette = [
+ '#E01F54',
+ '#001852',
+ '#f5e8c8',
+ '#b8d2c7',
+ '#c6b38e',
+ '#a4d8c2',
+ '#f3d999',
+ '#d3758f',
+ '#dcc392',
+ '#2e4783',
+ '#82b6e9',
+ '#ff6347',
+ '#a092f1',
+ '#0a915d',
+ '#eaf889',
+ '#6699FF',
+ '#ff6666',
+ '#3cb371',
+ '#d5b158',
+ '#38b6b6'
+];
+
+export default {
+ color: colorPalette,
+
+ visualMap: {
+ color: ['#e01f54', '#e7dbc3'],
+ textStyle: {
+ color: '#333'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#e01f54',
+ color0: '#001852'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#f5e8c8',
+ color0: '#b8d2c7'
+ },
+ areaStyle: {
+ color: '#a4d8c2',
+ color0: '#f3d999'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#a4d8c2'
+ },
+ linkStyle: {
+ color: '#f3d999'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#E01F54'],
+ [0.8, '#b8d2c7'],
+ [1, '#001852']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/royal.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/royal.ts
index 8b28ea8..ee82538 100644
--- a/src/theme/light.ts
+++ b/src/theme/royal.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './royal/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/royal/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/royal/install.ts
index 8b28ea8..4935ffd 100644
--- a/src/theme/light.ts
+++ b/src/theme/royal/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import royalTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('royal', royalTheme);
+}
diff --git a/src/theme/royal/theme.ts b/src/theme/royal/theme.ts
new file mode 100644
index 0000000..c4a61f8
--- /dev/null
+++ b/src/theme/royal/theme.ts
@@ -0,0 +1,135 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#3f7ea6',
+ '#993366',
+ '#408000',
+ '#8c6f56',
+ '#a65149',
+ '#731f17',
+ '#adc2eb',
+ '#d9c3b0'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#3f7ea6'
+ }
+ },
+
+ visualMap: {
+ color: ['#3f7ea6', '#993366']
+ },
+
+ toolbox: {
+ color: ['#3f7ea6', '#3f7ea6', '#3f7ea6', '#3f7ea6']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#3f7ea6',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#3f7ea6'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+ handleColor: '#3f7ea6' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#3f7ea6'
+ },
+ controlStyle: {
+ color: '#3f7ea6',
+ borderColor: '#3f7ea6'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#d9c3b0',
+ color0: '#8c6f56'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#731f17',
+ color0: '#a65149'
+ },
+ areaStyle: {
+ color: '#3f7ea6',
+ color0: '#993366'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#d9c3b0'
+ },
+ areaStyle: {
+ color: '#ddd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#993366'
+ },
+ linkStyle: {
+ color: '#3f7ea6'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#d9c3b0'],
+ [0.8, '#3f7ea6'],
+ [1, '#731f17']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/sakura.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/sakura.ts
index 8b28ea8..6d9c244 100644
--- a/src/theme/light.ts
+++ b/src/theme/sakura.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './sakura/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/sakura/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/sakura/install.ts
index 8b28ea8..975ef5b 100644
--- a/src/theme/light.ts
+++ b/src/theme/sakura/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import sakuraTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('sakura', sakuraTheme);
+}
diff --git a/src/theme/sakura/theme.ts b/src/theme/sakura/theme.ts
new file mode 100644
index 0000000..2306947
--- /dev/null
+++ b/src/theme/sakura/theme.ts
@@ -0,0 +1,112 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#e52c3c',
+ '#f7b1ab',
+ '#fa506c',
+ '#f59288',
+ '#f8c4d8',
+ '#e54f5c',
+ '#f06d5c',
+ '#e54f80',
+ '#f29c9f',
+ '#eeb5b7'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#e52c3c'
+ }
+ },
+
+ visualMap: {
+ color: ['#e52c3c', '#f7b1ab']
+ },
+
+ dataRange: {
+ color: ['#e52c3c', '#f7b1ab']
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#e52c3c',
+ color0: '#f59288'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#e52c3c',
+ color0: '#f59288'
+ },
+ areaStyle: {
+ color: '#fa506c',
+ color0: '#f8c4d8'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#e52c3c',
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ areaStyle: {
+ color: '#ccc'
+ },
+ label: {
+ color: 'rgba(139,69,19,1)',
+ show: false
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#f2385a'
+ },
+ nodeStyle: {
+ brushType: 'both',
+ strokeColor: '#e54f5c'
+ },
+ linkStyle: {
+ color: '#f2385a',
+ strokeColor: '#e54f5c'
+ },
+ label: {
+ color: '#f2385a',
+ show: false
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#e52c3c'],
+ [0.8, '#f7b1ab'],
+ [1, '#fa506c']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/shine.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/shine.ts
index 8b28ea8..0527638 100644
--- a/src/theme/light.ts
+++ b/src/theme/shine.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './shine/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/shine/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/shine/install.ts
index 8b28ea8..a4b3dd9 100644
--- a/src/theme/light.ts
+++ b/src/theme/shine/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import shineTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('shine', shineTheme);
+}
diff --git a/src/theme/shine/theme.ts b/src/theme/shine/theme.ts
new file mode 100644
index 0000000..330b97b
--- /dev/null
+++ b/src/theme/shine/theme.ts
@@ -0,0 +1,151 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied. See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+const colorPalette = [
+ '#c12e34',
+ '#e6b600',
+ '#0098d9',
+ '#2b821d',
+ '#005eaa',
+ '#339ca8',
+ '#cda819',
+ '#32a487'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal'
+ }
+ },
+
+ visualMap: {
+ color: ['#1790cf', '#a2d4e6']
+ },
+
+ toolbox: {
+ iconStyle: {
+ normal: {
+ borderColor: '#06467c'
+ }
+ }
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.6)'
+ },
+
+ dataZoom: {
+ dataBackgroundColor: '#dedede',
+ fillerColor: 'rgba(154,217,247,0.2)',
+ handleColor: '#005eaa'
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#005eaa'
+ },
+ controlStyle: {
+ color: '#005eaa',
+ borderColor: '#005eaa'
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#c12e34',
+ color0: '#2b821d'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#c12e34',
+ color0: '#2b821d'
+ },
+ areaStyle: {
+ color: '#e6b600',
+ color0: '#005eaa'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#e6b600'
+ },
+ linkStyle: {
+ color: '#005eaa'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#f2385a',
+ borderColor: '#eee',
+ areaColor: '#ddd'
+ },
+ areaStyle: {
+ color: '#ddd'
+ },
+ label: {
+ color: '#c12e34'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: [
+ [0.2, '#2b821d'],
+ [0.8, '#005eaa'],
+ [1, '#c12e34']
+ ],
+ width: 5
+ }
+ },
+ axisTick: {
+ splitNumber: 10,
+ length: 8,
+ lineStyle: {
+ color: 'auto'
+ }
+ },
+ axisLabel: {
+ color: 'auto'
+ },
+ splitLine: {
+ length: 12,
+ lineStyle: {
+ color: 'auto'
+ }
+ },
+ pointer: {
+ length: '90%',
+ width: 3,
+ color: 'auto'
+ },
+ title: {
+ color: '#333'
+ },
+ detail: {
+ color: 'auto'
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/tech-blue.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/tech-blue.ts
index 8b28ea8..fb2e051 100644
--- a/src/theme/light.ts
+++ b/src/theme/tech-blue.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './tech-blue/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/tech-blue/install.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/tech-blue/install.ts
index 8b28ea8..5a56185 100644
--- a/src/theme/light.ts
+++ b/src/theme/tech-blue/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import techBlueTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('tech-blue', techBlueTheme);
+}
diff --git a/src/theme/tech-blue/theme.ts b/src/theme/tech-blue/theme.ts
new file mode 100644
index 0000000..139a92c
--- /dev/null
+++ b/src/theme/tech-blue/theme.ts
@@ -0,0 +1,152 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#4d4d4d',
+ '#3a5897',
+ '#007bb6',
+ '#7094db',
+ '#0080ff',
+ '#b3b3ff',
+ '#00bdec',
+ '#33ccff',
+ '#ccddff',
+ '#eeeeee'
+];
+
+export default {
+ color: colorPalette,
+
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#00aecd'
+ }
+ },
+
+ visualMap: {
+ color: ['#00aecd', '#a2d4e6']
+ },
+
+ toolbox: {
+ color: ['#00aecd', '#00aecd', '#00aecd', '#00aecd']
+ },
+
+ tooltip: {
+ backgroundColor: 'rgba(0,0,0,0.5)',
+ axisPointer: {
+ // Axis indicator, coordinate trigger effective
+ type: 'line', // The default is a straight line： 'line' | 'shadow'
+ lineStyle: {
+ // Straight line indicator style settings
+ color: '#00aecd',
+ type: 'dashed'
+ },
+ crossStyle: {
+ color: '#00aecd'
+ },
+ shadowStyle: {
+ // Shadow indicator style settings
+ color: 'rgba(200,200,200,0.3)'
+ }
+ }
+ },
+
+ // Area scaling controller
+ dataZoom: {
+ dataBackgroundColor: '#eee', // Data background color
+ fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+ handleColor: '#00aecd' // Handle color
+ },
+
+ timeline: {
+ lineStyle: {
+ color: '#00aecd'
+ },
+ controlStyle: {
+ normal: { color: '#00aecd' },
+ emphasis: { color: '#00aecd' }
+ }
+ },
+
+ candlestick: {
+ itemStyle: {
+ color: '#ddd',
+ color0: '#eee'
+ },
+ lineStyle: {
+ width: 1,
+ color: '#33ccff',
+ color0: '#1bb4cf'
+ },
+ areaStyle: {
+ color: '#7094db',
+ color0: '#33ccff'
+ }
+ },
+
+ chord: {
+ padding: 4,
+ itemStyle: {
+ color: '#7094db',
+ borderWidth: 1,
+ borderColor: 'rgba(128, 128, 128, 0.5)'
+ },
+ lineStyle: {
+ color: 'rgba(128, 128, 128, 0.5)'
+ },
+ areaStyle: {
+ color: '#33ccff'
+ }
+ },
+
+ graph: {
+ itemStyle: {
+ color: '#7094db'
+ },
+ linkStyle: {
+ color: '#33ccff'
+ }
+ },
+
+ map: {
+ itemStyle: {
+ color: '#7094db'
+ },
+ areaStyle: {
+ color: '#33ccff'
+ },
+ label: {
+ color: '#ddd'
+ }
+ },
+
+ gauge: {
+ axisLine: {
+ lineStyle: {
+ color: [
+ [0.2, '#dddddd'],
+ [0.8, '#00aecd'],
+ [1, '#33ccff']
+ ],
+ width: 8
+ }
+ }
+ }
+};
diff --git a/src/theme/light.ts b/src/theme/vintage.ts
similarity index 62%
copy from src/theme/light.ts
copy to src/theme/vintage.ts
index 8b28ea8..5b56584 100644
--- a/src/theme/light.ts
+++ b/src/theme/vintage.ts
@@ -17,19 +17,7 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import { use } from '../extension';
+import { install } from './vintage/install';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+use(install);
diff --git a/src/theme/light.ts b/src/theme/vintage/install.ts
similarity index 62%
rename from src/theme/light.ts
rename to src/theme/vintage/install.ts
index 8b28ea8..7238c46 100644
--- a/src/theme/light.ts
+++ b/src/theme/vintage/install.ts
@@ -17,19 +17,9 @@
* under the License.
*/
-const colorAll = [
- '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
- '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
-];
+import type { EChartsExtensionInstallRegisters } from '../../extension';
+import vintageTheme from './theme';
-export default {
-
- color: colorAll,
-
- colorLayer: [
- ['#37A2DA', '#ffd85c', '#fd7b5f'],
- ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
- ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
- colorAll
- ]
-};
\ No newline at end of file
+export function install(registers: EChartsExtensionInstallRegisters) {
+ registers.registerTheme('vintage', vintageTheme);
+}
diff --git a/src/theme/vintage/theme.ts b/src/theme/vintage/theme.ts
new file mode 100644
index 0000000..2a8aecd
--- /dev/null
+++ b/src/theme/vintage/theme.ts
@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const colorPalette = [
+ '#d87c7c',
+ '#919e8b',
+ '#d7ab82',
+ '#6e7074',
+ '#61a0a8',
+ '#efa18d',
+ '#787464',
+ '#cc7e63',
+ '#724e58',
+ '#4b565b'
+];
+
+export default {
+ color: colorPalette,
+ backgroundColor: '#fef8ef',
+ graph: {
+ color: colorPalette
+ }
+};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org