From 0a292d40e536c7d0dfad9334a1f3c84dac5b1acf Mon Sep 17 00:00:00 2001
From: Free-sss <630042479@qq.com>
Date: Wed, 3 Sep 2025 21:17:52 +0800
Subject: [PATCH] =?UTF-8?q?feat=E3=80=90=E8=83=BD=E6=BA=90=E5=9C=BA?=
 =?UTF-8?q?=E6=99=AF=E3=80=91=EF=BC=9A=E5=AE=8C=E5=96=84=E4=BE=9B=E6=B0=B4?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AirSupplySystem/config.ts                 | 169 +++++++++++-
 .../AirSupplySystem/index.vue                 | 201 ++------------
 .../EnergyConsumptionTrend/config.ts          |   3 +-
 .../EnergyConsumptionTrend/config.vue         |   2 +-
 .../EnergyConsumptionTrend/data.json          |   3 +-
 .../WaterSupplySystem/config.ts               | 249 +++++++++++++-----
 .../WaterSupplySystem/index.vue               | 194 ++------------
 7 files changed, 389 insertions(+), 432 deletions(-)

diff --git a/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.ts b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.ts
index a73730e..09d8dce 100644
--- a/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.ts
+++ b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.ts
@@ -6,8 +6,175 @@ import dataJson from './data.json'
 import * as echarts from 'echarts'
 
 export const includes = []
+const otherOption = {
+  secneID: '',
+  unit: dataJson.unit,
+}
+export const option = {
+  ...otherOption,
+  // 添加标题配置
+  title: {
+    text: '单位：' + otherOption.unit,
+    left: '2%',
+    top: '2%',
+    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
+  },
 
-const option = {
+  // X轴配置
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    // 
+    axisLabel: {
+      color: '#eee',
+      interval: 0,
+      fontSize: 9,
+      margin: 20
+    }
+
+  },
+
+  // Y轴配置
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 25,
+    axisLine: {
+      show: false,
+      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: 'dashed'
+      }
+    }
+  },
+
+  // 数据系列配置
+  series: [{
+    name: '左侧',
+    tooltip: {
+      show: false
+    },
+    type: 'bar',
+    barWidth: 8,
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+          offset: 0,
+          color: "rgba(26,102,255,0)" // 0% 处的颜色
+        }, {
+          offset: 1,
+          color: "#22bef5", // 100% 处的颜色
+        }], false)
+      }
+    },
+    barGap: 0,
+
+  },
+  {
+    name: '右侧',
+    type: 'bar',
+    barWidth: 8,
+    itemStyle: {
+      normal: {
+        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+          offset: 0,
+          color: "rgba(51,153,255,0)" // 0% 处的颜色
+        }, {
+          offset: 1,
+          color: "#22bef5", // 100% 处的颜色
+        }], false)
+      }
+    },
+    barGap: 0
+  }, {
+    name: '顶部',
+    type: 'pictorialBar',
+    symbol: 'diamond',
+    symbolSize: ['16', '9'],
+    symbolPosition: 'end',
+    symbolOffset: ['', '-50%'],
+    itemStyle: {
+      color: '#44D5FC'
+    },
+    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
+  }]
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
diff --git a/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.vue b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.vue
index 4bd9c15..602144e 100644
--- a/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.vue
+++ b/src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.vue
@@ -1,18 +1,17 @@
 <template>
   <div class="go-energy-box">
     <div class="content">
-      <!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+      <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>
+      </v-chart>
     </div>
   </div>
 
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, onMounted, ref } from 'vue'
+import { PropType, computed, onMounted, ref, watch } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import * as echarts from 'echarts'
@@ -24,7 +23,6 @@ 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,
@@ -50,189 +48,30 @@ use([
 
 const replaceMergeArr = ref<string[]>([])
 
-// const option = computed(() => {
-//   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-// })
+const updataUnit = () => {
+  option.value.title.text = '单位：' + option.value.unit;
+}
+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
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    updataUnit();
+    option.value.dataset = newData
   }, {
-    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
-  }]
-};
-
+  immediate: true,
+  deep: false
+}
+)
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   props.chartConfig.option.dataset = newData
 })
 
 onMounted(async () => {
-
+  // 更新显示单位
+  updataUnit();
 })
 
 </script>
diff --git a/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.ts b/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.ts
index fe70cfa..1ecfcb1 100644
--- a/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.ts
+++ b/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.ts
@@ -7,7 +7,8 @@ import * as echarts from 'echarts'
 
 export const includes = []
 const otherOption = {
-  unit: '万kwh',
+  secneID:'',
+  unit: dataJson.unit,
 }
 
 const option = {
diff --git a/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.vue b/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.vue
index 9bcaaeb..4c6f38a 100644
--- a/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.vue
+++ b/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>你好</div>
+  
 </template>
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
diff --git a/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/data.json b/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/data.json
index e5174a7..ddbeeb7 100644
--- a/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/data.json
+++ b/src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/data.json
@@ -52,5 +52,6 @@
       "month": "12月",
       "value": 67
     }
-  ]
+  ],
+    "unit": "万kwh"
 }
\ 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
index 0fce35b..9a0407e 100644
--- a/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/config.ts
+++ b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/config.ts
@@ -6,11 +6,29 @@ 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 = {
+const wid = 12;
+const w1 = Math.sin(Math.PI / 6) * wid; //4
+const w2 = Math.sin(Math.PI / 3) * wid; // 6.8
+const snapHeight = wid / 2;
+const otherOption = {
+  wid, w1, w2, snapHeight,
+  unit: dataJson.unit,
+  secneID:''
+}
+export const option = {
+  ...otherOption,
+  dataset: dataJson,
+  // 添加标题配置
+  title: {
+    text: '单位：' + otherOption.unit,
+    left: '2%',
+    top: '2%',
+    textStyle: {
+      fontSize: 12,
+      color: 'rgba(255, 255, 255, 0.7)',
+      fontWeight: 'normal'
+    }
+  },
   // 提示框配置
   tooltip: {
     trigger: 'axis',
@@ -23,7 +41,6 @@ const option = {
       color: '#ffffff'
     }
   },
-  dataset: dataJson,
   // 网格配置
   grid: {
     left: '3%',
@@ -38,7 +55,8 @@ const option = {
     type: 'category',
     axisLine: {
       lineStyle: {
-        color: '#eee'
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'solid',
       }
     },
     axisTick: {
@@ -46,22 +64,25 @@ const option = {
     },
     // 
     axisLabel: {
-      color: '#80b0c4',
+      color: '#eee',
       interval: 0,
       fontSize: 9,
       margin: 20
-    }
-
+    },
+    z: 1
   },
 
   // Y轴配置
   yAxis: {
+
     type: 'value',
     min: 0,
     interval: 25,
     axisLine: {
       show: false,
-
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
     },
     axisTick: {
       show: false
@@ -75,76 +96,28 @@ const option = {
         color: 'rgba(255, 255, 255, 0.1)',
         type: 'solid'
       }
-    }
+    },
+    z: 0,
   },
 
   // 数据系列配置
   series: [{
-
-    name: '能源消耗',
     type: 'bar',
+    tooltip: {
+      show: false
+    },
     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,
-
+      color: 'transparent',
     },
-    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
-      }
-    }
   },
+  {
+    type: 'custom',
+    renderItem: createRenderItemFunction(wid, w1, w2, snapHeight)
+  }
   ],
 
   // 图形元素配置
   graphic: [{
-    // 单位标注
-    type: 'text',
-    left: '3%',
-    top: '3%',
-    style: {
-      text: '单位：' + dataJson.unit,
-      fontSize: 12,
-      fill: 'rgba(255, 255, 255, 0.7)',
-    }
-  }, {
     // 左侧阴影效果
     type: 'rect',
     left: 0,
@@ -153,7 +126,7 @@ const option = {
     bottom: '3%',
     style: {
       fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-        { offset: 0, color: 'rgba(0, 0, 0, 0.8)' },   // 更强的左侧阴影
+        { offset: 0, color: 'rgba(0, 0, 0, 0.8)' },
         { offset: 1, color: 'rgba(0, 0, 0, 0)' }
       ])
     },
@@ -175,6 +148,142 @@ const option = {
   }]
 };
 
+// 导出 renderItem 函数
+export function createRenderItemFunction(wid: number, w1: number, w2: number, snapHeight: number) {
+  return (params: any, api: any) => {
+    const location = api.coord([api.value(0), api.value(1)]);
+    location[0] = location[0] + wid * 0;
+    const xlocation = api.coord([api.value(0), 0]);
+    xlocation[0] = xlocation[0] + wid * 0;
+
+    return {
+      type: 'group',
+      children: [{
+        type: 'CubeLeft',
+        shape: {
+          api,
+          xValue: api.value(0),
+          yValue: api.value(1),
+          x: location[0],
+          y: location[1],
+          xAxisPoint: xlocation
+        },
+        style: {
+          fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: '#01F0FF'
+          }, {
+            offset: 1,
+            color: '#005559'
+          }])
+        }
+      }, {
+        type: 'CubeRight',
+        shape: {
+          api,
+          xValue: api.value(0),
+          yValue: api.value(1),
+          x: location[0],
+          y: location[1],
+          xAxisPoint: xlocation
+        },
+        style: {
+          fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            offset: 0,
+            color: '#23C9CC'
+          }, {
+            offset: 1,
+            color: '#005559'
+          }])
+        }
+      }, {
+        type: 'CubeTop',
+        shape: {
+          api,
+          xValue: api.value(0),
+          yValue: api.value(1),
+          x: location[0],
+          y: location[1],
+          xAxisPoint: xlocation
+        },
+        style: {
+          fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+            offset: 0,
+            color: '#2BFAFF'
+          }, {
+            offset: 1,
+            color: '#029199'
+          }])
+        }
+      }]
+    }
+  }
+}
+export function createCubeShapes() {
+  const wid = otherOption.wid;
+  const w1 = otherOption.w1;
+  const w2 = otherOption.w2;
+  const snapHeight = otherOption.snapHeight;
+
+  const CubeLeft = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0
+    },
+    buildPath: function (ctx, shape) {
+      const xAxisPoint = shape.xAxisPoint
+      const c0 = [shape.x, shape.y]
+      const c1 = [shape.x - w2, shape.y]
+      const c2 = [shape.x - w2, xAxisPoint[1]]
+      const c3 = [shape.x, xAxisPoint[1]]
+      ctx.moveTo(c0[0], c0[1])
+      ctx.lineTo(c1[0], c1[1])
+      ctx.lineTo(c2[0], c2[1])
+      ctx.lineTo(c3[0], c3[1])
+      ctx.closePath()
+    }
+  })
+
+  const CubeRight = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0
+    },
+    buildPath: function (ctx, shape) {
+      const xAxisPoint = shape.xAxisPoint
+      const c1 = [shape.x, shape.y]
+      const c2 = [shape.x, xAxisPoint[1]]
+      const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight]
+      const c4 = [shape.x + w1, shape.y - w2 + snapHeight]
+      ctx.moveTo(c1[0], c1[1]);
+      ctx.lineTo(c2[0], c2[1]);
+      ctx.lineTo(c3[0], c3[1]);
+      ctx.lineTo(c4[0], c4[1]);
+      ctx.closePath();
+    }
+  })
+
+  const CubeTop = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0
+    },
+    buildPath: function (ctx, shape) {
+      const c1 = [shape.x, shape.y]
+      const c2 = [shape.x + w1, shape.y - w2 + snapHeight]
+      const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight]
+      const c4 = [shape.x - w2, shape.y]
+      ctx.moveTo(c1[0], c1[1]);
+      ctx.lineTo(c2[0], c2[1]);
+      ctx.lineTo(c3[0], c3[1]);
+      ctx.lineTo(c4[0], c4[1]);
+      ctx.closePath();
+    }
+  })
+
+  return { CubeLeft, CubeRight, CubeTop };
+}
+
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = WaterSupplySystemConfig.key
   public chartConfig = cloneDeep(WaterSupplySystemConfig)
diff --git a/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.vue b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.vue
index 25df5c6..30ff398 100644
--- a/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.vue
+++ b/src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.vue
@@ -1,18 +1,17 @@
 <template>
   <div class="go-energy-box">
     <div class="content">
-      <!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
+      <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>
+      </v-chart>
     </div>
   </div>
 
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, onMounted, ref } from 'vue'
+import { PropType, computed, onMounted, onUnmounted, ref } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import * as echarts from 'echarts'
@@ -20,11 +19,10 @@ 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 config, { includes, createCubeShapes, createRenderItemFunction } 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,
@@ -39,6 +37,7 @@ const props = defineProps({
     required: true
   }
 })
+const { CubeLeft, CubeRight, CubeTop } = createCubeShapes();
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
 
 use([
@@ -50,184 +49,25 @@ use([
 
 const replaceMergeArr = ref<string[]>([])
 
-// const option = computed(() => {
-//   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-// })
+const option = computed(() => {
+  const mergedOption = 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
-  },
+  // 重新设置 renderItem 函数
+  if (mergedOption.series && mergedOption.series[1] && mergedOption.series[1].type === 'custom') {
+    const { wid, w1, w2, snapHeight } = props.chartConfig.option;
+    mergedOption.series[1].renderItem = createRenderItemFunction(wid, w1, w2, snapHeight)
+  }
 
-  // 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
-    }
+  return mergedOption
+})
 
-  },
-
-  // 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
 })
-
+echarts.graphic.registerShape('CubeLeft', CubeLeft)
+echarts.graphic.registerShape('CubeRight', CubeRight)
+echarts.graphic.registerShape('CubeTop', CubeTop)
 onMounted(async () => {
 
 })