This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/echarts-theme-builder.git
commit 85c6bc361890abbaeac33b6ce95e4fbb1aabf035 Author: Ovilia <[email protected]> AuthorDate: Fri Sep 5 13:57:08 2025 +0800 feat: update theme --- assets/essos.png | Bin 344222 -> 0 bytes build.js | 95 ----------------------------------- src/components/ChartPreviewPanel.vue | 56 +++++++++++++++------ src/components/ThemePanel.vue | 2 +- src/stores/theme.ts | 43 ++++++++++------ 5 files changed, 71 insertions(+), 125 deletions(-) diff --git a/assets/essos.png b/assets/essos.png deleted file mode 100644 index 34db0f5..0000000 Binary files a/assets/essos.png and /dev/null differ diff --git a/build.js b/build.js deleted file mode 100644 index cab2aec..0000000 --- a/build.js +++ /dev/null @@ -1,95 +0,0 @@ -const fs = require('fs'); -const UglifyJS = require('uglify-js'); -const path = require('path'); -const sass = require('sass'); -const copydir = require('copy-dir'); -const config = require('./config/env.asf'); -const fse = require('fs-extra'); - -const htmlTpl = ` -<!-- -AUTOGENERATED. DON'T MODIFY ---> -<!DOCTYPE html> -<html lang="{{lang}}"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> -</head> -<body> -<!-- NOT include bootstrap because echarts-www already has one --> -<link rel="stylesheet" href="https://echarts.apache.org/{{lang}}/js/vendors/[email protected]/css/bootstrap.min.css";> -<script src="https://echarts.apache.org/{{lang}}/js/vendors/[email protected]/dist/jquery.min.js";></script> -<script src="https://echarts.apache.org/{{lang}}/js/vendors/[email protected]/js/bootstrap.min.js";></script> -{{body}} -</body> -</html> -`; - -function build() { - function bundleJS(files) { - const output = []; - for (let filePath of files) { - output.push(fs.readFileSync( - path.resolve(__dirname, filePath), 'utf-8' - )); - } - const outputCode = output.join('\n'); - const result = UglifyJS.minify(outputCode, { - mangle: true - }); - return result.code; - } - - // Bundle sass - const cssResult = sass.compile(path.resolve(__dirname, 'app/styles/main.scss'), { - outputStyle: 'compressed' - }); - - ['en', 'zh'].forEach(function (lang) { - const jsPostfix = lang === 'en' ? '_en' : ''; - fs.writeFileSync(path.resolve(__dirname, `app/${lang}/theme-builder/app.min.js`), bundleJS([ - `app/scripts/components${jsPostfix}.js`, - `app/scripts/options${jsPostfix}.js`, - `app/scripts/main${jsPostfix}.js` - ]), 'utf-8'); - // Write css - fs.writeFileSync(path.resolve(__dirname, `app/${lang}/theme-builder/main.css`), cssResult.css); - - // Build html - fs.writeFileSync( - path.resolve(__dirname, `app/${lang}/index.html`), - htmlTpl - .replace('{{body}}', fs.readFileSync(path.resolve(__dirname, `app/${lang}/body.html`))) - .replace(/{{lang}}/g, lang) - ); - - copydir.sync(path.resolve(__dirname, 'app/themes'), `app/${lang}/theme-builder/themes`); - }); -} - -build(); - -if (process.argv.indexOf('--release') >= 0) { - - if (!fs.existsSync(config.releaseDestDir)) { - throw new Error('echarts-website project not exists'); - } - if (!fs.existsSync(config.ecWWWGeneratedDir.replace('_generated', ''))) { - throw new Error('echarts-www project not exists'); - } - - ['en', 'zh'].forEach(function (lang) { - fse.ensureDirSync(path.join(config.ecWWWGeneratedDir, `${lang}/theme-builder`)); - fse.ensureDirSync(path.join(config.releaseDestDir, `${lang}/theme-builder`)); - - fs.copyFileSync( - path.resolve(__dirname, `app/${lang}/body.html`), - path.join(config.ecWWWGeneratedDir, `${lang}/theme-builder/body.html`) - ); - copydir.sync( - path.resolve(__dirname, `app/${lang}/theme-builder`), - path.join(config.releaseDestDir, `${lang}/theme-builder`) - ); - }); -} diff --git a/src/components/ChartPreviewPanel.vue b/src/components/ChartPreviewPanel.vue index d2ab378..d7ad18e 100644 --- a/src/components/ChartPreviewPanel.vue +++ b/src/components/ChartPreviewPanel.vue @@ -20,7 +20,7 @@ </template> <script setup lang="ts"> -import { ref, onMounted, onUnmounted, nextTick } from 'vue' +import { ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue' import * as echarts from 'echarts' import { getChartConfigs } from '../utils/chartConfigs' import { useThemeStore } from '../stores/theme' @@ -30,12 +30,16 @@ const themeStore = useThemeStore() const chartInstances = ref<ECharts[]>([]) const chartRefs = ref<(HTMLElement | null)[]>([]) -// Always display all charts -const displayedCharts = ref(getChartConfigs(4)) +// Dynamically generate charts based on seriesCnt +const displayedCharts = computed(() => getChartConfigs(themeStore.theme.seriesCnt)) // Set chart ref function setChartRef(el: any, index: number) { if (el) { + // Ensure the array is large enough + while (chartRefs.value.length <= index) { + chartRefs.value.push(null) + } chartRefs.value[index] = el as HTMLElement } } @@ -52,24 +56,37 @@ function initializeCharts() { chartInstances.value.forEach(chart => chart.dispose()) chartInstances.value = [] + // Clear chart refs to ensure they match the new chart count + chartRefs.value = [] + // Register current theme registerCurrentTheme() - // Create new chart instances - displayedCharts.value.forEach((config, index) => { - const container = chartRefs.value[index] - if (container) { - // Initialize chart with theme - const chart = echarts.init(container, 'customized') - chart.setOption(config.option) - chartInstances.value.push(chart) - } + // Wait for DOM to update with new chart count + nextTick(() => { + // Create new chart instances + displayedCharts.value.forEach((config, index) => { + const container = chartRefs.value[index] + if (container) { + // Initialize chart with theme + const chart = echarts.init(container, 'customized') + chart.setOption(config.option) + chartInstances.value.push(chart) + } + }) }) } // Update charts when theme changes function updateCharts() { if (chartInstances.value.length === 0) { + initializeCharts() + return + } + + // If chart count doesn't match, reinitialize + if (chartInstances.value.length !== displayedCharts.value.length) { + initializeCharts() return } @@ -88,11 +105,22 @@ function updateCharts() { chartInstances.value[index] = chart } }) -}// Expose updateCharts method for external calling +} + +// Expose updateCharts method for external calling defineExpose({ updateCharts }) +// Watch for theme changes and automatically update charts +watch(() => themeStore.theme, () => { + if (!themeStore.isPauseChartUpdating.value) { + nextTick(() => { + updateCharts() + }) + } +}, { deep: true }) + // Resize charts when window resizes function handleResize() { chartInstances.value.forEach(chart => chart.resize()) @@ -123,8 +151,6 @@ onUnmounted(() => { justify-content: flex-start; align-items: center; margin-bottom: 20px; - padding-bottom: 15px; - border-bottom: 1px solid #e9ecef; } .preview-header h3 { diff --git a/src/components/ThemePanel.vue b/src/components/ThemePanel.vue index 5d8f067..2fc7085 100644 --- a/src/components/ThemePanel.vue +++ b/src/components/ThemePanel.vue @@ -839,7 +839,6 @@ const handleFileImport = async (event: Event) => { :deep(.van-collapse-item__title) { padding: 10px 16px; background-color: #fff; - color: #1989fa; font-weight: 500; border: none; transition: background-color 0.3s; @@ -896,6 +895,7 @@ const handleFileImport = async (event: Event) => { :deep(.van-checkbox) { font-size: 12px; + min-width: 24px; } :deep(.van-button--small) { diff --git a/src/stores/theme.ts b/src/stores/theme.ts index 4be2c75..91865b4 100644 --- a/src/stores/theme.ts +++ b/src/stores/theme.ts @@ -4,6 +4,21 @@ import { generateEChartsTheme, generateThemeJsFile, generateThemeConfigForDownlo // Predefined themes configuration export const PRE_DEFINED_THEMES: PreDefinedTheme[] = [ + { + name: 'v5', + background: 'rgba(0, 0, 0, 0)', + theme: [ + '#5470c6', + '#91cc75', + '#fac858', + '#ee6666', + '#73c0de', + '#3ba272', + '#fc8452', + '#9a60b4', + '#ea7ccc' + ] + }, { name: 'vintage', background: '#fef8ef', @@ -116,15 +131,15 @@ const createDefaultAxes = () => { type, name: names[i] + ' Axis', axisLineShow: type !== 'value' && type !== 'log', - axisLineColor: '#6E7079', + axisLineColor: '#54555a', axisTickShow: type !== 'value' && type !== 'log', - axisTickColor: '#6E7079', + axisTickColor: '#54555a', axisLabelShow: true, - axisLabelColor: '#6E7079', + axisLabelColor: '#54555a', splitLineShow: type !== 'category' && type !== 'time', - splitLineColor: ['#E0E6F1'], + splitLineColor: ['#dbdee4'], splitAreaShow: false, - splitAreaColor: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'] + splitAreaColor: ['rgba(234,237,245,0.5)', 'rgba(255,255,255,0)'] })) } @@ -139,15 +154,15 @@ export const createDefaultTheme = (): ThemeData => { textColor: '#333', markTextColor: '#eee', color: [ - '#5470c6', - '#91cc75', - '#fac858', - '#ee6666', - '#73c0de', - '#3ba272', - '#fc8452', - '#9a60b4', - '#ea7ccc' + '#5070dd', + '#b6d634', + '#505372', + '#ff994d', + '#0ca8df', + '#ffd10a', + '#fb628b', + '#785db0', + '#3fbe95' ], borderColor: '#ccc', borderWidth: 0, --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
