You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2025/01/21 08:35:15 UTC
(echarts) branch feat/design-token created (now 434499776)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch feat/design-token
in repository https://gitbox.apache.org/repos/asf/echarts.git
at 434499776 feat(theme): dynamically register and set chart theme
This branch includes the following new commits:
new 434499776 feat(theme): dynamically register and set chart theme
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
(echarts) 01/01: feat(theme): dynamically register and set chart theme
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch feat/design-token
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 434499776df1f101b2b6b314174e3228e43f7fb3
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue Jan 21 16:34:25 2025 +0800
feat(theme): dynamically register and set chart theme
---
src/core/echarts.ts | 36 ++++++++++++-------
src/model/Global.ts | 8 +++++
test/theme.html | 100 +++++++++++++++++++++++++++++++++++++++++++++-------
3 files changed, 119 insertions(+), 25 deletions(-)
diff --git a/src/core/echarts.ts b/src/core/echarts.ts
index eb827e288..c87694b44 100644
--- a/src/core/echarts.ts
+++ b/src/core/echarts.ts
@@ -404,11 +404,6 @@ class ECharts extends Eventful<ECEventDefinition> {
opts = opts || {};
- // Get theme by name
- if (isString(theme)) {
- theme = themeStorage[theme] as object;
- }
-
this._dom = dom;
let defaultRenderer = 'canvas';
@@ -459,10 +454,7 @@ class ECharts extends Eventful<ECEventDefinition> {
// Expect 60 fps.
this._throttledZrFlush = throttle(bind(zr.flush, zr), 17);
- theme = clone(theme);
- theme && backwardCompat(theme as ECUnitOption, true);
-
- this._theme = theme;
+ this._updateTheme(theme);
this._locale = createLocaleObject(opts.locale || SYSTEM_LANG);
@@ -693,10 +685,30 @@ class ECharts extends Eventful<ECEventDefinition> {
}
/**
- * @deprecated
+ * Update theme with name or theme option and repaint the chart.
+ * @param theme Theme name or theme option.
*/
- private setTheme(): void {
- deprecateLog('ECharts#setTheme() is DEPRECATED in ECharts 3.0');
+ setTheme(theme: string | ThemeOption): void {
+ this._updateTheme(theme);
+ if (this._model) {
+ this._model.setTheme(this._theme);
+ // Force refresh to apply theme changes
+ updateMethods.prepareAndUpdate.call(this, {
+ type: 'themeChanged'
+ });
+ }
+ }
+
+ private _updateTheme(theme: string | ThemeOption): void {
+ if (isString(theme)) {
+ theme = themeStorage[theme] as object;
+ }
+
+ if (theme) {
+ theme = clone(theme);
+ theme && backwardCompat(theme as ECUnitOption, true);
+ this._theme = theme;
+ }
}
// We don't want developers to use getModel directly.
diff --git a/src/model/Global.ts b/src/model/Global.ts
index 7b2e8a339..b6ffe6e8d 100644
--- a/src/model/Global.ts
+++ b/src/model/Global.ts
@@ -543,6 +543,14 @@ echarts.use([${seriesImportName}]);`);
return option;
}
+ setTheme(theme: object) {
+ this._theme = new Model(theme);
+ // Merge theme with current option directly
+ mergeTheme(this.option, this._theme.option);
+ // Reset to apply theme changes
+ this._resetOption('recreate', null);
+ }
+
getTheme(): Model {
return this._theme;
}
diff --git a/test/theme.html b/test/theme.html
index 50819829a..23943bba2 100644
--- a/test/theme.html
+++ b/test/theme.html
@@ -1,4 +1,3 @@
-
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
@@ -23,28 +22,24 @@ under the License.
<meta charset="utf-8">
<script src="lib/simpleRequire.js"></script>
<script src="lib/config.js"></script>
+ <script src="lib/testHelper.js"></script>
</head>
<body>
<style>
- html, body, #main {
- width: 100%;
- height: 100%;
- margin: 0;
- }
- #main {
+ .chart {
width: 100%;
- background: #fff;
+ height: 400px;
}
</style>
- <div id="main"></div>
+ <div id="main0" class="chart"></div>
+ <div id="main1" class="chart"></div>
<script>
require([
- 'echarts',
- 'theme/dark'
- ], function (echarts, theme) {
+ 'echarts'
+ ], function (echarts) {
- var chart = echarts.init(document.getElementById('main'), 'dark');
+ var chart = echarts.init(document.getElementById('main0'), 'dark');
var xAxisData = [];
var data1 = [];
@@ -147,5 +142,84 @@ under the License.
})
</script>
+
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+ const darkTheme = {
+ backgroundColor: '#333',
+ title: {
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ };
+ echarts.registerTheme('dark', darkTheme);
+
+ var option = {
+ title: {
+ text: 'ECharts example'
+ },
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar'
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Test dynamic theme switching:',
+ 'Click buttons to switch between dark and forest themes',
+ 'The chart style should update **immediately**'
+ ],
+ option: option,
+ height: 300,
+ buttons: [{
+ text: 'Dark',
+ onclick: function () {
+ chart.setTheme('dark');
+ }
+ }, {
+ text: 'Forest',
+ onclick: function () {
+ const forestTheme = {
+ backgroundColor: '#cfc',
+ color: ['#090'],
+ title: {
+ textStyle: {
+ color: '#030'
+ }
+ }
+ };
+ echarts.registerTheme('forest', forestTheme);
+ chart.setTheme('forest');
+ chart.setOption(option);
+ }
+ }, {
+ text: 'River',
+ onclick: function () {
+ const riverTheme = {
+ backgroundColor: '#ccf',
+ color: ['#00f'],
+ title: {
+ textStyle: {
+ color: '#00f'
+ }
+ }
+ };
+ chart.setTheme(riverTheme);
+ }
+ }]
+ });
+ });
+ </script>
</body>
</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org