style：修改能源趋势样式以适配要求

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

@@ -5,12 +5,25 @@ import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 import * as echarts from 'echarts'
 
-export const includes = ['title']
+export const includes = []
-// 基于准备好的dom，初始化echarts实例
+const otherOption = {
-// var myChart = echarts.init(document.getElementById('main'));
+  unit: '万kwh',
-
+}
 
 const option = {
+  ...otherOption,
+  dataset: dataJson,
+  // 添加标题配置
+  title: {
+    text: '单位：' + otherOption.unit,
+    left: '3%',
+    top: '3%',
+    textStyle: {
+      fontSize: 12,
+      color: 'rgba(255, 255, 255, 0.7)',
+      fontWeight: 'normal'
+    }
+  },
   // 提示框配置
   tooltip: {
     trigger: 'axis',
@@ -23,7 +36,6 @@ const option = {
       color: '#ffffff'
     }
   },
-  dataset: dataJson,
   // 网格配置
   grid: {
     left: '3%',
@@ -38,7 +50,7 @@ const option = {
     type: 'category',
     axisLine: {
       lineStyle: {
-        color: '#eee'
+        color: 'rgba(255, 255, 255, 0.1)',
       }
     },
     axisTick: {
@@ -46,7 +58,7 @@ const option = {
     },
     // 
     axisLabel: {
-      color: '#80b0c4',
+      color: '#eee',
       interval: 0,
       fontSize: 9,
       margin: 20
@@ -60,8 +72,10 @@ const option = {
     min: 0,
     interval: 25,
     axisLine: {
-      show: false,
+      show: true,
-
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
     },
     axisTick: {
       show: false
@@ -83,22 +97,21 @@ const option = {
 
     name: '能源消耗',
     type: 'bar',
-    // data: values.map((value, index) => ({
-    //   value: value,
     itemStyle: {
       color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-        { offset: 0, color: '#1d7b7b' },    // 更暗的左侧颜色，增强阴影效果
+        { offset: 0, color: '#82ffff' },    // 更暗的左侧颜色，增强阴影效果
-        { offset: 0.2, color: '#196b6b' },  // 左侧过渡色
+        { offset: 0.2, color: '#00bfbf' },  // 左侧过渡色
-        { offset: 0.7, color: '#00cccc' },  // 中间主色
+        { offset: 0.5, color: '#008f8f' },  // 中间主色
-        { offset: 0.8, color: '#33dddd' },  // 右侧过渡色
+        { offset: 0.8, color: '#00bfbf' },  // 右侧过渡色
-        { offset: 1, color: '#66ffff' }     // 右侧亮色，增强高光效果
+        { offset: 1, color: '#82ffff' }     // 右侧亮色，增强高光效果
       ]),
+      opacity: 0.60,
       // 添加更强的3D效果
       shadowBlur: 20,
       shadowColor: 'rgba(0, 0, 0, 0.7)',
       shadowOffsetX: -5,
       shadowOffsetY: 5,
-      borderRadius: [0, 0, 6, 6],
+      borderRadius: [0, 0, 4, 4],
       borderWidth: 0,
 
     },
@@ -112,20 +125,21 @@ const option = {
     },
     // })),
 
-    barWidth: '40%',
+    barWidth: '45%',
 
     // 3D圆柱体效果
-    roundCap: true
+    roundCap: false
   }, {
     name: '顶部圆',
     type: 'pictorialBar',
     z: 3,
-    symbolSize: ['57%', '10'],
+    symbolSize: ['62%', '6'],
-    symbolOffset: [0.1, -5],
+    symbolOffset: [0.1, -3],
     symbolPosition: "end",
     itemStyle: {
-      color: "#40ECEC",
+      color: "rgba(51, 221, 221, 0.8)",
     },
+    // opacity: 0.1,
     emphasis: {
       itemStyle: {
         shadowColor: 'rgba(0, 255, 255, 0.8)',
@@ -137,16 +151,6 @@ const option = {
 
   // 图形元素配置
   graphic: [{
-    // 单位标注
-    type: 'text',
-    left: '3%',
-    top: '3%',
-    style: {
-      text: '单位：' + dataJson.unit,
-      fontSize: 12,
-      fill: 'rgba(255, 255, 255, 0.7)',
-    }
-  }, {
     // 左侧阴影效果
     type: 'rect',
     left: 0,

src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/data.json

@@ -52,6 +52,5 @@
       "month": "12月",
       "value": 67
     }
-  ],
+  ]
-  "unit": "万kwh"
 }

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

@@ -11,7 +11,7 @@
 </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'
@@ -48,16 +48,31 @@ use([
 
 const replaceMergeArr = ref<string[]>([])
 
+const updataUnit = () => {
+  option.value.title.text = '单位：' + option.value.unit;
+
+}
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    updataUnit();
+    option.value.dataset = newData
+  }, {
+  immediate: true,
+  deep: false
+}
+)
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   props.chartConfig.option.dataset = newData
 })
 
 onMounted(async () => {
-
+  // 更新显示单位
+  updataUnit();
 })
 
 </script>