From 99366efc8cdbe2ffa3f8d428d1b432ada0f63bf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Mon, 16 Jun 2025 16:10:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=9F=B1=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GoVChart/index.vue             |  2 +-
 .../Pages/VChartItemSetting/Axis.vue          |  6 +-
 .../Pages/VChartItemSetting/Bar.vue           | 52 +++++++++++++++++
 .../Pages/VChartItemSetting/Label.vue         | 38 ++++++++++++
 .../Pages/VChartItemSetting/index.ts          |  4 +-
 .../chartConfiguration/vcharts/label.ts       | 58 +++++++++++++++++++
 .../VChart/Bars/VChartBarCommon/config.ts     |  2 +-
 .../VChart/Bars/VChartBarCommon/config.vue    |  6 +-
 .../VChart/Bars/VChartBarCrossrange/config.ts | 13 ++++-
 .../Bars/VChartBarCrossrange/config.vue       |  6 +-
 .../VChart/Bars/VChartBarStack/config.ts      | 12 +++-
 .../VChart/Bars/VChartBarStack/config.vue     |  6 +-
 .../VChart/Pies/VChartPie/config.vue          |  8 +--
 src/settings/vchartThemes/global.theme.json   | 26 ++++++++-
 14 files changed, 221 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Pages/VChartItemSetting/Bar.vue
 create mode 100644 src/components/Pages/VChartItemSetting/Label.vue

diff --git a/src/components/GoVChart/index.vue b/src/components/GoVChart/index.vue
index 5d28ff84..1611105f 100644
--- a/src/components/GoVChart/index.vue
+++ b/src/components/GoVChart/index.vue
@@ -211,7 +211,7 @@ const createOrUpdateChart = (
     const spec = transformHandler[chartProps.category || '']?.(chartProps)
     chart.updateSpec({ ...spec, data: toRaw(chartProps.dataset), dataset: undefined }, false, undefined, {
       change: false,
-      reMake: false,
+      reMake: true,
       reAnimate: true
     })
     return true
diff --git a/src/components/Pages/VChartItemSetting/Axis.vue b/src/components/Pages/VChartItemSetting/Axis.vue
index 76f1135f..daf2e1b4 100644
--- a/src/components/Pages/VChartItemSetting/Axis.vue
+++ b/src/components/Pages/VChartItemSetting/Axis.vue
@@ -15,15 +15,15 @@
       <FontStyle :style="toRefs(axis.unit.style)"></FontStyle>
     </setting-item-box>
     <setting-item-box name="轴标签">
-      <setting-item name="可见性">
+      <setting-item v-if="axis.label" name="可见性">
         <n-space>
           <n-switch v-model:value="axis.label.visible" size="small"></n-switch>
         </n-space>
       </setting-item>
-      <setting-item name="角度">
+      <setting-item v-if="axis.label" name="角度">
         <n-input-number v-model:value="axis.label.style.angle" :min="0" :max="360" size="small" />
       </setting-item>
-      <FontStyle :style="toRefs(axis.label.style)"></FontStyle>
+      <FontStyle v-if="axis.label" :style="toRefs(axis.label.style)"></FontStyle>
     </setting-item-box>
     <setting-item-box name="轴标题">
       <setting-item name="可见性">
diff --git a/src/components/Pages/VChartItemSetting/Bar.vue b/src/components/Pages/VChartItemSetting/Bar.vue
new file mode 100644
index 00000000..f031fb2e
--- /dev/null
+++ b/src/components/Pages/VChartItemSetting/Bar.vue
@@ -0,0 +1,52 @@
+<template>
+  <template v-if="optionData.bar">
+    <collapse-item name="柱体">
+      <SettingItemBox name="样式">
+        <setting-item v-if="'width' in optionData.bar.style" name="宽度">
+          <n-input-number v-model:value="optionData.bar.style.width" size="small" :min="1"></n-input-number>
+        </setting-item>
+        <setting-item v-if="'height' in (optionData.bar.style as any)" name="高度">
+          <n-input-number v-model:value="(optionData.bar.style as any).height" size="small" :min="1"></n-input-number>
+        </setting-item>
+        <setting-item name="圆角大小">
+          <n-input-number v-model:value="optionData.bar.style.cornerRadius" size="small" :min="0"></n-input-number>
+        </setting-item>
+        <setting-item name="填充透明度">
+          <n-input-number
+            v-model:value="optionData.bar.style.fillOpacity"
+            :step="0.1"
+            size="small"
+            :min="0"
+            :max="1"
+          ></n-input-number>
+        </setting-item>
+        <setting-item name="整体透明度">
+          <n-input-number
+            v-model:value="optionData.bar.style.opacity"
+            :step="0.1"
+            size="small"
+            :min="0"
+            :max="1"
+          ></n-input-number>
+        </setting-item>
+        <setting-item name="纹理类型">
+          <n-select v-model:value="optionData.bar.style.texture" :options="styleConfig.texture" size="small"></n-select>
+        </setting-item>
+      </SettingItemBox>
+    </collapse-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { styleConfig } from '@/packages/chartConfiguration/vcharts/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/Pages/VChartItemSetting/Label.vue b/src/components/Pages/VChartItemSetting/Label.vue
new file mode 100644
index 00000000..f1df09da
--- /dev/null
+++ b/src/components/Pages/VChartItemSetting/Label.vue
@@ -0,0 +1,38 @@
+<template>
+  <template v-if="optionData.label">
+    <collapse-item name="标签">
+      <template #header>
+        <n-switch v-model:value="optionData.label.visible" size="small"></n-switch>
+      </template>
+
+      <setting-item-box name="布局">
+        <setting-item name="位置">
+          <n-select v-model:value="optionData.label.position" size="small" :options="labelConfig.barPosition" />
+        </setting-item>
+
+        <setting-item name="间距">
+          <n-input-number v-model:value="optionData.label.offset" :min="1" size="small" />
+        </setting-item>
+      </setting-item-box>
+
+      <setting-item-box name="字体">
+        <FontStyle :style="toRefs(optionData.label.style)"></FontStyle>
+      </setting-item-box>
+    </collapse-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { labelConfig } from '@/packages/chartConfiguration/vcharts/index'
+import FontStyle from './common/FontStyle.vue'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/Pages/VChartItemSetting/index.ts b/src/components/Pages/VChartItemSetting/index.ts
index dd8f7f0c..76dcaa44 100644
--- a/src/components/Pages/VChartItemSetting/index.ts
+++ b/src/components/Pages/VChartItemSetting/index.ts
@@ -1,4 +1,6 @@
 import VChartGlobalSetting from './VChartGlobalSetting.vue'
 import Axis from './Axis.vue'
+import Label from './Label.vue'
+import Bar from './Bar.vue'
 
-export { VChartGlobalSetting, Axis }
+export { VChartGlobalSetting, Axis, Label, Bar }
diff --git a/src/packages/chartConfiguration/vcharts/label.ts b/src/packages/chartConfiguration/vcharts/label.ts
index 0e338162..f7d9ca7f 100644
--- a/src/packages/chartConfiguration/vcharts/label.ts
+++ b/src/packages/chartConfiguration/vcharts/label.ts
@@ -20,5 +20,63 @@ export const labelConfig = {
       label: '内部-居中',
       value: 'inside-center'
     }
+  ],
+  barPosition: [
+    {
+      label: '外部',
+      value: 'outside'
+    },
+    {
+      label: '内部',
+      value: 'inside'
+    },
+    {
+      label: '顶部',
+      value: 'top'
+    },
+    {
+      label: '底部',
+      value: 'bottom'
+    },
+    {
+      label: '左侧',
+      value: 'left'
+    },
+    {
+      label: '右侧',
+      value: 'right'
+    },
+    {
+      label: '内部-顶',
+      value: 'inside-top'
+    },
+    {
+      label: '内部-底',
+      value: 'inside-bottom'
+    },
+    {
+      label: '内部-右',
+      value: 'inside-right'
+    },
+    {
+      label: '内部-左',
+      value: 'inside-left'
+    },
+    {
+      label: '顶部-右',
+      value: 'top-right'
+    },
+    {
+      label: '顶部-左',
+      value: 'top-left'
+    },
+    {
+      label: '底部-右',
+      value: 'bottom-right'
+    },
+    {
+      label: '底部-左',
+      value: 'bottom-left'
+    }
   ]
 }
diff --git a/src/packages/components/VChart/Bars/VChartBarCommon/config.ts b/src/packages/components/VChart/Bars/VChartBarCommon/config.ts
index 1f035e86..c18ba01d 100644
--- a/src/packages/components/VChart/Bars/VChartBarCommon/config.ts
+++ b/src/packages/components/VChart/Bars/VChartBarCommon/config.ts
@@ -7,7 +7,7 @@ import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
 import { ChatCategoryEnum, IBarOption } from '../../index.d'
 import { merge, cloneDeep } from 'lodash'
 
-export const includes = ['legends', 'tooltip']
+export const includes = ['legends', 'tooltip', 'label', 'bar']
 export const option: IBarOption & { dataset?: any } = {
   // 图表配置
   type: 'bar',
diff --git a/src/packages/components/VChart/Bars/VChartBarCommon/config.vue b/src/packages/components/VChart/Bars/VChartBarCommon/config.vue
index 9f15a51a..239a716c 100644
--- a/src/packages/components/VChart/Bars/VChartBarCommon/config.vue
+++ b/src/packages/components/VChart/Bars/VChartBarCommon/config.vue
@@ -3,11 +3,15 @@
   <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
   <Axis :axis="optionData.xAxis"></Axis>
   <Axis :axis="optionData.yAxis"></Axis>
+  <!-- 标签 -->
+  <Label :optionData="optionData"></Label>
+  <!-- 柱体 -->
+  <Bar :optionData="optionData"></Bar>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { VChartGlobalSetting, Axis, Label, Bar } from '@/components/Pages/VChartItemSetting'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
 
 defineProps({
diff --git a/src/packages/components/VChart/Bars/VChartBarCrossrange/config.ts b/src/packages/components/VChart/Bars/VChartBarCrossrange/config.ts
index 3cfab264..60d1adf9 100644
--- a/src/packages/components/VChart/Bars/VChartBarCrossrange/config.ts
+++ b/src/packages/components/VChart/Bars/VChartBarCrossrange/config.ts
@@ -6,8 +6,16 @@ import data from './data.json'
 import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
 import { ChatCategoryEnum, IBarOption } from '../../index.d'
 import { merge, cloneDeep } from 'lodash'
+import { vChartGlobalThemeJson } from '@/settings/vchartThemes'
 
-export const includes = ['legends', 'tooltip']
+const barConfig = merge(cloneDeep(vChartGlobalThemeJson.bar), {
+  style: {
+    height: 10
+  }
+})
+delete (barConfig.style as { width?: any }).width
+
+export const includes = ['legends', 'tooltip', 'label']
 export const option: IBarOption & { dataset?: any } = {
   // 图表配置
   type: 'bar',
@@ -50,6 +58,9 @@ export const option: IBarOption & { dataset?: any } = {
         ...axisThemeJson.grid.style
       }
     }
+  },
+  bar: {
+    ...barConfig
   }
 }
 
diff --git a/src/packages/components/VChart/Bars/VChartBarCrossrange/config.vue b/src/packages/components/VChart/Bars/VChartBarCrossrange/config.vue
index 9f15a51a..239a716c 100644
--- a/src/packages/components/VChart/Bars/VChartBarCrossrange/config.vue
+++ b/src/packages/components/VChart/Bars/VChartBarCrossrange/config.vue
@@ -3,11 +3,15 @@
   <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
   <Axis :axis="optionData.xAxis"></Axis>
   <Axis :axis="optionData.yAxis"></Axis>
+  <!-- 标签 -->
+  <Label :optionData="optionData"></Label>
+  <!-- 柱体 -->
+  <Bar :optionData="optionData"></Bar>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { VChartGlobalSetting, Axis, Label, Bar } from '@/components/Pages/VChartItemSetting'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
 
 defineProps({
diff --git a/src/packages/components/VChart/Bars/VChartBarStack/config.ts b/src/packages/components/VChart/Bars/VChartBarStack/config.ts
index dbfb8451..45b98154 100644
--- a/src/packages/components/VChart/Bars/VChartBarStack/config.ts
+++ b/src/packages/components/VChart/Bars/VChartBarStack/config.ts
@@ -6,8 +6,15 @@ import data from './data.json'
 import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
 import { ChatCategoryEnum, IBarOption } from '../../index.d'
 import { merge, cloneDeep } from 'lodash'
+import { vChartGlobalThemeJson } from '@/settings/vchartThemes'
 
-export const includes = ['legends', 'tooltip']
+const barConfig = merge(cloneDeep(vChartGlobalThemeJson.bar), {
+  style: {
+    width: 15
+  }
+})
+
+export const includes = ['legends', 'tooltip', 'label']
 export const option: IBarOption & { dataset?: any } = {
   // 图表配置
   type: 'bar',
@@ -49,6 +56,9 @@ export const option: IBarOption & { dataset?: any } = {
         ...axisThemeJson.grid.style
       }
     }
+  },
+  bar: {
+    ...barConfig
   }
 }
 
diff --git a/src/packages/components/VChart/Bars/VChartBarStack/config.vue b/src/packages/components/VChart/Bars/VChartBarStack/config.vue
index 9f15a51a..239a716c 100644
--- a/src/packages/components/VChart/Bars/VChartBarStack/config.vue
+++ b/src/packages/components/VChart/Bars/VChartBarStack/config.vue
@@ -3,11 +3,15 @@
   <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
   <Axis :axis="optionData.xAxis"></Axis>
   <Axis :axis="optionData.yAxis"></Axis>
+  <!-- 标签 -->
+  <Label :optionData="optionData"></Label>
+  <!-- 柱体 -->
+  <Bar :optionData="optionData"></Bar>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
+import { VChartGlobalSetting, Axis, Label, Bar } from '@/components/Pages/VChartItemSetting'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
 
 defineProps({
diff --git a/src/packages/components/VChart/Pies/VChartPie/config.vue b/src/packages/components/VChart/Pies/VChartPie/config.vue
index b037ed18..073f4010 100644
--- a/src/packages/components/VChart/Pies/VChartPie/config.vue
+++ b/src/packages/components/VChart/Pies/VChartPie/config.vue
@@ -25,7 +25,7 @@
         <n-input v-model:value="optionData.centerY" :step="1" :min="0" size="small"></n-input>
       </setting-item>
     </SettingItemBox>
-    <SettingItemBox name="标签">
+    <SettingItemBox name="标签" v-if="optionData.label">
       <SettingItem>
         <n-space>
           <n-switch v-model:value="optionData.label.visible" size="small"></n-switch>
@@ -45,11 +45,7 @@
     </SettingItemBox>
     <SettingItemBox name="分段样式">
       <setting-item name="纹理类型">
-        <n-select
-          v-model:value="optionData.pie.style.texture"
-          :options="styleConfig.texture"
-          size="small"
-        ></n-select>
+        <n-select v-model:value="optionData.pie.style.texture" :options="styleConfig.texture" size="small"></n-select>
       </setting-item>
       <setting-item name="圆角大小">
         <n-input-number v-model:value="optionData.pie.style.cornerRadius" size="small" :min="0"></n-input-number>
diff --git a/src/settings/vchartThemes/global.theme.json b/src/settings/vchartThemes/global.theme.json
index 7d76557e..dd1ff1bf 100644
--- a/src/settings/vchartThemes/global.theme.json
+++ b/src/settings/vchartThemes/global.theme.json
@@ -74,5 +74,29 @@
       },
       "spaceRow": 10
     }
+  },
+  "label": {
+    "visible": false,
+    "position": "outside",
+    "offset": 5,
+    "type": "text",
+    "style": {
+      "fontSize": 12,
+      "fill": "#B9B8CE",
+      "fontFamily": "SimSun",
+      "fontWeight": "normal",
+      "angle": 0,
+      "dx": 0,
+      "dy": 0
+    }
+  },
+  "bar": {
+    "style": {
+      "width": 10,
+      "cornerRadius": 0,
+      "fillOpacity": 1,
+      "opacity": 1,
+      "texture": ""
+    }
   }
-}
+}
\ No newline at end of file