feat(暂存）:未完善 能源趋势

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

@@ -0,0 +1,148 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { EnergyConsumptionTrendConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['title', 'grid3D', 'xAxis3D', 'yAxis3D', 'zAxis3D']
+// 基于准备好的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,    // 最大俯视角度
+    },
+    axisPointer: {
+      show: false // 不显示坐标轴指示器
+    },
+    // 光照配置，这是实现立体感和阴影的关键
+    light: {
+      // 主光源
+      main: {
+        intensity: 1.2,      // 光照强度
+        shadow: true,        // 开启阴影
+        shadowQuality: 'ultra', // 更高的阴影质量
+        alpha: 55,           // 控制光源的水平角度，使其从右侧照射，从而在左侧形成阴影
+        beta: 40             // 控制光源的垂直角度，使其从上方照射
+      },
+      // 环境光，用于整体提亮
+      ambient: {
+        intensity: 0.3
+      }
+    }
+  },
+  // X轴（类目轴）
+  xAxis3D: {
+    type: 'category',
+    data: months,
+    axisLabel: {
+      color: '#d0d0d0',
+      fontSize: 14
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#d0d0d0'
+      }
+    }
+  },
+  // Y轴（在图中是隐藏的，但 bar3D 渲染需要此轴）
+  yAxis3D: {
+    type: 'category',
+    show: false // 不显示Y轴
+  },
+  // Z轴（数值轴）
+  zAxis3D: {
+    type: 'value',
+    min: 0,
+    max: 100,
+    interval: 25, // 刻度间隔
+    axisLabel: {
+      color: '#d0d0d0',
+      fontSize: 12
+    },
+    axisLine: {
+      lineStyle: {
+        color: '#d0d0d0'
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.15)' // 分割线颜色
+      }
+    }
+  },
+  // 系列列表
+  series: [{
+    type: 'bar3D',
+    data: data,
+    barSize: 15, // 柱子在 X, Y 轴上的尺寸
+    // 柱状图的着色效果
+    shading: 'lambert', // 使用 Lambert 光照模型，能更好地表现光照和阴影
+    // 柱子的样式
+    itemStyle: {
+      color: '#4bebf3' // 柱子的基础颜色，光照会在此基础上计算最终颜色
+    },
+    // 鼠标悬浮时的高亮状态
+    emphasis: {
+      label: {
+        show: false
+      }
+    }
+  }]
+};
+
+// 使用刚指定的配置项和数据显示图表。
+// myChart.setOption(option);
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = EnergyConsumptionTrendConfig.key
+  public chartConfig = cloneDeep(EnergyConsumptionTrendConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const EnergyConsumptionTrendConfig: ConfigType = {
+  key: 'EnergyConsumptionTrend',
+  chartKey: 'VEnergyConsumptionTrend',
+  conKey: 'VCEnergyConsumptionTrend',
+  title: '能耗趋势',
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'EnergyConsumptionTrend.png'
+}

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

@@ -0,0 +1,213 @@
+<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>
+
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, 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 '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)
+// 【修改】现在我们只需要注册 ECharts 核心的渲染器即可。
+// 3D相关的组件已经通过 import 'echarts-gl' 自动注册完毕。
+use([
+  CanvasRenderer,
+  BarChart,
+  TitleComponent,
+  GridComponent
+])
+
+const replaceMergeArr = ref<string[]>([])
+
+// const option = computed(() => {
+//   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+// })
+
+// 将数据转换为 bar3D 需要的格式 [x, y, z]
+
+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'
+    }
+  },
+
+  // 网格配置
+  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>

src/packages/components/Charts/IntegratedEnergy/index.ts

@@ -1,4 +1,5 @@
 import { EnergyOverviewConfig } from "./EnergyOverview"
+import { EnergyConsumptionTrendConfig } from "./EnergyConsumptionTrend"
 export default [
-  EnergyOverviewConfig
+  EnergyOverviewConfig, EnergyConsumptionTrendConfig
 ]