碳排放-添加包围框

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

@@ -6,10 +6,17 @@ import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 import { fontStyle } from 'html2canvas/dist/types/css/property-descriptors/font-style'
+import {chartInitConfig} from "@/settings/designSetting";
 
 export const includes = ['xAxis', 'yAxis']
+const otherOption = {
+  sceneCode: '',
+  titleText: '碳排放',
+  unit: dataJson.unit,
+}
 
 const option = {
+  ...otherOption,
   grid: {
     left: '3%',
     right: '4%',
@@ -149,4 +156,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public chartConfig = cloneDeep(CarbonEmissionConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
 }

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

@@ -61,5 +61,6 @@
       "电": 130,
       "燃气": 160
     }
-  ]
+  ],
+  "unit": "万kwh"
 }

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

@@ -1,9 +1,16 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
+  <Background :title-text="titleText">
+    <div class="go-energy-box">
+      <div class="content">
+        <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
+      </div>
+    </div>
+  </Background>
+
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, PropType } from 'vue'
+import {reactive, watch, PropType, computed} from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
@@ -16,6 +23,7 @@ import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
 import { isPreview, colorGradientCustomMerge} from '@/utils'
+import Background from '../Background/index.vue'
 
 const props = defineProps({
   themeSetting: {
@@ -33,7 +41,9 @@ const props = defineProps({
 })
 
 const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
-
+const titleText = computed(() => {
+  return props.chartConfig.option.titleText;
+})
 use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 
@@ -84,3 +94,15 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
   props.chartConfig.option.dataset = newData
 })
 </script>
+
+<style lang="scss" scoped>
+@include go('energy-box') {
+  width: 100%;
+  height: 100%;
+
+  .content {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>