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:52 UTC
[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.
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