1.修改各大屏不合格标题边距

src/views/InPlantProducts/content/chart/installtable.vue

@@ -44,6 +44,7 @@ const setData = (value: any, type: number) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'3%'
     },
     series: [
       {

src/views/Mechanics/content/chart/equipment.vue

@@ -48,6 +48,7 @@ const setData = (value: any, type: number) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'2%'
     },
     // color: ['#4992FF', '#7CFFB2', '#FDDD60', '#FF6E76'],
     tooltip: {

src/views/Offsite/content/chart/equipment.vue

@@ -38,7 +38,8 @@ const setData = (value: any) => {
       textStyle: {
         color: '#fff',
         fontSize: 20
-      }
+      },
+      top:'2%'
     },
     tooltip: {
       trigger: 'item'

src/views/Offsite/content/chart/offsitegateway.vue

@@ -147,6 +147,7 @@ p {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 5px;
 }
 .colorTip span {
   margin-right: 1rem;
@@ -168,6 +169,7 @@ p {
   border-radius: 1rem;
   width: 1rem;
   height: 1rem;
+
 }
 .titlesize-name{
     font-size: 1.5rem;

src/views/PaintShopView/View1/chart/pm.vue

@@ -47,6 +47,7 @@ const setData = (value: any) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'10px'
     },
     grid: {
       // 让图表占满容器

src/views/PaintShopView/View1/chart/verticalNum.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\View1\chart\verticalNum.vue
+ * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 08:22:35
@@ -8,13 +8,14 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
+  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
     <border3 ref="refborder3">
       <template v-slot>
         <div class="box" ref="classBox1">
           <!-- <div class="contentbox"> -->
-            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
             <h2>{{ title }}</h2>
+
+            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
           <i
             :class="
               value.data > value.quota
@@ -100,8 +101,9 @@ defineExpose({
   width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-evenly;
   align-items: center;
+  /* position: relative; */
 }
 /* .contentbox{
   height: 100%;
@@ -118,26 +120,14 @@ p {
   color: #fff;
 }
 .icon-red {
-  font-size: 70px;
+  font-size: 150px;
   color: #E43961;
   animation: redstart 2s infinite;
   /* position: relative; */
   /* top: -15px; */
-}.box>h2{
-  font-size: 20px;
-}
-.box>h5{
-  font-size: 15px;
-  margin-bottom: 20px;
-  margin-top: -50px;
-}
-.box>h5{
-  font-size: 15px;
-  margin-bottom: 20px;
-  margin-top: -50px;
 }
 .icon-blue {
-  font-size: 100px;
+  font-size: 150px;
   color: #20AEC5;
   /* position: relative; */
   /* top: -15px; */
@@ -146,6 +136,17 @@ p {
 .icon-blue {
   /* margin-bottom: 20%; */
 }
+.box>h2{
+  font-size: 20px;
+  position: absolute;
+  top: 15px;
+  left:20px;
+}
+.box>h5{
+  font-size: 15px;
+  /* margin-bottom: 20px; */
+  margin-top: -10px;
+}
 .num{
   font-size: 16px;
 }

src/views/PaintShopView/finishView/chart/verticalNum.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\finishView\chart\verticalNum.vue
+ * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 08:22:35
@@ -8,13 +8,14 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
+  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
     <border3 ref="refborder3">
       <template v-slot>
         <div class="box" ref="classBox1">
           <!-- <div class="contentbox"> -->
-            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
             <h2>{{ title }}</h2>
+
+            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
           <i
             :class="
               value.data > value.quota
@@ -102,6 +103,7 @@ defineExpose({
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
+  /* position: relative; */
 }
 /* .contentbox{
   height: 100%;
@@ -136,11 +138,14 @@ p {
 }
 .box>h2{
   font-size: 20px;
+  position: absolute;
+  top: 15px;
+  left:20px;
 }
 .box>h5{
   font-size: 15px;
-  margin-bottom: 20px;
+  /* margin-bottom: 20px; */
-  margin-top: -50px;
+  margin-top: -10px;
 }
 .num{
   font-size: 16px;

src/views/PaintShopView/machiningView/chart/verticalNum.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\machiningView\chart\verticalNum.vue
+ * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 08:22:35
@@ -8,13 +8,14 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
+  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
     <border3 ref="refborder3">
       <template v-slot>
         <div class="box" ref="classBox1">
           <!-- <div class="contentbox"> -->
-            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
             <h2>{{ title }}</h2>
+
+            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
           <i
             :class="
               value.data > value.quota
@@ -100,8 +101,9 @@ defineExpose({
   width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-evenly;
   align-items: center;
+  /* position: relative; */
 }
 /* .contentbox{
   height: 100%;
@@ -136,11 +138,14 @@ p {
 }
 .box>h2{
   font-size: 20px;
+  position: absolute;
+  top: 15px;
+  left:20px;
 }
 .box>h5{
   font-size: 15px;
-  margin-bottom: 20px;
+  /* margin-bottom: 20px; */
-  margin-top: -50px;
+  margin-top: -10px;
 }
 .num{
   font-size: 16px;

src/views/PaintShopView/stuffView/chart/pm.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront-branches\src\views\PaintShopView\finishView\chart\pm.vue
+ * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\chart\pm.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-10 13:27:36
@@ -47,6 +47,7 @@ const setData = (value: any) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'2%'
     },
     grid: {
       // 让图表占满容器

src/views/PaintShopView/stuffView/chart/verticalNum.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\stuffView\chart\verticalNum.vue
+ * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 08:22:35
@@ -8,13 +8,14 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
+  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
     <border3 ref="refborder3">
       <template v-slot>
         <div class="box" ref="classBox1">
           <!-- <div class="contentbox"> -->
-            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
             <h2>{{ title }}</h2>
+
+            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
           <i
             :class="
               value.data > value.quota
@@ -100,8 +101,9 @@ defineExpose({
   width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-evenly;
   align-items: center;
+  /* position: relative; */
 }
 /* .contentbox{
   height: 100%;
@@ -136,11 +138,14 @@ p {
 }
 .box>h2{
   font-size: 20px;
+  position: absolute;
+  top: 15px;
+  left:20px;
 }
 .box>h5{
   font-size: 15px;
-  margin-bottom: 20px;
+  /* margin-bottom: 20px; */
-  margin-top: -50px;
+  margin-top: -10px;
 }
 .num{
   font-size: 16px;

src/views/PaintShopView/weldView/chart/pm.vue

@@ -47,6 +47,7 @@ const setData = (value: any) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'2%'
     },
     grid: {
       // 让图表占满容器

src/views/PaintShopView/weldView/chart/verticalNum.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\PaintShopView\weldView\chart\verticalNum.vue
+ * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 08:22:35
@@ -8,13 +8,14 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
+  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
     <border3 ref="refborder3">
       <template v-slot>
         <div class="box" ref="classBox1">
           <!-- <div class="contentbox"> -->
-            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
             <h2>{{ title }}</h2>
+
+            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
           <i
             :class="
               value.data > value.quota
@@ -100,8 +101,9 @@ defineExpose({
   width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-evenly;
   align-items: center;
+  /* position: relative; */
 }
 /* .contentbox{
   height: 100%;
@@ -129,18 +131,22 @@ p {
   color: #20AEC5;
   /* position: relative; */
   /* top: -15px; */
-}.box>h2{
-  font-size: 20px;
-}
-.box>h5{
-  font-size: 15px;
-  margin-bottom: 20px;
-  margin-top: -50px;
 }
 .icon-red,
 .icon-blue {
   /* margin-bottom: 20%; */
 }
+.box>h2{
+  font-size: 20px;
+  position: absolute;
+  top: 15px;
+  left:20px;
+}
+.box>h5{
+  font-size: 15px;
+  /* margin-bottom: 20px; */
+  margin-top: -10px;
+}
 .num{
   font-size: 16px;
 }

src/views/electronicControlAmbient/chart/verticalNum.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient\chart\verticalNum.vue
+ * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\chart\verticalNum.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 08:22:35
@@ -8,13 +8,14 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width}">
+  <div ref="numBox1" :key="keynum" :style="{height:boxSize.height,width:boxSize.width,position:'relative'}">
     <border3 ref="refborder3">
       <template v-slot>
         <div class="box" ref="classBox1">
           <!-- <div class="contentbox"> -->
-            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
             <h2>{{ title }}</h2>
+
+            <h5 v-if="title=='TVOC'||title=='甲醛监测'||title=='噪音检测'">{{ `${t('messages.NormalValue')}0-${value.quota}${value.unit}` }}</h5>
           <i
             :class="
               value.data > value.quota
@@ -102,6 +103,7 @@ defineExpose({
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
+  /* position: relative; */
 }
 /* .contentbox{
   height: 100%;
@@ -136,11 +138,14 @@ p {
 }
 .box>h2{
   font-size: 20px;
+  position: absolute;
+  top: 15px;
+  left:20px;
 }
 .box>h5{
   font-size: 15px;
-  margin-bottom: 20px;
+  /* margin-bottom: 20px; */
-  margin-top: -50px;
+  margin-top: -10px;
 }
 .num{
   font-size: 16px;

src/views/energyConsume/content/chart/power.vue

@@ -210,6 +210,7 @@ const setData = (value: any) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:"2%"
     },
     tooltip: {
       trigger: "item",
@@ -222,13 +223,13 @@ const setData = (value: any) => {
     // color:color,
     legend: {
       type: "scroll",
-      top: "5%",
+      top: "10%",
       // itemStyle:{
       //     data:yue
       //   },
     },
     grid: {
-      top: "15%",
+      top: "20%",
       left: "3%",
       right: "15%",
       bottom: "-0%",

src/views/energyConsume/content/chart/power2023.vue

@@ -99,7 +99,8 @@ series.push({
       textStyle:{
           color:'#fff',
           fontSize:20
-      }
+      },
+      top: '3%',
   },
 tooltip: {
   trigger: 'item',
@@ -113,15 +114,15 @@ tooltip: {
 // color:color,
 legend: {
   type:'scroll',
-  width:400,
+  // width:400,
-  right:20,
+  // right:20,
-  // top: '3%',
+  top: '11%',
   // itemStyle:{
   //     data:yue
   //   },
 },
 grid: {
-      top: "8%",
+      top: "20%",
       left: "3%",
       right: "10%",
       bottom: "3%",

src/views/energyConsume/content/left.vue

@@ -74,6 +74,7 @@ let gasOption = reactive({
       textStyle: {
         color: "rgb(255,255,255,0.9)",
       },
+      top:'1%'
     },
     tooltip: {
       trigger: "item",
@@ -85,12 +86,12 @@ let gasOption = reactive({
     },
     legend: {
       type: "scroll",
-      top: "5%",
+      top: "6%",
       left: "10%",
       width: "auto",
     },
     grid: {
-      top: "8%",
+      top: "10%",
       left: "3%",
       right: "-5%",
       bottom: "3%",
@@ -135,7 +136,7 @@ let gasOption2 = reactive({
     //   //   },
     // },
     grid: {
-      top: "8%",
+      top: "10%",
       left: "-50%",
       right: "-10%",
       bottom: "3%",

src/views/energyConsumeJixiefenchang/content/chart/gas.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront-branches\src\views\energyConsume\content\chart\gas.vue
+ * @FilePath: \wwwd:\code\screenFront\src\views\energyConsumeJixiefenchang\content\chart\gas.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-14 13:24:12
@@ -53,7 +53,8 @@ const setData=(value:any)=>{
             textStyle:{
           color:'#fff',
           fontSize:20
-            }
+            },
+            top:'2%'
           },
            series: [{
     type: 'liquidFill',

src/views/energyConsumeJixiefenchang/content/chart/power.vue

@@ -8,161 +8,327 @@
  * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
 -->
 <template>
-    <div>
+  <div>
-  <border4 ref="refborder4">
+    <border4 ref="refborder4">
       <template v-slot>
+        <div style="display: flex; flex-direction: column;">
+          <div ref="powerjixie"></div>
           <div ref="power"></div>
+
+        </div>
+
       </template>
-  </border4>
+    </border4>
   </div>
 </template>
 
 <script setup lang="ts">
-import {getCurrentInstance, onMounted, reactive, ref} from "vue"
+import { getCurrentInstance, onMounted, reactive, ref } from "vue";
-import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
+import { EDataPerson, EDataPersonItem } from "@/type/energyConsume";
-import {accAdd} from '@/utils/precision'
+import { accAdd } from "@/utils/precision";
-import border4 from "@/components/borderBox/border4.vue"
+import border4 from "@/components/borderBox/border6.vue";
 import { useI18n } from 'vue-i18n'
 let {t} = useI18n();
 const { proxy } = getCurrentInstance() as any;
-let props=defineProps<{
+let props = defineProps<{
-      title:string
+  title: string;
-      }>()
+}>();
-let power=ref()
+let power = ref();
+let powerjixie = ref();
 
-let refborder4=ref()
+let refborder4 = ref();
 
 const echartsData = reactive<EDataPerson>({
-  power:{
+  power: {
-      div:null,
+    div: null,
-      data:null,
+    data: null,
-      title:'',
+    title: "",
-      box:null
+    box: null,
   },
-})
+});
+const echartsData2 = reactive<EDataPerson>({
+  power: {
+    div: null,
+    data: null,
+    title: "",
+    box: null,
+  },
+});
 
-const setData=(value:any)=>{
+const setData = (value: any) => {
-
+  let series = [];
-let series=[]
+  let series2 = [];
-value.listData.forEach(res=>{
+  let name = [];
-for(let key in res.month){
+  let name2 = [];
-  series.push({
+  let shuju = [{month: {}, type: '生产额'},{month: {}, type: '用电量'}];
-    name: key+'月',
+  let shuju2 = [{month: {}, type: '生产额'},{month: {}, type: '用电量'}];
-    type: 'bar',
+  let nameIndex = null;
-    stack: res.years,
+  value.name.forEach((ele, index) => {
-    emphasis: {
+    if (ele == "机械分厂") {
-      focus: 'coordinateSystem',
+      name2.push(ele);
-      label: {
+      nameIndex = index;
-      show: true
+    } else {
-      }
+      name.push(ele);
-    },
-    data: res.month[key],
-    xAxisIndex:res.years=='2022'?0:1,
-  })
-}
-
-})
-//data0用于初始化计算的数据
-let data0=[]
-    for(let i=1;i<=value.name.length;i++){
-      data0.push(0)
     }
+  });
+  value.listData.forEach((res,listDataindex) => {
+    for (let key in res.month) {
+      res.month[key].forEach((ele,index)=>{
+        if(!shuju2[listDataindex].month[key]){
+          shuju2[listDataindex].month[key]=[]
+        }
+        if(!shuju[listDataindex].month[key]){
+          shuju[listDataindex].month[key]=[]
+        }
+        if(index==nameIndex){
+          shuju2[listDataindex].month[key].push(ele)
+        }else{
+          shuju[listDataindex].month[key].push(ele)
+        }
+      })
+    }
+  });
+  shuju.forEach((res) => {
+    for (let key in res.month) {
+      series.push({
+        name: key + "月",
+        type: "bar",
+        stack: res.type,
+        emphasis: {
+          focus: "coordinateSystem",
+          label: {
+            show: true,
+            formatter: function (value, index) {
+              return value.value.toLocaleString();
+            },
+          },
+        },
+        data: res.month[key],
+        xAxisIndex: res.type == "生产额" ? 0 : 1,
+      });
+    }
+  });
+  shuju2.forEach((res) => {
+    for (let key in res.month) {
+      series2.push({
+        name: key + "月",
+        type: "bar",
+        stack: res.type,
+        barWidth:'20%',
+        emphasis: {
+          focus: "coordinateSystem",
+          label: {
+            show: true,
+            formatter: function (value, index) {
+              return value.value.toLocaleString();
+            },
+          },
+        },
+        data: res.month[key],
+        xAxisIndex: res.type == "生产额" ? 0 : 1,
+      });
+    }
+  });
+  //data0用于初始化计算的数据
+  let data0 = [];
+  for (let i = 1; i <= value.name.length; i++) {
+    data0.push(0);
+  }
+  let data1 = [];
+  for (let i = 1; i <= name2.length; i++) {
+    data1.push(0);
+  }
 
-series.push(
+  series.push(
-  {
+    {
-  name: value.listData[0].years,
+      name: "",
-  type: 'bar',
+      type: "bar",
-  data:data0,
+      data: data0,
-  color: '#bbf',
+      color: "#bbf",
-  stack: value.listData[0].years,
+      stack: value.listData[0].type,
-  // barWidth: 30,
+      // barWidth: 30,
-  label: {
+      label: {
-    show: true,
+        show: true,
-    position: 'right',
+        position: "right",
-    color: '#fff',
+        color: "#fff",
-  },
+      },
-  xAxisIndex:0,
+      xAxisIndex: 0,
-  },{
+    },
-  name: value.listData[1].years,
+    {
-  type: 'bar',
+      name: "",
-  data: data0,
+      type: "bar",
-  color: '#bbf',
+      data: data0,
-  stack: value.listData[1].years,
+      color: "#bbf",
-  // barWidth: 30,
+      stack: value.listData[1].type,
-  label: {
+      // barWidth: 30,
-    show: true,
+      label: {
-    position: 'right',
+        show: true,
-    color: '#fff'
+        position: "right",
-  },
+        color: "#fff",
-  xAxisIndex:1,
+      },
-  },  
+      xAxisIndex: 1,
-)
+    }
+  );
+  series2.push(
+    {
+      name: "",
+      type: "bar",
+      data: data1,
+      color: "#bbf",
+      stack: value.listData[0].type,
+      // barWidth: 30,
+      label: {
+        show: true,
+        position: "right",
+        color: "#fff",
+      },
+      xAxisIndex: 0,
+    },
+    {
+      name: "",
+      type: "bar",
+      data: data1,
+      color: "#bbf",
+      stack: value.listData[1].type,
+      // barWidth: 30,
+      label: {
+        show: true,
+        position: "right",
+        color: "#fff",
+      },
+      xAxisIndex: 1,
+    }
+  );
 
-
+  echartsData.power!.div = powerjixie.value;
-
+  echartsData.power!.title =props.title;;
-
+  echartsData.power!.data = {
-  echartsData.power!.div=power.value
+    title: {
-  echartsData.power!.title=props.title
+      text: echartsData.power!.title,
-  echartsData.power!.data={
+      show: true,
-  title:{
+      textStyle: {
-      text:echartsData.power!.title,
+        color: "#fff",
-      show:true,
+        fontSize: 20,
-      textStyle:{
+      },
-          color:'#fff',
+      top:"2%"
-          fontSize:20
+    },
-      }
+    tooltip: {
-  },
+      trigger: "item",
-tooltip: {
+      axisPointer: {
-  trigger: 'item',
+        // Use axis to trigger tooltip
-  axisPointer: {
+        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
-    // Use axis to trigger tooltip
+        axis: "auto",
-    type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
+      },
-    axis:'auto',
+    },
-    
+    // color:color,
-  },
+    legend: {
-},
+      type: "scroll",
-// color:color,
+      top: "10%",
-legend: {
+      // itemStyle:{
-  type:'scroll',
+      //     data:yue
-  bottom: '3%',
+      //   },
-  // itemStyle:{
+    },
-  //     data:yue
+    grid: {
-  //   },
+      top: "20%",
-},
+      left: "3%",
-grid: {
+      right: "15%",
-  top:'8%',
+      bottom: "-0%",
-  left: '3%',
+      containLabel: true,
-  right: '10%',
+    },
-  bottom: '15%',
+    xAxis: [
-  containLabel: true
+      {
-},
+        type: "value",
-xAxis: [{
+        name: t('messages.Production_yuan'),
-  type: 'value',
+        show:false,
-  name: t('messages.Production_yuan'),
+        splitLine:{
-},{
+      show:false
-  type: 'value',
+    }
-  name: t('messages.powerhi_du'),
+      },
-}],
+      {
-yAxis: {
+        type: "value",
-  type: 'category',
+        name: t('messages.powerhi_du'),
-  data: value.name
+        splitLine:{
-},
+      show:false
-series: series
+    }
+        // show:false
+      },
+    ],
+    yAxis: {
+      type: "category",
+      data: name,
+    },
+    series: series,
   };
 
-change(echartsData.power,value)
+  echartsData2.power!.div = power.value;
-}
+  echartsData2.power!.title ='';
-
+  echartsData2.power!.data = {
-const change = (item:EDataPersonItem,value:any) => {
+    title: {
-  let Ebox=proxy.$echarts.init(
+      text: '',
-  item.div,
+      show: true,
-  "dark"
+      textStyle: {
-);
+        color: "#fff",
-clacChartsSum(item.data,value)
+        fontSize: 20,
-Ebox.setOption(item.data);
+      },
-item.box = Ebox
+    },
-changeecharts(item.data,value)
+    tooltip: {
+      trigger: "item",
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
+        axis: "auto",
+      },
+    },
+    // color:color,
+    // legend: {
+    //   type: "scroll",
+    //   top: "5%",
+    //   // itemStyle:{
+    //   //     data:yue
+    //   //   },
+    // },
+    grid: {
+      top: "-35%",
+      left: "3%",
+      right: "15%",
+      bottom: "20%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "value",
+        name: t('messages.Production_yuan'),
+        splitLine:{
+      show:false
+    },
+    max:10000000
+        // show:false
+      },
+      {
+        type: "value",
+        name: t('messages.powerhi_du'),
+        splitLine:{
+      show:false
+    },
+        show:false
+      },
+    ],
+    yAxis: {
+      type: "category",
+      data: name2,
+    },
+    series: series2,
+  };
+  change(echartsData.power, value);
+  change(echartsData2.power,value)
+};
 
+const change = (item: EDataPersonItem, value: any) => {
+  let Ebox = proxy.$echarts.init(item.div, "dark");
+  clacChartsSum(item.data, value);
+  Ebox.setOption(item.data);
+  item.box = Ebox;
+  changeecharts(item.data, value);
 };
 
 /**
@@ -172,35 +338,45 @@ changeecharts(item.data,value)
  * @出口参数:
  * @函数备注:
  */
-const clacChartsSum=(option:any,value:any)=>{
+const clacChartsSum = (option: any, value: any) => {
-  var series = option.series
+  var series = option.series;
-  function getSum1 (params) {
+  function getSum1(params) {
-      let stack=value.listData[0].years
+    let stack = value.listData[0].type;
-        var datavalue = 0
+    var datavalue = 0;
-        for (var i = 0; i < series.length; i++) {
+    for (var i = 0; i < series.length; i++) {
-          if(series[i].stack==stack){
+      if (series[i].stack == stack) {
-            // datavalue += series[i].data[params.dataIndex]
+        // datavalue += series[i].data[params.dataIndex]
-            datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
+        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
-          }
-          
-        }
-        return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
       }
-      function getSum2 (params) {
+    }
-      let stack=value.listData[1].years
+    if(stack=='生产额'){
-        var datavalue = 0
+      stack=t('messages.Production')
-        for (var i = 0; i < series.length; i++) {
+    }else if(stack=='用电量'){
-          if(series[i].stack==stack){
+      stack=t('messages.powerTip')
-            // datavalue += series[i].data[params.dataIndex]
+    }
-            datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
-          }
 
-        }
+    return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
-        return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
+  }
+  function getSum2(params) {
+    let stack = value.listData[1].type;
+    var datavalue = 0;
+    for (var i = 0; i < series.length; i++) {
+      if (series[i].stack == stack) {
+        // datavalue += series[i].data[params.dataIndex]
+        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
       }
-    series[series.length - 1].label.formatter = getSum2
+    }
-    series[series.length - 2].label.formatter = getSum1
+    if(stack=='生产额'){
-}
+      stack=t('messages.Production')
+    }else if(stack=='用电量'){
+      stack=t('messages.powerTip')
+    }
+
+    return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
+  }
+  series[series.length - 1].label.formatter = getSum2;
+  series[series.length - 2].label.formatter = getSum1;
+};
 
 /**
  * @函数功能: 修改用电量总数数值的标签
@@ -209,101 +385,113 @@ const clacChartsSum=(option:any,value:any)=>{
  * @出口参数:
  * @函数备注:
  */
-const changeecharts=(option:any,value:any)=>{
+const changeecharts = (option: any, value: any) => {
-  var series = option.series
+  var series = option.series;
 
-  echartsData.power.box.on('legendselectchanged',(obj)=>{
+  echartsData.power.box.on("legendselectchanged", (obj) => {
-      //重新计算前一年数据
+    //重新计算前一年数据
-      function getSum1 (params) {
+    function getSum1(params) {
-        let stack=value.listData[0].years
+      let stack = value.listData[0].type;
-        var datavalue = 0
+      var datavalue = 0;
-        for (var i = 0; i < series.length; i++) {
+      for (var i = 0; i < series.length; i++) {
-          if (obj.selected[series[i].name]) {
+        if (obj.selected[series[i].name]) {
-            if(series[i].stack==stack){
+          if (series[i].stack == stack) {
             // datavalue += series[i].data[params.dataIndex]
-            datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
+            datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
-            }
           }
         }
-        return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
       }
-      //重新计算今年年数据
+      if(stack=='生产额'){
-      function getSum2 (params) {
+      stack=t('messages.Production')
-        let stack=value.listData[1].years
+    }else if(stack=='用电量'){
-        var datavalue = 0
+      stack=t('messages.powerTip')
-        for (var i = 0; i < series.length; i++) {
+    }
-          if (obj.selected[series[i].name]) {
+
-            if(series[i].stack==stack){
+      return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
+    }
+    //重新计算今年年数据
+    function getSum2(params) {
+      let stack = value.listData[1].type;
+      var datavalue = 0;
+      for (var i = 0; i < series.length; i++) {
+        if (obj.selected[series[i].name]) {
+          if (series[i].stack == stack) {
             // datavalue += series[i].data[params.dataIndex]
-            datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
+            datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
-            }
           }
         }
-        return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
       }
-      series[series.length - 1].label.formatter = getSum2
+      if(stack=='生产额'){
-    series[series.length - 2].label.formatter = getSum1
+      stack=t('messages.Production')
-    echartsData.power.box.setOption(option)
+    }else if(stack=='用电量'){
-})
+      stack=t('messages.powerTip')
+    }
 
+      return datavalue ? stack + ":" + datavalue.toLocaleString() + "" : null;
+    }
+    series[series.length - 1].label.formatter = getSum2;
+    series[series.length - 2].label.formatter = getSum1;
+    echartsData.power.box.setOption(option);
+  });
 
-
+  function getSum1(params) {
-
+    let stack = value.listData[0].type;
-
+    var datavalue = 0;
-
+    for (var i = 0; i < series.length; i++) {
-
+      if (series[i].stack == stack) {
-
+        // datavalue += series[i].data[params.dataIndex]
-  function getSum1 (params) {
+        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
-      let stack=value.listData[0].years
-        var datavalue = 0
-        for (var i = 0; i < series.length; i++) {
-          if(series[i].stack==stack){
-            // datavalue += series[i].data[params.dataIndex]
-            datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
-          }
-          
-        }
-        return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
       }
-      function getSum2 (params) {
+    }
-      let stack=value.listData[1].years
+    if(stack=='生产额'){
-        var datavalue = 0
+      stack=t('messages.Production')
-        for (var i = 0; i < series.length; i++) {
+    }else if(stack=='用电量'){
-          if(series[i].stack==stack){
+      stack=t('messages.powerTip')
-            // datavalue += series[i].data[params.dataIndex]
+    }
-            datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
-          }
 
-        }
+    return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
-        return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
+  }
+  function getSum2(params) {
+    let stack = value.listData[1].type;
+    var datavalue = 0;
+    for (var i = 0; i < series.length; i++) {
+      if (series[i].stack == stack) {
+        // datavalue += series[i].data[params.dataIndex]
+        datavalue = accAdd(datavalue, series[i].data[params.dataIndex]);
       }
-    series[series.length - 1].label.formatter = getSum2
+    }
-    series[series.length - 2].label.formatter = getSum1
+    if(stack=='生产额'){
+      stack=t('messages.Production')
+    }else if(stack=='用电量'){
+      stack=t('messages.powerTip')
+    }
+
+    return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
+  }
+  series[series.length - 1].label.formatter = getSum2;
+  series[series.length - 2].label.formatter = getSum1;
+};
+
+function setchartWH(width: any, height: any) {
+  echartsData.power!.div = power.value;
+  power.value.style.height = height/20*5 + "px";
+  power.value.style.width = width + "px";
+  
+  powerjixie.value.style.height = height/20*15 + "px";
+  powerjixie.value.style.width = width + "px";
+  refborder4.value.resetWH();
+  if (echartsData.power.box) {
+    echartsData.power.box.resize();
+    echartsData2.power.box.resize();
+  }
 }
-
+onMounted(() => {});
-function setchartWH(width:any,height:any){
-  echartsData.power!.div=power.value
-    power.value.style.height=height+'px'
-    power.value.style.width=width+'px'
-  
-  refborder4.value.resetWH()
-if(echartsData.power.box){
-  echartsData.power.box.resize()
-}
-
-}
-onMounted(() => {
-
-})
 
 // return{setchartWH}
 defineExpose({
   setchartWH,
-  setData
+  setData,
-})
+});
-
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/views/energyConsumeJixiefenchang/content/chart/power2023.vue

@@ -1,5 +1,5 @@
 <!--
- * @FilePath: \wwwd:\code\screenFront-branches\src\views\energyConsume\content\chart\power2023.vue
+ * @FilePath: \wwwd:\code\screenFront\src\views\energyConsume\content\chart\power2023.vue
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-13 15:04:23
@@ -21,7 +21,7 @@
 import {getCurrentInstance, onMounted, reactive, ref} from "vue"
 import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
 import {accAdd} from '@/utils/precision'
-import border4 from "@/components/borderBox/border4.vue"
+import border4 from "@/components/borderBox/border6.vue"
 const { proxy } = getCurrentInstance() as any;
 let props=defineProps<{
       title:string
@@ -52,10 +52,12 @@ for(let key in res.month){
     emphasis: {
       focus: 'coordinateSystem',
       label: {
-      show: true
+      show: true,
+      formatter:function(value,index){
+        return value.value.toLocaleString()
+      }
       }
     },
-    barWidth:'70%',
     data: res.month[key]
   })
 }
@@ -78,6 +80,7 @@ series.push({
   // barWidth: 30,
   label: {
     show: true,
+    
     position: 'right',
     color: '#fff'
   }
@@ -96,7 +99,8 @@ series.push({
       textStyle:{
           color:'#fff',
           fontSize:20
-      }
+      },
+      top: '3%',
   },
 tooltip: {
   trigger: 'item',
@@ -110,22 +114,25 @@ tooltip: {
 // color:color,
 legend: {
   type:'scroll',
-  width:400,
+  // width:400,
-  right:20,
+  // right:20,
-  // top: '3%',
+  top: '11%',
   // itemStyle:{
   //     data:yue
   //   },
 },
 grid: {
-      top: "8%",
+      top: "20%",
       left: "3%",
       right: "10%",
       bottom: "3%",
       containLabel: true,
     },
 xAxis: {
-  type: 'value'
+  type: 'value',
+  splitLine:{
+      show:false
+    }
 },
 yAxis: {
   type: 'category',

src/views/energyConsumeJixiefenchang/content/top.vue

@@ -69,6 +69,7 @@ let gasOption = reactive({
       textStyle: {
         color: "rgb(255,255,255,0.9)",
       },
+      top:'2%'
     },
     tooltip: {
       trigger: "item",
@@ -81,10 +82,11 @@ let gasOption = reactive({
     legend: {
       type: "scroll",
       width: 800,
-      right: 20,
+      // right: 20,
+      top:'8%'
     },
     grid: {
-      top: "8%",
+      top: "15%",
       left: "3%",
       right: "0%",
       bottom: "3%",

src/views/generalEnvironment/content/chart/humiture.vue

@@ -36,19 +36,21 @@ const setData = (value: any, type: number) => {
   echartsData.humiture!.data = {
     title: {
       text: echartsData.humiture!.title,
+      top:'2%'
     },
     tooltip: {
       trigger: "axis",
       axisPointer: {
         type: "shadow",
       },
+
     },
     legend: {
       // bottom: "3%",
-      right:'50'
+      top:'6%'
     },
     grid: {
-      top: "8%",
+      top: "15%",
       left: "3%",
       right: "4%",
       bottom: "3%",

src/views/generalEnvironment/content/chart/noise.vue

@@ -57,20 +57,20 @@ const setData = (limit: any, value: any, type: number) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'1%'
+    },
+    legend: {
+      top: "4%",
+      width: "auto",
     },
     grid: {
-      top: "8%",
+      top: "10%",
       left: "3%",
       right: "4%",
       bottom: "3%",
       containLabel: true,
     },
     color:["","#4992FF","#FF6E76"],
-    legend: {
-      itemStyle:{
-        // color:["#4992FF","#FF6E76"]
-      }
-    },
     tooltip: {
       // trigger: "axis",
       // axisPointer: {

src/views/generalEnvironment/content/chart/pm.vue

@@ -47,10 +47,11 @@ const setData = (value: any, type: number) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'2%'
     },
     grid: {
       // 让图表占满容器
-      top: "0px",
+      top: "2%",
       left: "0px",
       right: "0px",
       bottom: "0px",

src/views/generalEnvironmentjixiefenchang/content/chart/humiture.vue

@@ -32,23 +32,25 @@ const setData = (value: any, type: number) => {
   });
   //防止数据先执行时获取不到div
   echartsData.humiture!.div = humiture.value;
-  echartsData.humiture!.title =  t('messages.TemperatureHumidity');
+  echartsData.humiture!.title = t('messages.TemperatureHumidity');
   echartsData.humiture!.data = {
     title: {
       text: echartsData.humiture!.title,
+      top:'2%'
     },
     tooltip: {
       trigger: "axis",
       axisPointer: {
         type: "shadow",
       },
+
     },
     legend: {
       // bottom: "3%",
-      right:'50'
+      top:'6%'
     },
     grid: {
-      top: "8%",
+      top: "15%",
       left: "3%",
       right: "4%",
       bottom: "3%",
@@ -74,7 +76,7 @@ const setData = (value: any, type: number) => {
         name: `${t('messages.TemperatureRange')}(°C)(${t('messages.fanwei')}：${value.bottom.temp}°C - ${value.top.temp}°C)`,
         type: "bar",
         data: y.temp,
-        barWidth: '20%',
+        barWidth: '30%',
         itemStyle: {
           color: function (params) {
             var index_color = params.value;
@@ -105,7 +107,7 @@ const setData = (value: any, type: number) => {
               name: t('messages.TemperatureRange'),
               yAxis: value.bottom.temp,
               label: {
-                formatter:  `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_down')}： ${value.bottom.temp} °C`,
+                formatter: `${t('messages.TemperatureRange')}${t('messages.TemperatureRange_down')}： ${value.bottom.temp} °C`,
                 position: "middle",
               },
               lineStyle: {
@@ -130,7 +132,7 @@ const setData = (value: any, type: number) => {
         name: `${t('messages.HumidityRange')}(%RH)(${t('messages.fanwei')}：${value.bottom.humidity}%RH - ${value.top.humidity}%RH)`,
         type: "bar",
         data: y.humidity,
-        barWidth: '20%',
+        barWidth: '30%',
         itemStyle: {
           color: function (params) {
             var index_color = params.value;

src/views/generalEnvironmentjixiefenchang/content/chart/noise.vue

@@ -48,7 +48,7 @@ const setData = (limit: any, value: any, type: number) => {
     y.push(res.value);
   });
   echartsData.noise!.div = noise.value;
-  echartsData.noise!.title = t('messages.noise_DB');
+  echartsData.noise!.title =t('messages.noise_DB');
   echartsData.noise!.data = {
     title: {
       text: echartsData.noise!.title,
@@ -57,20 +57,20 @@ const setData = (limit: any, value: any, type: number) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'1%'
+    },
+    legend: {
+      top: "4%",
+      width: "auto",
     },
     grid: {
-      top: "8%",
+      top: "10%",
       left: "3%",
       right: "4%",
       bottom: "3%",
       containLabel: true,
     },
     color:["","#4992FF","#FF6E76"],
-    legend: {
-      itemStyle:{
-        // color:["#4992FF","#FF6E76"]
-      }
-    },
     tooltip: {
       // trigger: "axis",
       // axisPointer: {
@@ -78,7 +78,7 @@ const setData = (limit: any, value: any, type: number) => {
       //   type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
       //   axis: "auto",
       // },
-      // formatter: "{b} : {c} db",
+      // formatter: "{b} : {c} dB",
     },
     xAxis: {
       type: "category",
@@ -97,7 +97,7 @@ const setData = (limit: any, value: any, type: number) => {
       { 
         data: y,
         type: "bar",
-        barWidth: '45%',
+        barWidth: '50%',
         itemStyle:{
           color:function (params) {
               var index_color = params.value;
@@ -148,7 +148,6 @@ const setData = (limit: any, value: any, type: number) => {
 };
 
 const change = (item: EDataPersonItem) => {
-  
   let Ebox
     if(!item.box){
      Ebox = proxy.$echarts.init(item.div, "dark");

src/views/generalEnvironmentjixiefenchang/content/chart/pm.vue

@@ -47,10 +47,11 @@ const setData = (value: any, type: number) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'2%'
     },
     grid: {
       // 让图表占满容器
-      top: "0px",
+      top: "2%",
       left: "0px",
       right: "0px",
       bottom: "0px",
@@ -122,9 +123,7 @@ const setData = (value: any, type: number) => {
           formatter: "{value} μg/m3",
           color: "inherit",
         },
-        title: {
+        
-          offsetCenter: [0, "-20%"],
-        },
         data: [
           {
             value: value.two,
@@ -194,16 +193,28 @@ const setData = (value: any, type: number) => {
       },
     ],
   };
-  if (type == 1) {
+  // if (type == 1) {
     change(echartsData.humiture);
-  } else {
+  // } else {
-    updata(echartsData.humiture);
+  //   updata(echartsData.humiture);
-  }
+  // }
 };
 
 const change = (item: EDataPersonItem) => {
-  let Ebox = markRaw(proxy.$echarts.init(item.div, "dark"));
+  // let Ebox = markRaw(proxy.$echarts.init(item.div, "dark"));
+  // Ebox.setOption(item?.data);
+  // item.box = Ebox;
+
+  let Ebox;
+  //判断是否已经生成过一次dom，没生成就新建生成过就拿之前的dom
+  if (!item.box) {
+    Ebox = markRaw(proxy.$echarts.init(item.div, "dark"))
+  } else {
+    Ebox = item.box;
+  }
+  //将拿到的dom设置数据源
   Ebox.setOption(item.data);
+  //保存新设置的dom
   item.box = Ebox;
 };
 const updata = (item: EDataPersonItem) => {

src/views/realtimeSecurity/content/chart/pipe.vue

@@ -146,9 +146,10 @@ const setData = (value: any, type: number) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'1%'
     },
     grid: {
-      top: "8%",
+      top: "15%",
       left: "3%",
       right: "4%",
       bottom: "3%",
@@ -160,7 +161,9 @@ const setData = (value: any, type: number) => {
         type: "shadow",
       },
     },
-    legend: {},
+    legend: {
+      top: "5%",
+    },
     xAxis: {
       type: "category",
       data: newx,

src/views/realtimeSecurity/content/chart/pressure.vue

@@ -41,7 +41,8 @@ const setData=(value:any,type:number)=>{
         textStyle:{
             color:'#fff',
             fontSize:20
-        }
+        },
+        top:'1%'
     },
   series: [
     {

src/views/realtimeSecurityJixiefenchang/content/chart/pipe.vue

@@ -2,7 +2,7 @@
   <div>
     <border3 ref="refborder3">
       <template v-slot>
-        <div ref="pipe" class="ddd"></div>
+        <div ref="pipe"></div>
       </template>
     </border3>
   </div>
@@ -146,9 +146,10 @@ const setData = (value: any, type: number) => {
         color: "#fff",
         fontSize: 20,
       },
+      top:'1%'
     },
     grid: {
-      top: "8%",
+      top: "15%",
       left: "3%",
       right: "4%",
       bottom: "3%",
@@ -160,7 +161,9 @@ const setData = (value: any, type: number) => {
         type: "shadow",
       },
     },
-    legend: {},
+    legend: {
+      top: "5%",
+    },
     xAxis: {
       type: "category",
       data: newx,
@@ -183,8 +186,7 @@ const setData = (value: any, type: number) => {
         itemStyle:{
           color:function (params) {
               var index_color = params.value[2];              
-              
+              if (index_color >= value.top.value) {
-              if (index_color >= value.top) {
                 return "#FF6E76";
               } else {
                 return "#4992FF";
@@ -362,7 +364,4 @@ defineExpose({
 });
 </script>
 
-<style scoped>
+<style scoped></style>
-.ddd{
-  margin-right: 5px;
-}</style>