diff --git a/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.ts b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.ts
new file mode 100644
index 0000000..a73730e
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.ts
@@ -0,0 +1,18 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { AirSupplySystemConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+import * as echarts from 'echarts'
+
+export const includes = []
+
+const option = {
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = AirSupplySystemConfig.key
+  public chartConfig = cloneDeep(AirSupplySystemConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}
diff --git a/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.vue b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.vue
new file mode 100644
index 0000000..9bcaaeb
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>你好</div>
+</template>
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>
diff --git a/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/data.json b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/data.json
new file mode 100644
index 0000000..d85cca9
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/data.json
@@ -0,0 +1,57 @@
+{
+  "dimensions": [
+    "month",
+    "value"
+  ],
+  "source": [
+    {
+      "month": "1月",
+      "value": 88
+    },
+    {
+      "month": "2月",
+      "value": 54
+    },
+    {
+      "month": "3月",
+      "value": 66
+    },
+    {
+      "month": "4月",
+      "value": 54
+    },
+    {
+      "month": "5月",
+      "value": 89
+    },
+    {
+      "month": "6月",
+      "value": 67
+    },
+    {
+      "month": "7月",
+      "value": 54
+    },
+    {
+      "month": "8月",
+      "value": 89
+    },
+    {
+      "month": "9月",
+      "value": 54
+    },
+    {
+      "month": "10月",
+      "value": 89
+    },
+    {
+      "month": "11月",
+      "value": 54
+    },
+    {
+      "month": "12月",
+      "value": 67
+    }
+  ],
+  "unit": "万kwh"
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.ts b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.ts
new file mode 100644
index 0000000..548e3d8
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const AirSupplySystemConfig: ConfigType = {
+  key: 'AirSupplySystem',
+  chartKey: 'VAirSupplySystem',
+  conKey: 'VCAirSupplySystem',
+  title: '供风系统',
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'AirSupplySystem.png'
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.vue b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.vue
new file mode 100644
index 0000000..4bd9c15
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.vue
@@ -0,0 +1,250 @@
+<template>
+  <div class="go-energy-box">
+    <div class="content">
+      <!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+        replaceMerge: replaceMergeArr
+      }" autoresize>
+      </v-chart> -->
+      <v-chart :option="option" autosize></v-chart>
+    </div>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, onMounted, ref } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import * as echarts from 'echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import { TitleComponent, GridComponent } from 'echarts/components'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import dataJson from './data.json'
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([
+  CanvasRenderer,
+  BarChart,
+  TitleComponent,
+  GridComponent
+])
+
+const replaceMergeArr = ref<string[]>([])
+
+// const option = computed(() => {
+//   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+// })
+
+const option = {
+  // 添加标题配置
+  title: {
+    text: '单位：' + dataJson.unit,
+    left: '3%',
+    top: '3%',
+    textStyle: {
+      fontSize: 12,
+      color: 'rgba(255, 255, 255, 0.7)',
+      fontWeight: 'normal'
+    }
+  },
+  // 提示框配置
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    },
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderColor: '#00ffff',
+    textStyle: {
+      color: '#ffffff'
+    }
+  },
+  dataset: dataJson,
+  // 网格配置
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '15%',
+    containLabel: true
+  },
+
+  // X轴配置
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    // 
+    axisLabel: {
+      color: '#80b0c4',
+      interval: 0,
+      fontSize: 9,
+      margin: 20
+    }
+
+  },
+
+  // Y轴配置
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 25,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'solid'
+      }
+    }
+  },
+
+  // 数据系列配置
+  series: [{
+    name: '左侧',
+    tooltip: {
+      show: false
+    },
+    type: 'bar',
+    barWidth: 7,
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+          offset: 0,
+          color: "rgba(26,102,255,0)" // 0% 处的颜色
+        }, {
+          offset: 1,
+          color: "rgba(26,102,255,0.9)", // 100% 处的颜色
+        }], false)
+      }
+    },
+    barGap: 0,
+
+  },
+  {
+    name: '右侧',
+    type: 'bar',
+    barWidth: 7,
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+          offset: 0,
+          color: "rgba(51,153,255,0)" // 0% 处的颜色
+        }, {
+          offset: 1,
+          color: "rgba(26,102,255,1)", // 100% 处的颜色
+        }], false)
+      }
+    },
+    barGap: 0
+  }, {
+    name: '顶部',
+    tooltip: {
+      show: false
+    },
+    type: 'pictorialBar',
+    itemStyle: {
+      borderWidth: 1,
+      borderColor: '#fff',
+      color: '#66B2FF' // 顶部方块的颜色
+    },
+    symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
+    symbolSize: ['13', '7'], // 第一个值控制顶部方形大小
+    symbolOffset: ['-3', '-3'], // 控制顶部放行 左右和上下
+    symbolRotate: -16,
+    symbolPosition: 'end',
+    barGap: 0,
+    z: 3,
+
+  }
+  ],
+
+  // 图形元素配置
+  graphic: [{
+    // 左侧阴影效果
+    type: 'rect',
+    left: 0,
+    top: '15%',
+    width: '25%',
+    bottom: '3%',
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        { offset: 0, color: 'rgba(0, 0, 0, 0.8)' },   // 更强的左侧阴影
+        { offset: 1, color: 'rgba(0, 0, 0, 0)' }
+      ])
+    },
+    z: -1
+  }, {
+    // 底部阴影效果
+    type: 'rect',
+    left: '3%',
+    right: '4%',
+    bottom: '0',
+    height: '10%',
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: 'rgba(0, 0, 0, 0)' },
+        { offset: 1, color: 'rgba(0, 0, 0, 0.6)' }   // 底部阴影
+      ])
+    },
+    z: -1
+  }]
+};
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+
+onMounted(async () => {
+
+})
+
+</script>
+
+<style lang="scss" scoped>
+@include go('energy-box') {
+  width: 100%;
+  height: 100%;
+
+  .content {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/config.ts b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/config.ts
new file mode 100644
index 0000000..0fce35b
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/config.ts
@@ -0,0 +1,183 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { WaterSupplySystemConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+import * as echarts from 'echarts'
+
+export const includes = ['title']
+// 基于准备好的dom，初始化echarts实例
+// var myChart = echarts.init(document.getElementById('main'));
+
+
+const option = {
+  // 提示框配置
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    },
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderColor: '#00ffff',
+    textStyle: {
+      color: '#ffffff'
+    }
+  },
+  dataset: dataJson,
+  // 网格配置
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '15%',
+    containLabel: true
+  },
+
+  // X轴配置
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: '#eee'
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    // 
+    axisLabel: {
+      color: '#80b0c4',
+      interval: 0,
+      fontSize: 9,
+      margin: 20
+    }
+
+  },
+
+  // Y轴配置
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 25,
+    axisLine: {
+      show: false,
+
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'solid'
+      }
+    }
+  },
+
+  // 数据系列配置
+  series: [{
+
+    name: '能源消耗',
+    type: 'bar',
+    itemStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        { offset: 0, color: '#1d7b7b' },    // 更暗的左侧颜色，增强阴影效果
+        { offset: 0.2, color: '#196b6b' },  // 左侧过渡色
+        { offset: 0.7, color: '#00cccc' },  // 中间主色
+        { offset: 0.8, color: '#33dddd' },  // 右侧过渡色
+        { offset: 1, color: '#66ffff' }     // 右侧亮色，增强高光效果
+      ]),
+      // 添加更强的3D效果
+      shadowBlur: 20,
+      shadowColor: 'rgba(0, 0, 0, 0.7)',
+      shadowOffsetX: -5,
+      shadowOffsetY: 5,
+      borderRadius: [0, 0, 6, 6],
+      borderWidth: 0,
+
+    },
+    emphasis: {
+      itemStyle: {
+        shadowColor: 'rgba(0, 255, 255, 0.9)',
+        shadowBlur: 25,
+        shadowOffsetX: -8,
+        shadowOffsetY: 8
+      }
+    },
+    // })),
+
+    barWidth: '40%',
+
+    // 3D圆柱体效果
+    roundCap: true
+  }, {
+    name: '顶部圆',
+    type: 'pictorialBar',
+    z: 3,
+    symbolSize: ['57%', '10'],
+    symbolOffset: [0.1, -5],
+    symbolPosition: "end",
+    itemStyle: {
+      color: "#40ECEC",
+    },
+    emphasis: {
+      itemStyle: {
+        shadowColor: 'rgba(0, 255, 255, 0.8)',
+        shadowBlur: 12
+      }
+    }
+  },
+  ],
+
+  // 图形元素配置
+  graphic: [{
+    // 单位标注
+    type: 'text',
+    left: '3%',
+    top: '3%',
+    style: {
+      text: '单位：' + dataJson.unit,
+      fontSize: 12,
+      fill: 'rgba(255, 255, 255, 0.7)',
+    }
+  }, {
+    // 左侧阴影效果
+    type: 'rect',
+    left: 0,
+    top: '15%',
+    width: '25%',
+    bottom: '3%',
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        { offset: 0, color: 'rgba(0, 0, 0, 0.8)' },   // 更强的左侧阴影
+        { offset: 1, color: 'rgba(0, 0, 0, 0)' }
+      ])
+    },
+    z: -1
+  }, {
+    // 底部阴影效果
+    type: 'rect',
+    left: '3%',
+    right: '4%',
+    bottom: '0',
+    height: '10%',
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: 'rgba(0, 0, 0, 0)' },
+        { offset: 1, color: 'rgba(0, 0, 0, 0.6)' }   // 底部阴影
+      ])
+    },
+    z: -1
+  }]
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = WaterSupplySystemConfig.key
+  public chartConfig = cloneDeep(WaterSupplySystemConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}
diff --git a/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/config.vue b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/config.vue
new file mode 100644
index 0000000..9bcaaeb
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/config.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>你好</div>
+</template>
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>
diff --git a/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/data.json b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/data.json
new file mode 100644
index 0000000..d85cca9
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/data.json
@@ -0,0 +1,57 @@
+{
+  "dimensions": [
+    "month",
+    "value"
+  ],
+  "source": [
+    {
+      "month": "1月",
+      "value": 88
+    },
+    {
+      "month": "2月",
+      "value": 54
+    },
+    {
+      "month": "3月",
+      "value": 66
+    },
+    {
+      "month": "4月",
+      "value": 54
+    },
+    {
+      "month": "5月",
+      "value": 89
+    },
+    {
+      "month": "6月",
+      "value": 67
+    },
+    {
+      "month": "7月",
+      "value": 54
+    },
+    {
+      "month": "8月",
+      "value": 89
+    },
+    {
+      "month": "9月",
+      "value": 54
+    },
+    {
+      "month": "10月",
+      "value": 89
+    },
+    {
+      "month": "11月",
+      "value": 54
+    },
+    {
+      "month": "12月",
+      "value": 67
+    }
+  ],
+  "unit": "万kwh"
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.ts b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.ts
new file mode 100644
index 0000000..b457cb1
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const WaterSupplySystemConfig: ConfigType = {
+  key: 'WaterSupplySystem',
+  chartKey: 'VWaterSupplySystem',
+  conKey: 'VCWaterSupplySystem',
+  title: '供水系统',
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'WaterSupplySystem.png'
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.vue b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.vue
new file mode 100644
index 0000000..25df5c6
--- /dev/null
+++ b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.vue
@@ -0,0 +1,247 @@
+<template>
+  <div class="go-energy-box">
+    <div class="content">
+      <!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+        replaceMerge: replaceMergeArr
+      }" autoresize>
+      </v-chart> -->
+      <v-chart :option="option" autosize></v-chart>
+    </div>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, onMounted, ref } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import * as echarts from 'echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import { TitleComponent, GridComponent } from 'echarts/components'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import dataJson from './data.json'
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([
+  CanvasRenderer,
+  BarChart,
+  TitleComponent,
+  GridComponent
+])
+
+const replaceMergeArr = ref<string[]>([])
+
+// const option = computed(() => {
+//   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+// })
+
+const option = {
+  // 添加标题配置
+  title: {
+    text: '单位：' + dataJson.unit,
+    left: '3%',
+    top: '3%',
+    textStyle: {
+      fontSize: 12,
+      color: 'rgba(255, 255, 255, 0.7)',
+      fontWeight: 'normal'
+    }
+  },
+  // 提示框配置
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    },
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderColor: '#00ffff',
+    textStyle: {
+      color: '#ffffff'
+    }
+  },
+  dataset: dataJson,
+  // 网格配置
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '15%',
+    containLabel: true
+  },
+
+  // X轴配置
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    // 
+    axisLabel: {
+      color: '#80b0c4',
+      interval: 0,
+      fontSize: 9,
+      margin: 20
+    }
+
+  },
+
+  // Y轴配置
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 25,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'solid'
+      }
+    }
+  },
+
+  // 数据系列配置
+  series: [{
+
+    name: '能源消耗',
+    type: 'bar',
+    itemStyle: {
+      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        { offset: 0, color: '#82ffff' },    // 更暗的左侧颜色，增强阴影效果
+        { offset: 0.2, color: '#00bfbf' },  // 左侧过渡色
+        { offset: 0.5, color: '#008f8f' },  // 中间主色
+        { offset: 0.8, color: '#00bfbf' },  // 右侧过渡色
+        { offset: 1, color: '#82ffff' }     // 右侧亮色，增强高光效果
+      ]),
+      opacity: 0.60,
+      // 添加更强的3D效果
+      shadowBlur: 20,
+      shadowColor: 'rgba(0, 0, 0, 0.7)',
+      shadowOffsetX: -5,
+      shadowOffsetY: 5,
+      borderRadius: [0, 0, 4, 4],
+      borderWidth: 0,
+
+    },
+    emphasis: {
+      itemStyle: {
+        shadowColor: 'rgba(0, 255, 255, 0.9)',
+        shadowBlur: 25,
+        shadowOffsetX: -8,
+        shadowOffsetY: 8
+      }
+    },
+    // })),
+
+    barWidth: '45%',
+
+    // 3D圆柱体效果
+    roundCap: false
+  }, {
+    name: '顶部圆',
+    type: 'pictorialBar',
+    z: 3,
+    symbolSize: ['62%', '6'],
+    symbolOffset: [0.1, -3],
+    symbolPosition: "end",
+    itemStyle: {
+      color: "rgba(51, 221, 221, 0.8)",
+    },
+    // opacity: 0.1,
+    emphasis: {
+      itemStyle: {
+        shadowColor: 'rgba(0, 255, 255, 0.8)',
+        shadowBlur: 12
+      }
+    }
+  },
+  ],
+
+  // 图形元素配置
+  graphic: [{
+    // 左侧阴影效果
+    type: 'rect',
+    left: 0,
+    top: '15%',
+    width: '25%',
+    bottom: '3%',
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+        { offset: 0, color: 'rgba(0, 0, 0, 0.8)' },   // 更强的左侧阴影
+        { offset: 1, color: 'rgba(0, 0, 0, 0)' }
+      ])
+    },
+    z: -1
+  }, {
+    // 底部阴影效果
+    type: 'rect',
+    left: '3%',
+    right: '4%',
+    bottom: '0',
+    height: '10%',
+    style: {
+      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: 'rgba(0, 0, 0, 0)' },
+        { offset: 1, color: 'rgba(0, 0, 0, 0.6)' }   // 底部阴影
+      ])
+    },
+    z: -1
+  }]
+};
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+
+onMounted(async () => {
+
+})
+
+</script>
+
+<style lang="scss" scoped>
+@include go('energy-box') {
+  width: 100%;
+  height: 100%;
+
+  .content {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/packages/components/Charts/IntegratedEnergy/index.ts b/src/packages/components/Charts/IntegratedEnergy/index.ts
index 62bb595..4072d5b 100644
--- a/src/packages/components/Charts/IntegratedEnergy/index.ts
+++ b/src/packages/components/Charts/IntegratedEnergy/index.ts
@@ -1,5 +1,7 @@
 import { EnergyOverviewConfig } from "./EnergyOverview"
 import { EnergyConsumptionTrendConfig } from "./EnergyConsumptionTrend"
+import { WaterSupplySystemConfig } from "./WaterSupplySystem"
+import { AirSupplySystemConfig } from './AirSupplySystem'
 export default [
-  EnergyOverviewConfig, EnergyConsumptionTrendConfig
+  EnergyOverviewConfig, EnergyConsumptionTrendConfig, WaterSupplySystemConfig, AirSupplySystemConfig
 ]
\ No newline at end of file