feat: vchart 全局主题切换

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()
 

src/packages/components/VChart/Bars/VChartBarCommon/config.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType } from 'vue'
 import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
 

src/packages/components/VChart/Bars/VChartBarStack/config.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
+import { PropType } from 'vue'
 import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
 

src/settings/vchartThemes/index.ts

@@ -6,4 +6,4 @@ export interface vChartGlobalThemeJsonType extends Partial<ThemeJsonType> {
   [T: string]: any
 }
 
-export const vChartGlobalThemeJson = { ...themeJson, dataset: null, renderer: 'svg' as const }
+export const vChartGlobalThemeJson = { ...themeJson, dataset: null }

src/views/chart/ContentConfigurations/components/CanvasPage/components/VChartThemeColor/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <n-flex vertical>
+    <n-card class="theme-item" v-for="item in list" :key="item.value" size="small" @click="selectThemeHandle(item)">
+      {{ item.name }}
+    </n-card>
+  </n-flex>
+  行业模板
+  <n-grid :x-gap="8" :y-gap="8" :cols="2">
+    <n-gi v-for="item in industryList" :key="item.value">
+      <n-card class="theme-item-industry" size="small" @click="selectThemeHandle(item)">
+        {{ item.name }}
+      </n-card>
+    </n-gi>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useVCharts } from '@/hooks'
+
+const vCharts = useVCharts()
+const themeMap = vCharts.getThemeMap()
+const list = ref<
+  Array<{
+    name: string
+    value: keyof typeof themeMap
+    colors: string[]
+  }>
+>([
+  {
+    name: '明亮',
+    value: 'light',
+    colors: []
+  },
+  {
+    name: '暗黑',
+    value: 'dark',
+    colors: []
+  },
+  {
+    name: '火山蓝',
+    value: 'vScreenVolcanoBlue',
+    colors: []
+  },
+  {
+    name: '党建红',
+    value: 'vScreenPartyRed',
+    colors: []
+  },
+  {
+    name: '清新蜡笔',
+    value: 'vScreenClean',
+    colors: []
+  },
+  {
+    name: '郊外',
+    value: 'vScreenOutskirts',
+    colors: []
+  },
+  {
+    name: '汽车蓝橙',
+    value: 'vScreenBlueOrange',
+    colors: []
+  },
+  {
+    name: '金融黄',
+    value: 'vScreenFinanceYellow',
+    colors: []
+  },
+  {
+    name: '文旅青',
+    value: 'vScreenWenLvCyan',
+    colors: []
+  },
+  {
+    name: '电力绿',
+    value: 'vScreenElectricGreen',
+    colors: []
+  },
+  {
+    name: '电商紫',
+    value: 'vScreenECommercePurple',
+    colors: []
+  },
+  {
+    name: '红蓝',
+    value: 'vScreenRedBlue',
+    colors: []
+  }
+])
+
+// 行业色版列表
+const industryList = ref<
+  Array<{
+    name: string
+    value: keyof typeof themeMap
+    colors: string[]
+  }>
+>([
+  {
+    name: '亮-金融行业',
+    value: 'veODesignLightFinance',
+    colors: []
+  },
+  {
+    name: '暗-金融行业',
+    value: 'veODesignDarkFinance',
+    colors: []
+  },
+  {
+    name: '亮-政府行业',
+    value: 'veODesignLightGovernment',
+    colors: []
+  },
+  {
+    name: '暗-政府行业',
+    value: 'veODesignDarkGovernment',
+    colors: []
+  },
+  {
+    name: '亮-消费行业',
+    value: 'veODesignLightConsumer',
+    colors: []
+  },
+  {
+    name: '暗-消费行业',
+    value: 'veODesignDarkConsumer',
+    colors: []
+  },
+  {
+    name: '亮-汽车行业',
+    value: 'veODesignLightAutomobile',
+    colors: []
+  },
+  {
+    name: '暗-汽车行业',
+    value: 'veODesignDarkAutomobile',
+    colors: []
+  },
+  {
+    name: '亮-文旅行业',
+    value: 'veODesignLightCulturalTourism',
+    colors: []
+  },
+  {
+    name: '暗-文旅行业',
+    value: 'veODesignDarkCulturalTourism',
+    colors: []
+  },
+  {
+    name: '亮-医疗行业',
+    value: 'veODesignLightMedical',
+    colors: []
+  },
+  {
+    name: '暗-医疗行业',
+    value: 'veODesignDarkMedical',
+    colors: []
+  },
+  {
+    name: '亮-新能源行业',
+    value: 'veODesignLightNewEnergy',
+    colors: []
+  },
+  {
+    name: '暗-新能源行业',
+    value: 'veODesignDarkNewEnergy',
+    colors: []
+  }
+])
+
+const selectThemeHandle = (item: { name: string; value: keyof typeof themeMap; colors: string[] }) => {
+  vCharts.setTheme(item.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.theme-item {
+  cursor: pointer;
+}
+.theme-item-industry {
+}
+</style>

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