diff --git a/src/hooks/useVCharts.hook.ts b/src/hooks/useVCharts.hook.ts index 3a6dd0f5..eb3264e0 100644 --- a/src/hooks/useVCharts.hook.ts +++ b/src/hooks/useVCharts.hook.ts @@ -1,12 +1,93 @@ import { watch } from 'vue' -import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json' import { VChart, type ITheme } from '@visactor/vchart' +import light from '@visactor/vchart-theme/public/light.json' +import dark from '@visactor/vchart-theme/public/dark.json' +import vScreenVolcanoBlue from '@visactor/vchart-theme/public/vScreenVolcanoBlue.json' +import vScreenClean from '@visactor/vchart-theme/public/vScreenClean.json' +import vScreenOutskirts from '@visactor/vchart-theme/public/vScreenOutskirts.json' +import vScreenBlueOrange from '@visactor/vchart-theme/public/vScreenBlueOrange.json' +import vScreenFinanceYellow from '@visactor/vchart-theme/public/vScreenFinanceYellow.json' +import vScreenWenLvCyan from '@visactor/vchart-theme/public/vScreenWenLvCyan.json' +import vScreenElectricGreen from '@visactor/vchart-theme/public/vScreenElectricGreen.json' +import vScreenECommercePurple from '@visactor/vchart-theme/public/vScreenECommercePurple.json' +import vScreenRedBlue from '@visactor/vchart-theme/public/vScreenRedBlue.json' +import vScreenPartyRed from '@visactor/vchart-theme/public/vScreenPartyRed.json' +// 行业色板 +import veODesignLightFinance from '@visactor/vchart-theme/public/veODesignLightFinance.json' +import veODesignDarkFinance from '@visactor/vchart-theme/public/veODesignDarkFinance.json' + +import veODesignLightGovernment from '@visactor/vchart-theme/public/veODesignLightGovernment.json' +import veODesignDarkGovernment from '@visactor/vchart-theme/public/veODesignDarkGovernment.json' + +import veODesignLightConsumer from '@visactor/vchart-theme/public/veODesignLightConsumer.json' +import veODesignDarkConsumer from '@visactor/vchart-theme/public/veODesignDarkConsumer.json' + +import veODesignLightAutomobile from '@visactor/vchart-theme/public/veODesignLightAutomobile.json' +import veODesignDarkAutomobile from '@visactor/vchart-theme/public/veODesignDarkAutomobile.json' + +import veODesignLightCulturalTourism from '@visactor/vchart-theme/public/veODesignLightCulturalTourism.json' +import veODesignDarkCulturalTourism from '@visactor/vchart-theme/public/veODesignDarkCulturalTourism.json' + +import veODesignLightMedical from '@visactor/vchart-theme/public/veODesignLightMedical.json' +import veODesignDarkMedical from '@visactor/vchart-theme/public/veODesignDarkMedical.json' + +import veODesignLightNewEnergy from '@visactor/vchart-theme/public/veODesignLightNewEnergy.json' +import veODesignDarkNewEnergy from '@visactor/vchart-theme/public/veODesignDarkNewEnergy.json' + const themeMap = { - vScreenVolcanoBlue: vScreenVolcanoBlue + // 明亮 + light: light, + // 暗黑 + dark: dark, + // 火山蓝 + vScreenVolcanoBlue: vScreenVolcanoBlue, + // 党建红 + vScreenPartyRed: vScreenPartyRed, + // 清新蜡笔 + vScreenClean: vScreenClean, + // 郊外 + vScreenOutskirts: vScreenOutskirts, + // 汽车蓝橙 + vScreenBlueOrange: vScreenBlueOrange, + // 金融黄 + vScreenFinanceYellow: vScreenFinanceYellow, + // 文旅青 + vScreenWenLvCyan: vScreenWenLvCyan, + // 电力绿 + vScreenElectricGreen: vScreenElectricGreen, + // 电商紫 + vScreenECommercePurple: vScreenECommercePurple, + // 红蓝 + vScreenRedBlue: vScreenRedBlue, + // 金融行业色板 + veODesignLightFinance: veODesignLightFinance, + veODesignDarkFinance: veODesignDarkFinance, + // 政府行业色板 + veODesignLightGovernment: veODesignLightGovernment, + veODesignDarkGovernment: veODesignDarkGovernment, + // 消费行业色板 + veODesignLightConsumer: veODesignLightConsumer, + veODesignDarkConsumer: veODesignDarkConsumer, + // 汽车行业色板 + veODesignLightAutomobile: veODesignLightAutomobile, + veODesignDarkAutomobile: veODesignDarkAutomobile, + // 文旅行业色板 + veODesignLightCulturalTourism: veODesignLightCulturalTourism, + veODesignDarkCulturalTourism: veODesignDarkCulturalTourism, + // 医疗行业色板 + veODesignLightMedical: veODesignLightMedical, + veODesignDarkMedical: veODesignDarkMedical, + // 新能源行业色板 + veODesignLightNewEnergy: veODesignLightNewEnergy, + veODesignDarkNewEnergy: veODesignDarkNewEnergy } export const useVCharts = () => { + const getThemeMap = () => { + return themeMap + } + // 注册主题(支持自定义主题) const registerTheme = (themeName: keyof typeof themeMap, theme: any) => { VChart.ThemeManager.registerTheme(themeName, (themeMap[themeName] as any) || theme) @@ -53,6 +134,7 @@ export const useVCharts = () => { } return { + getThemeMap, registerTheme, setCurrentTheme, themeExist, @@ -62,7 +144,7 @@ export const useVCharts = () => { } } -// 设置全局的 vCharts 主题 +// 主题初始化 export const useInitVChartsTheme = (chartEditStore: any) => { const vCharts = useVCharts() diff --git a/src/packages/components/VChart/Bars/VChartBarCommon/config.vue b/src/packages/components/VChart/Bars/VChartBarCommon/config.vue index b111a08d..48a2470f 100644 --- a/src/packages/components/VChart/Bars/VChartBarCommon/config.vue +++ b/src/packages/components/VChart/Bars/VChartBarCommon/config.vue @@ -4,7 +4,7 @@ + + diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index f4ac2d24..90496aea 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -150,6 +150,7 @@ const switchSelectColorLoading = ref(false) const selectColorValue = ref(0) const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue')) +const VChartThemeColor = loadAsyncComponent(() => import('./components/VChartThemeColor/index.vue')) // 默认应用类型 const selectColorOptions = [ @@ -166,10 +167,16 @@ const selectColorOptions = [ const globalTabList = [ { key: 'ChartTheme', - title: '主题颜色', + title: '默认主题颜色', icon: ColorPaletteIcon, render: ChartThemeColor - } + }, + { + key: 'VChartTheme', + title: 'VChart主题颜色', + icon: ColorPaletteIcon, + render: VChartThemeColor + }, ] const previewTypeList = [