feat: 新增全局样式设置

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeData" :option="option" autoresize />
+  <VChart :theme="themeColor" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
@@ -8,16 +8,22 @@ import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
+import config from './config'
+import merge from 'lodash/merge'
 import {
   GridComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  TitleComponent
 } from 'echarts/components'
-import config from './config'
 
 const props = defineProps({
-  themeData: {
-    type: Object || String,
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
     required: true
   },
   chartData: {
@@ -31,10 +37,11 @@ use([
   BarChart,
   GridComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  TitleComponent
 ])
 
 const option = computed(() => {
-  return props.chartData.option
+  return merge(props.chartData.option, props.themeSetting)
 })
 </script>

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeData" :option="option" autoresize />
+  <VChart :theme="themeColor" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
@@ -8,17 +8,22 @@ import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
+import merge from 'lodash/merge'
+import config from './config'
 import {
   GridComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  TitleComponent
 } from 'echarts/components'
-import config from './config'
 
 const props = defineProps({
-  themeData: {
-    type: Object || String,
-    default: 'dark',
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
     required: true
   },
   chartData: {
@@ -32,11 +37,12 @@ use([
   BarChart,
   GridComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  TitleComponent
 ])
 
 const option = computed(() => {
-  return props.chartData.option
+  return merge(props.chartData.option, props.themeSetting)
 })
 </script>
 

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeData" :option="option" autoresize />
+  <VChart :theme="themeColor" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
@@ -8,17 +8,22 @@ import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
+import config from './config'
+import merge from 'lodash/merge'
 import {
   GridComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  TitleComponent
 } from 'echarts/components'
-import config from './config'
 
 const props = defineProps({
-   themeData: {
-    type: Object || String,
-    default: 'dark',
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
     required: true
   },
   chartData: {
@@ -32,10 +37,11 @@ use([
   LineChart,
   GridComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  TitleComponent
 ])
 
 const option = computed(() => {
-  return props.chartData.option
+  return merge(props.chartData.option, props.themeSetting)
 })
 </script>

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <VChart :theme="themeData" :option="option" autoresize />
+  <VChart :theme="themeColor" :option="option" autoresize />
 </template>
 
 <script setup lang="ts">
@@ -8,17 +8,22 @@ import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
+import merge from 'lodash/merge'
+import config from './config'
 import {
   GridComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  TitleComponent
 } from 'echarts/components'
-import config from './config'
 
 const props = defineProps({
-  themeData: {
-    type: Object || String,
-    default: 'dark',
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
     required: true
   },
   chartData: {
@@ -32,10 +37,11 @@ use([
   PieChart,
   GridComponent,
   TooltipComponent,
-  LegendComponent
+  LegendComponent,
+  TitleComponent
 ])
 
 const option = computed(() => {
-  return props.chartData.option
+  return merge(props.chartData.option, props.themeSetting)
 })
 </script>

src/settings/chartThemes/global.theme.json

@@ -0,0 +1,53 @@
+{
+  "title": {
+    "textStyle": {
+      "color": "#464646"
+    },
+    "subtextStyle": {
+      "color": "#6e7079"
+    }
+  },
+  "xAxis": {
+    "nameTextStyle": {
+      "color": "#B9B8CE"
+    },
+    "axisLine": {
+      "lineStyle": {
+        "color": "#B9B8CE",
+        "width": 1
+      },
+      "onZero": true,
+      "onZeroAxisIndex": null
+    },
+    "splitLine": {
+      "lineStyle": {
+        "color": "#484753",
+        "width": 1
+      }
+    }
+  },
+  "yAxis": {
+    "nameTextStyle": {
+      "color": "#B9B8CE"
+    },
+    "axisLine": {
+      "lineStyle": {
+        "color": "#B9B8CE",
+        "width": 1
+      },
+      "onZero": true,
+      "onZeroAxisIndex": null
+    },
+    "splitLine": {
+      "lineStyle": {
+        "color": "#484753",
+        "width": 1
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#B9B8CE"
+    }
+  }
+}

src/settings/chartThemes/index.ts

@@ -10,6 +10,8 @@ import vintage from './themes/vintage.json'
 import walden from './themes/walden.json'
 import westeros from './themes/westeros.json'
 import wonderland from './themes/wonderland.json'
+// 默认主题详细配置
+import themeJson from './global.theme.json'
 
 export const chartColors = {
   dark,
@@ -26,8 +28,11 @@ export const chartColors = {
   roma,
 }
 
+// 默认主题
 export const defaultTheme = 'dark'
 
+// 主题色列表
+export type ChartColorsNameType = keyof typeof chartColorsName
 export const chartColorsName = {
   dark: '明亮',
   customed: '暗淡',
@@ -43,6 +48,7 @@ export const chartColorsName = {
   roma: '罗马红',
 }
 
+// 主题色列表
 export const chartColorsshow = {
   dark: 'linear-gradient(to right, #4992ff 0%, #7cffb2 100%)',
   customed: 'linear-gradient(to right, #5470c6 0%, #91cc75 100%)',
@@ -57,3 +63,7 @@ export const chartColorsshow = {
   shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)',
   roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)',
 }
+
+// 默认主题详细配置
+export type GlobalThemeJsonType = typeof themeJson
+export const globalThemeJson = themeJson

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -1,5 +1,6 @@
 import { CreateComponentType } from '@/packages/index.d'
 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
+import { ChartColorsNameType, GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 // 编辑画布属性
 export enum EditCanvasTypeEnum {
@@ -38,7 +39,8 @@ export enum EditCanvasConfigEnum {
   BRIGHTNESS = 'brightness',
   CONTRAST = 'contrast',
   UN_OPACITY = 'unOpacity',
-  CHART_THEME = 'chartTheme',
+  CHART_THEME_COLOR = 'chartThemeColor',
+  CHART_THEME_SETTING = 'chartThemeSetting',
   BACKGROUND = 'background',
   BACKGROUND_IAMGE = 'backgroundImage',
   SELECT_COLOR = 'selectColor'
@@ -63,7 +65,9 @@ export interface EditCanvasConfigType {
   [EditCanvasConfigEnum.BACKGROUND]?: string
   [EditCanvasConfigEnum.BACKGROUND_IAMGE]?: string | null
   // 图表主题颜色
-  [EditCanvasConfigEnum.CHART_THEME]: string
+  [EditCanvasConfigEnum.CHART_THEME_COLOR]: ChartColorsNameType
+  // 图表全局配置
+  [EditCanvasConfigEnum.CHART_THEME_SETTING]: GlobalThemeJsonType
   // 图表主题颜色
   [EditCanvasConfigEnum.SELECT_COLOR]: boolean
 }

src/store/modules/chartEditStore/chartEditStore.ts

@@ -3,7 +3,7 @@ import { getUUID, loadingStart, loadingFinish, loadingError } from '@/utils'
 import { CreateComponentType } from '@/packages/index.d'
 import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
-import { defaultTheme } from '@/settings/chartThemes/index'
+import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index'
 // 记录记录
 import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
@@ -38,6 +38,20 @@ export const useChartEditStoreStore = defineStore({
       // 拖拽中
       isDrag: false
     },
+    // 右键菜单
+    rightMenuShow: false,
+    // 鼠标定位
+    mousePosition: {
+      x: 0,
+      y: 0
+    },
+    // 目标图表
+    targetChart: {
+      hoverId: undefined,
+      selectId: undefined
+    },
+    // 记录临时数据（复制等）
+    recordChart: undefined,
     // 画布属性（需存储给后端）
     editCanvasConfig: {
       // 默认宽度
@@ -60,22 +74,10 @@ export const useChartEditStoreStore = defineStore({
       // 是否使用纯颜色
       selectColor: true,
       // chart 主题色
-      chartTheme: defaultTheme || 'dark'
+      chartThemeColor: defaultTheme || 'dark',
+      // 全局配置
+      chartThemeSetting: globalThemeJson
     },
-    // 右键菜单
-    rightMenuShow: false,
-    // 鼠标定位
-    mousePosition: {
-      x: 0,
-      y: 0
-    },
-    // 目标图表
-    targetChart: {
-      hoverId: undefined,
-      selectId: undefined
-    },
-    // 记录临时数据（复制等）
-    recordChart: undefined,
     // 图表数组（需存储给后端）
     componentList: []
   }),

src/views/chart/ContentDetails/components/CanvasPage/components/ChartTheme/index.vue

@@ -34,7 +34,8 @@ import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditSt
 import {
   chartColors,
   chartColorsName,
-  chartColorsshow
+  chartColorsshow,
+  ChartColorsNameType
 } from '@/settings/chartThemes/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import cloneDeep from 'lodash/cloneDeep'
@@ -48,7 +49,7 @@ const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
 const selectName = computed(() => {
-  return chartEditStoreStore.getEditCanvasConfig.chartTheme
+  return chartEditStoreStore.getEditCanvasConfig.chartThemeColor
 })
 
 // 获取用来展示的色号
@@ -56,8 +57,9 @@ const fetchShowColors = (colors: Array<string>) => {
   return cloneDeep(colors).splice(0, 6)
 }
 
-const selectTheme = (theme: string) => {
-  chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME, theme)
+// 设置主体色（在 ContentEdit > List 中进行注入）
+const selectTheme = (theme: ChartColorsNameType) => {
+  chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, theme)
 }
 </script>
 

src/views/chart/ContentDetails/components/CanvasPage/index.vue

@@ -142,7 +142,7 @@ const switchSelectColorLoading = ref(false)
 const globalTabList = [
   {
     key: 'ChartTheme',
-    title: '主题',
+    title: '主题颜色',
     icon: ColorPaletteIcon,
     render: ChartTheme
   },

src/views/chart/ContentEdit/index.vue

@@ -30,7 +30,8 @@
             class="edit-content-chart"
             :is="item.key"
             :chartData="item"
-            :themeData="themeData"
+            :themeSetting="themeSetting"
+            :themeColor="themeColor"
             :style="useSizeStyle(item.attr)"
           />
         </EditShapeBox>
@@ -69,12 +70,16 @@ useLayout()
 const editRangeRef = ref<HTMLElement | null>(null)
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle } = useMouseHandle()
 
-// 主题色注入
-const themeData = computed(() => {
-  const theme = chartEditStore.getEditCanvasConfig.chartTheme
-  if(theme === 'dark') return 'dark'
-  //  @ts-ignore
-  return chartColors[theme]
+// 主题色
+const themeSetting = computed(() => {
+  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
+  return chartThemeSetting
+})
+
+// 配置项
+const themeColor = computed(() => {
+  const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
+  return chartColors[chartThemeColor]
 })
 
 // 键盘事件