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 = [