feat：完善能源趋势组件配置

src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.ts

@@ -3,143 +3,180 @@ import { EnergyConsumptionTrendConfig } 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', 'grid3D', 'xAxis3D', 'yAxis3D', 'zAxis3D']
+export const includes = ['title']
 // 基于准备好的dom，初始化echarts实例
 // var myChart = echarts.init(document.getElementById('main'));
 
-// 从图片中估算的数据
-const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
-const values = [88, 54, 66, 54, 89, 67, 54, 89, 54, 89, 54, 67];
-
-// 将数据转换为 bar3D 需要的格式 [x, y, z]
-const data = values.map((item, index) => {
-  // x 对应 xAxis3D 的类目索引，y 对应 yAxis3D 的类目索引，z 对应 zAxis3D 的数值
-  return [index, 0, item];
-});
-
 
 const option = {
-  // 图表标题，用于显示左上角的单位
-  title: {
-    text: '单位：万kWh',
-    left: '2%', // 调整位置
-    top: '2%',
-    textStyle: {
-      color: '#e0e0e0', // 使用稍亮的颜色以适应深色背景
-      fontSize: 16
-    }
-  },
-  // 背景色，使用线性渐变模拟图片效果
-  backgroundColor: {
-    type: 'linear',
-    x: 0,
-    y: 0,
-    x2: 0,
-    y2: 1,
-    colorStops: [{
-      offset: 0, color: '#0f375f' // 起始颜色
-    }, {
-      offset: 1, color: '#000918' // 结束颜色
-    }],
-    global: false
-  },
-  // 3D笛卡尔坐标系配置
-  grid3D: {
-    boxWidth: 200,
-    boxDepth: 80,
-    // 视角控制，用于调整图表的观察角度
-    viewControl: {
-      distance: 250, // 初始视角距离
-      alpha: 15,     // 俯视角度
-      beta: 25,      // 旋转角度
-      autoRotate: false, // 禁止自动旋转
-      minAlpha: 5,     // 最小俯视角度
-      maxAlpha: 90,    // 最大俯视角度
-    },
+  // 提示框配置
+  tooltip: {
+    trigger: 'axis',
     axisPointer: {
-      show: false // 不显示坐标轴指示器
+      type: 'shadow'
     },
-    // 光照配置，这是实现立体感和阴影的关键
-    light: {
-      // 主光源
-      main: {
-        intensity: 1.2,      // 光照强度
-        shadow: true,        // 开启阴影
-        shadowQuality: 'ultra', // 更高的阴影质量
-        alpha: 55,           // 控制光源的水平角度，使其从右侧照射，从而在左侧形成阴影
-        beta: 40             // 控制光源的垂直角度，使其从上方照射
-      },
-      // 环境光，用于整体提亮
-      ambient: {
-        intensity: 0.3
-      }
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderColor: '#00ffff',
+    textStyle: {
+      color: '#ffffff'
     }
   },
-  // X轴（类目轴）
-  xAxis3D: {
+  dataset: dataJson,
+  // 网格配置
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '15%',
+    containLabel: true
+  },
+
+  // X轴配置
+  xAxis: {
     type: 'category',
-    data: months,
-    axisLabel: {
-      color: '#d0d0d0',
-      fontSize: 14
-    },
     axisLine: {
       lineStyle: {
-        color: '#d0d0d0'
+        color: '#eee'
       }
+    },
+    axisTick: {
+      show: false
+    },
+    // 
+    axisLabel: {
+      color: '#80b0c4',
+      interval: 0,
+      fontSize: 9,
+      margin: 20
     }
+
   },
-  // Y轴（在图中是隐藏的，但 bar3D 渲染需要此轴）
-  yAxis3D: {
-    type: 'category',
-    show: false // 不显示Y轴
-  },
-  // Z轴（数值轴）
-  zAxis3D: {
+
+  // Y轴配置
+  yAxis: {
     type: 'value',
     min: 0,
-    max: 100,
-    interval: 25, // 刻度间隔
-    axisLabel: {
-      color: '#d0d0d0',
-      fontSize: 12
-    },
+    interval: 25,
     axisLine: {
-      lineStyle: {
-        color: '#d0d0d0'
-      }
+      show: false,
+
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      formatter: '{value}'
     },
     splitLine: {
-      show: true,
       lineStyle: {
-        color: 'rgba(255, 255, 255, 0.15)' // 分割线颜色
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'solid'
       }
     }
   },
-  // 系列列表
+
+  // 数据系列配置
   series: [{
-    type: 'bar3D',
-    data: data,
-    barSize: 15, // 柱子在 X, Y 轴上的尺寸
-    // 柱状图的着色效果
-    shading: 'lambert', // 使用 Lambert 光照模型，能更好地表现光照和阴影
-    // 柱子的样式
+
+    name: '能源消耗',
+    type: 'bar',
+    // data: values.map((value, index) => ({
+    //   value: value,
     itemStyle: {
-      color: '#4bebf3' // 柱子的基础颜色，光照会在此基础上计算最终颜色
+      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: {
-      label: {
-        show: false
+      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
   }]
 };
 
-// 使用刚指定的配置项和数据显示图表。
-// myChart.setOption(option);
-
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key: string = EnergyConsumptionTrendConfig.key
   public chartConfig = cloneDeep(EnergyConsumptionTrendConfig)

src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/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"
+}

src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/index.vue

@@ -1,15 +1,17 @@
 <template>
-  <!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
-    replaceMerge: replaceMergeArr
-  }" autoresize>
-  </v-chart> -->
-  <v-chart ref="vChartRef" :option="option" autoresize>
+  <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>
+    </div>
+  </div>
 
-  </v-chart>
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, ref } from 'vue'
+import { PropType, computed, onMounted, ref } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import * as echarts from 'echarts'
@@ -17,30 +19,26 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import { TitleComponent, GridComponent } from 'echarts/components'
-import 'echarts-gl'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
-import isObject from 'lodash/isObject'
+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)
 
-// 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)
-// 【修改】现在我们只需要注册 ECharts 核心的渲染器即可。
-// 3D相关的组件已经通过 import 'echarts-gl' 自动注册完毕。
 use([
   CanvasRenderer,
   BarChart,
@@ -50,164 +48,28 @@ use([
 
 const replaceMergeArr = ref<string[]>([])
 
-// const option = computed(() => {
-//   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-// })
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
 
-// 将数据转换为 bar3D 需要的格式 [x, y, z]
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
 
-const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; const values = [88, 54, 66, 54, 89, 67, 54, 89, 54, 89, 54, 67];
-// --- ECharts Chart Configuration ---
-const option = {
-  // 提示框配置
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'shadow'
-    },
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
-    borderColor: '#00ffff',
-    textStyle: {
-      color: '#ffffff'
-    }
-  },
+onMounted(async () => {
 
-  // 网格配置
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    top: '15%',
-    containLabel: true
-  },
-
-  // X轴配置
-  xAxis: {
-    type: 'category',
-    data: months,
-    axisLine: {
-      lineStyle: {
-        color: '#eee'
-      }
-    },
-    axisTick: {
-      show: false
-    },
-    // 
-    axisLabel: {
-      color: '#eee',
-      interval: 0,
-      fontSize: 10,
-      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',
-    data: values.map((value, index) => ({
-      value: value,
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#00ffff' },
-          { offset: 0.5, color: '#00a0a0' },
-          { offset: 1, color: '#006666' }
-        ]),
-        // 添加3D效果
-        shadowBlur: 10,
-        shadowColor: 'rgba(0, 0, 0, 0.3)',
-        shadowOffsetX: 0,
-        shadowOffsetY: 0
-      },
-      emphasis: {
-        itemStyle: {
-          shadowColor: 'rgba(0, 255, 255, 0.8)',
-          shadowBlur: 15
-        }
-      }
-    })),
-
-    barWidth: '40%',
-    itemStyle: {
-      borderRadius: [0, 0, 6, 6],
-      borderWidth: 0,
-    },
-
-    // 3D圆柱体效果
-    roundCap: true
-  }, {
-    name: '顶部圆',
-    type: 'pictorialBar',
-    data: values,
-    z: 3,
-    symbolSize: ['60%', '5%'],
-    symbolOffset: [0, -5],
-    symbolPosition: "end",
-    itemStyle: {
-      color: "#FC5531 ",
-    },
-    emphasis: {
-      itemStyle: {
-        shadowColor: 'rgba(0, 255, 255, 0.8)',
-        shadowBlur: 50
-      }
-    }
-  }],
-
-  // 图形元素配置
-  graphic: [{
-    // 单位标注
-    type: 'text',
-    left: '3%',
-    top: '3%',
-    style: {
-      text: '单位：万kwh',
-      fontSize: 12,
-      fill: 'rgba(255, 255, 255, 0.7)',
-      fontFamily: 'Arial'
-    }
-  }, {
-    // 左侧阴影效果
-    type: 'rect',
-    left: 0,
-    top: '15%',
-    width: '20%',
-    bottom: '3%',
-    style: {
-      fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-        { offset: 0, color: 'rgba(0, 0, 0, 0.4)' },
-        { offset: 1, color: 'rgba(0, 0, 0, 0)' }
-      ])
-    },
-    z: -1
-  }]
-};
+})
 
 </script>
+
+<style lang="scss" scoped>
+@include go('energy-box') {
+  width: 100%;
+  height: 100%;
+
+  .content {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>