Merge branch 'master' of http://119.45.132.149:3000/security/go-view-fetch

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%',
@@ -59,22 +66,50 @@ const option = {
     }
   },
   xAxis: {
-    show: true,
+    type: 'category',
-    type: 'category'
-  },
-  yAxis: {
-    show: true,
-    type: 'value',
-    name: '单位：万/kwh',
-    nameGap: 30,
     axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
+    },
+    axisTick: {
       show: false
     },
-    splitLine: {
+    //
+    axisLabel: {
+      color: '#eee',
+      interval: 0,
+      fontSize: 9,
+      margin: 20
+    }
+
+  },
+  // name: '单位：万/kwh',
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 25,
+    name: '单位：万/kwh',
+    nameTextStyle:{
+      color: 'rgba(255, 255, 255, 0.8)',
+    },
+    axisLine: {
       show: true,
       lineStyle: {
-        type: 'dashed',
+        color: 'rgba(255, 255, 255, 0.1)',
-        opacity: 0.5
+      }
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'solid'
       }
     }
   },
@@ -149,4 +184,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

@@ -3,63 +3,64 @@
   "source": [
     {
       "月份": "1月",
-      "电": 120,
+      "电": 20,
-      "燃气": 130
+      "燃气": 30
     },
     {
       "月份": "2月",
-      "电": 200,
+      "电": 66,
-      "燃气": 130
+      "燃气": 30
     },
     {
       "月份": "3月",
-      "电": 150,
+      "电": 50,
-      "燃气": 312
+      "燃气": 12
     },
     {
       "月份": "4月",
-      "电": 80,
+      "电": 8,
-      "燃气": 268
+      "燃气": 68
     },
     {
       "月份": "5月",
-      "电": 70,
+      "电": 7,
-      "燃气": 155
+      "燃气": 55
     },
     {
       "月份": "6月",
-      "电": 110,
+      "电": 10,
-      "燃气": 117
+      "燃气": 17
     },
     {
       "月份": "7月",
-      "电": 130,
+      "电": 30,
-      "燃气": 160
+      "燃气": 60
     },
     {
       "月份": "8月",
-      "电": 130,
+      "电": 84,
-      "燃气": 160
+      "燃气": 60
     },
     {
       "月份": "9月",
-      "电": 130,
+      "电": 30,
-      "燃气": 160
+      "燃气": 50
     },
     {
       "月份": "10月",
-      "电": 130,
+      "电": 22,
-      "燃气": 160
+      "燃气": 16
     },
     {
       "月份": "11月",
-      "电": 130,
+      "电": 45,
-      "燃气": 160
+      "燃气": 54
     },
     {
       "月份": "12月",
-      "电": 130,
+      "电": 13,
-      "燃气": 160
+      "燃气": 16
     }
-  ]
+  ],
+  "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>