1. echarts y 轴最大值自适应优化

src/components/chart/BarAndLine.vue

@@ -10,7 +10,6 @@
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import EchartsUtil from '/@/utils/echartsUtil';
   import { merge } from 'lodash-es';
-  import { columns } from '/@/views/monitor/datalog/datalog.data';
   type ChartColumn = {
     legend: string;
     seriesName: string;
@@ -108,17 +107,6 @@
         emit('refresh');
       });
 
-      // watch(yMax, (newVal) => {
-      //   // y轴最大值变化，需要重新更新
-      //   chartsColumns = chartsColumns.map((column: ChartColumn) => {
-      //     column['ymax'] = newVal;
-      //   });
-      //   optionUtil.initChartOption(props.chartsType, chartsColumns);
-      //   spinning.value = false;
-      //   initCharts(true);
-      //   emit('refresh');
-      // });
-
       function initChartsOption() {
         // debugger;
         optionUtil = new EchartsUtil(merge(option, props.option));
@@ -144,7 +132,9 @@
             const max = Math.max(...option.series[index].data);
             const digitCount = max.toFixed(0).length;
             let yMax = 0;
-            if (digitCount < 2) {
+            if (digitCount < 1) {
+              yMax = 1;
+            } else if (digitCount < 2) {
               yMax = 10;
             } else if (digitCount < 3) {
               const n = Number((Number(max.toFixed(0)) / 10).toFixed(0));

src/views/vent/gas/gasHome/gasHome.api.ts

@@ -2,9 +2,13 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
   list = '/monitor/system',
+  gasSystem = '/ventanaly-device/monitor/gasSystem',
 }
 /**
  * 列表接口
  * @param params
  */
 export const list = (params) => defHttp.post({ url: Api.list, params });
+
+/** 获取瓦斯系统数据 */
+export const gasSystem = (params) => defHttp.post({ url: Api.gasSystem, params });

src/views/vent/home/clique/components/dialog-modal.vue

@@ -51,7 +51,7 @@
         <span class="dw">{{ item.unit }}</span>
       </div>
     </div>
-    <div class="modal-card3">
+    <div class="modal-card3 modal-card2">
       <div class="modal-wind" v-for="(item, index) in windLfList1" :key="index">
         <span class="text">{{ item.label }}</span>
         <span class="num">{{ item.value }}</span>
@@ -510,7 +510,7 @@
         .num {
           position: absolute;
           top: 50%;
-          right: 45px;
+          right: 65px;
           transform: translate(0, -50%);
           color: #fff;
           font-family: 'douyuFont';
@@ -561,57 +561,6 @@
       box-sizing: border-box;
       background: url('../../../../../assets/images/company/area3.png') no-repeat center;
       background-size: 100% 100%;
-
-      .modal-wind {
-        position: relative;
-        width: 50%;
-        height: 34px;
-
-        .text {
-          position: absolute;
-          top: 50%;
-          left: 40px;
-          transform: translate(0, -50%);
-          color: #fff;
-          font-size: 14px;
-        }
-
-        .num {
-          position: absolute;
-          top: 50%;
-          right: 45px;
-          transform: translate(0, -50%);
-          color: #fff;
-          font-family: 'douyuFont';
-          font-size: 14px;
-        }
-
-        .dw {
-          position: absolute;
-          top: 50%;
-          right: 12px;
-          transform: translate(0, -50%);
-          color: #fff;
-        }
-
-        &:nth-child(1) {
-          background: url('../../../../../assets/images/company/green.png') no-repeat center;
-          background-size: 100% 100%;
-        }
-
-        &:nth-child(2) {
-          background: url('../../../../../assets/images/company/purple.png') no-repeat center;
-          background-size: 100% 100%;
-        }
-
-        &:nth-child(1) .num {
-          color: #31fbcc;
-        }
-
-        &:nth-child(2) .num {
-          color: #97a3fa;
-        }
-      }
     }
 
     // .modal-card3 {

src/views/vent/home/clique/components/wind-road.vue

@@ -21,423 +21,425 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, nextTick, defineProps, watch } from 'vue';
-import { SvgIcon } from '/@/components/Icon';
-import * as echarts from 'echarts';
+  import { ref, reactive, nextTick, defineProps, watch } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import * as echarts from 'echarts';
 
-let props = defineProps({
-  roadData: {
-    type: Object,
-    default: () => {
-      return {};
+  let props = defineProps({
+    roadData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
-  },
-});
+  });
 
-let roadTitle = ref('通风巷道长度统计');
-let road = ref(); //获取Dom节点
-let roadDatas = reactive({
-  label: '通风巷道总长度',
-  value: '',
-});
-let maxY = ref<any>(0)
+  let roadTitle = ref('通风巷道长度统计');
+  let road = ref(); //获取Dom节点
+  let roadDatas = reactive({
+    label: '通风巷道总长度',
+    value: '',
+  });
+  let maxY = ref<any>(0);
 
-// let xData = reactive(['宝德', '榆家梁', '锦界', '大柳塔', '哈拉沟']);
-let xData = ref<any[]>([]);
-// var yData = reactive([200, 100, 200, 200, 100]);
-// var maxData = reactive([300, 200, 300, 300, 200]);
-let yData = ref<any[]>([]);
-let maxData = reactive<any[]>([]);
+  // let xData = reactive(['宝德', '榆家梁', '锦界', '大柳塔', '哈拉沟']);
+  let xData = ref<any[]>([]);
+  // var yData = reactive([200, 100, 200, 200, 100]);
+  // var maxData = reactive([300, 200, 300, 300, 200]);
+  let yData = ref<any[]>([]);
+  let maxData = reactive<any[]>([]);
 
-function getOption() {
-  nextTick(() => {
-    const myChart = echarts.init(road.value);
-    let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
-    let option = {
-      grid: {
-        top: '14%',
-        left: '2%',
-        bottom: '4%',
-        right: '2%',
-        containLabel: true,
-      },
-      xAxis: {
-        data: xData.value,
-        axisTick: {
-          show: false,
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(road.value);
+      let color = ['#FF9A22', '#FFD56E', '#00EC28', '#5DF076', '#12B9DB', '#6F8EF2'];
+      let option = {
+        grid: {
+          top: '14%',
+          left: '2%',
+          bottom: '4%',
+          right: '2%',
+          containLabel: true,
         },
+        xAxis: {
+          data: xData.value,
+          axisTick: {
+            show: false,
+          },
 
-        axisLine: {
-          lineStyle: {
-            color: 'rgba(187, 187, 187,.2)',
-            type: 'dashed',
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(187, 187, 187,.2)',
+              type: 'dashed',
+            },
           },
-        },
-        splitLine: {
-          show: false,
-        },
-        axisLabel: {
-          interval: 0,
-          textStyle: {
-            color: '#fff',
-            fontSize: 14,
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',
+              fontSize: 14,
+            },
+            margin: 20, //刻度标签与轴线之间的距离。
           },
-          margin: 20, //刻度标签与轴线之间的距离。
         },
-      },
 
-      yAxis: {
-        max: Math.ceil(roadDatas.value + 1000),
-        name: '长度(km)',
-        nameTextStyle: {
-          color: '#3df6ff',
-          fontSize: 12,
-          lineHeight: 20,
-        },
-        splitLine: {
-          lineStyle: {
-            color: 'rgba(187, 187, 187,.2)',
-            type: 'dashed',
+        yAxis: {
+          max: Math.ceil(roadDatas.value + 1000),
+          name: '长度(km)',
+          nameTextStyle: {
+            color: '#3df6ff',
+            fontSize: 12,
+            lineHeight: 20,
           },
-        },
-        axisTick: {
-          show: false,
-        },
-        axisLine: {
-          show: false,
-        },
-        axisLabel: {
-          textStyle: {
-            color: '#fff',
-            fontSize: 14,
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(187, 187, 187,.2)',
+              type: 'dashed',
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#fff',
+              fontSize: 14,
+            },
           },
         },
-      },
 
-      series: [
-        {
-          //三个最低下的圆片
-          name: '',
-          type: 'pictorialBar',
-          symbolSize: [30, 10],
-          symbolOffset: [0, 7],
-          z: 12,
-          itemStyle: {
-            opacity: 1,
-            color: function (params) {
-              console.log(params, 'index-----11111111111111111');
-              // var a = params.name.slice(0, 2);
+        series: [
+          {
+            //三个最低下的圆片
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [30, 10],
+            symbolOffset: [0, 7],
+            z: 12,
+            itemStyle: {
+              opacity: 1,
+              color: function (params) {
+                console.log(params, 'index-----11111111111111111');
+                // var a = params.name.slice(0, 2);
 
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: color[params.seriesIndex], // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: color[params.seriesIndex + 1], // 100% 处的颜色
-                  },
-                ],
-                false
-              );
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: color[params.seriesIndex], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: color[params.seriesIndex + 1], // 100% 处的颜色
+                    },
+                  ],
+                  false
+                );
+              },
             },
+            data: [1, 1, 1, 1, 1],
           },
-          data: [1, 1, 1, 1, 1],
-        },
 
-        //下半截柱状图
-        {
-          name: '2020',
-          type: 'bar',
-          barWidth: 30,
-          barGap: '-100%',
-          itemStyle: {
-            //lenged文本
-            opacity: 0.7,
-            color: function (params) {
-              console.log(params, 'index-----222222222222222');
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: color[params.dataIndex], // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: color[params.dataIndex + 1], // 100% 处的颜色
-                  },
-                ],
-                false
-              );
-              // var a = params.name.slice(0, 2);
-              // if (a === '全矿') {
-              //   return new echarts.graphic.LinearGradient(
-              //     0,
-              //     0,
-              //     0,
-              //     1,
-              //     [
-              //       {
-              //         offset: 0,
-              //         color: '#FF9A22', // 0% 处的颜色
-              //       },
-              //       {
-              //         offset: 1,
-              //         color: '#FFD56E', // 100% 处的颜色
-              //       },
-              //     ],
-              //     false
-              //   );
-              // }
-              // // else if (a === '榆家' || a == '大柳') {
-              // //   return new echarts.graphic.LinearGradient(
-              // //     0,
-              // //     0,
-              // //     0,
-              // //     1,
-              // //     [
-              // //       {
-              // //         offset: 0,
-              // //         color: '#00EC28', // 0% 处的颜色
-              // //       },
-              // //       {
-              // //         offset: 1,
-              // //         color: '#5DF076', // 100% 处的颜色
-              // //       },
-              // //     ],
-              // //     false
-              // //   );
-              // // }
-              // // else if (a === '锦界' || a == '哈拉') {
-              // //   return new echarts.graphic.LinearGradient(
-              // //     0,
-              // //     0,
-              // //     0,
-              // //     1,
-              // //     [
-              // //       {
-              // //         offset: 0,
-              // //         color: '#12B9DB', // 0% 处的颜色
-              // //       },
-              // //       {
-              // //         offset: 1,
-              // //         color: '#6F8EF2', // 100% 处的颜色
-              // //       },
-              // //     ],
-              // //     false
-              // //   );
-              // // }
+          //下半截柱状图
+          {
+            name: '2020',
+            type: 'bar',
+            barWidth: 30,
+            barGap: '-100%',
+            itemStyle: {
+              //lenged文本
+              opacity: 0.7,
+              color: function (params) {
+                console.log(params, 'index-----222222222222222');
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: color[params.dataIndex], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: color[params.dataIndex + 1], // 100% 处的颜色
+                    },
+                  ],
+                  false
+                );
+                // var a = params.name.slice(0, 2);
+                // if (a === '全矿') {
+                //   return new echarts.graphic.LinearGradient(
+                //     0,
+                //     0,
+                //     0,
+                //     1,
+                //     [
+                //       {
+                //         offset: 0,
+                //         color: '#FF9A22', // 0% 处的颜色
+                //       },
+                //       {
+                //         offset: 1,
+                //         color: '#FFD56E', // 100% 处的颜色
+                //       },
+                //     ],
+                //     false
+                //   );
+                // }
+                // // else if (a === '榆家' || a == '大柳') {
+                // //   return new echarts.graphic.LinearGradient(
+                // //     0,
+                // //     0,
+                // //     0,
+                // //     1,
+                // //     [
+                // //       {
+                // //         offset: 0,
+                // //         color: '#00EC28', // 0% 处的颜色
+                // //       },
+                // //       {
+                // //         offset: 1,
+                // //         color: '#5DF076', // 100% 处的颜色
+                // //       },
+                // //     ],
+                // //     false
+                // //   );
+                // // }
+                // // else if (a === '锦界' || a == '哈拉') {
+                // //   return new echarts.graphic.LinearGradient(
+                // //     0,
+                // //     0,
+                // //     0,
+                // //     1,
+                // //     [
+                // //       {
+                // //         offset: 0,
+                // //         color: '#12B9DB', // 0% 处的颜色
+                // //       },
+                // //       {
+                // //         offset: 1,
+                // //         color: '#6F8EF2', // 100% 处的颜色
+                // //       },
+                // //     ],
+                // //     false
+                // //   );
+                // // }
+              },
             },
+            data: yData.value,
           },
-          data: yData.value,
-        },
 
-        {
-          // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
-          type: 'bar',
-          barWidth: 30,
-          barGap: '-100%',
-          stack: '广告',
-          itemStyle: {
-            color: 'transparent',
+          {
+            // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
+            type: 'bar',
+            barWidth: 30,
+            barGap: '-100%',
+            stack: '广告',
+            itemStyle: {
+              color: 'transparent',
+            },
+            data: maxData,
           },
-          data: maxData,
-        },
 
-        {
-          name: '', //头部
-          type: 'pictorialBar',
-          symbolSize: [30, 10],
-          symbolOffset: [0, -7],
-          z: 12,
-          symbolPosition: 'end',
-          itemStyle: {
-            color: '#163F7A',
-            opacity: 1,
+          {
+            name: '', //头部
+            type: 'pictorialBar',
+            symbolSize: [30, 10],
+            symbolOffset: [0, -7],
+            z: 12,
+            symbolPosition: 'end',
+            itemStyle: {
+              color: '#163F7A',
+              opacity: 1,
+            },
+            data: maxData,
           },
-          data: maxData,
-        },
 
-        {
-          name: '',
-          type: 'pictorialBar',
-          symbolSize: [30, 10],
-          symbolOffset: [0, -7],
-          z: 12,
-          itemStyle: {
-            opacity: 1,
-            color: function (params) {
-              console.log(params, 'index-----333333333333333');
-              return new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  {
-                    offset: 0,
-                    color: color[params.dataIndex], // 0% 处的颜色
-                  },
-                  {
-                    offset: 1,
-                    color: color[params.dataIndex + 1], // 100% 处的颜色
-                  },
-                ],
-                false
-              );
+          {
+            name: '',
+            type: 'pictorialBar',
+            symbolSize: [30, 10],
+            symbolOffset: [0, -7],
+            z: 12,
+            itemStyle: {
+              opacity: 1,
+              color: function (params) {
+                console.log(params, 'index-----333333333333333');
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: color[params.dataIndex], // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: color[params.dataIndex + 1], // 100% 处的颜色
+                    },
+                  ],
+                  false
+                );
+              },
             },
-          },
-          symbolPosition: 'end',
+            symbolPosition: 'end',
 
-          label: {
-            normal: {
-              show: true,
-              position: 'top',
-              fontSize: 12,
-              // fontWeight: 'bold',
-              color: '#fff',
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                fontSize: 12,
+                // fontWeight: 'bold',
+                color: '#fff',
+              },
             },
+            data: yData.value,
           },
-          data: yData.value,
-        },
 
-        {
-          name: '2019',
-          type: 'bar',
-          barWidth: 30,
-          barGap: '-100%',
-          z: 0,
-          itemStyle: {
-            color: '#163F7A',
-            opacity: 0.7,
-          },
+          {
+            name: '2019',
+            type: 'bar',
+            barWidth: 30,
+            barGap: '-100%',
+            z: 0,
+            itemStyle: {
+              color: '#163F7A',
+              opacity: 0.7,
+            },
 
-          data: maxData,
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
+            data: maxData,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
 
-watch(
-  () => props.roadData,
-  (newR, oldR) => {
-    console.log(newR, '通风巷道长度数据-------');
-    if (JSON.stringify(newR) != '{}') {
-      maxData.length = 0;
-      roadDatas.value = newR.totallength;
-      maxY.value = roadDatas.value.indexOf('.') == -1 ? roadDatas.value : roadDatas.value.substring(0, roadDatas.value.indexOf('.'))
-      if (maxY.value.length < 2) {
-          maxY.value = 10
+  watch(
+    () => props.roadData,
+    (newR, oldR) => {
+      console.log(newR, '通风巷道长度数据-------');
+      if (JSON.stringify(newR) != '{}') {
+        maxData.length = 0;
+        roadDatas.value = newR.totallength;
+        maxY.value = roadDatas.value.indexOf('.') == -1 ? roadDatas.value : roadDatas.value.substring(0, roadDatas.value.indexOf('.'));
+        if (maxY.value.length < 1) {
+          maxY.value = 1;
+        } else if (maxY.value.length < 2) {
+          maxY.value = 10;
         } else if (maxY.value.length < 3) {
-          maxY.value = (Number(maxY.value[0])+1) * 10
+          maxY.value = (Number(maxY.value[0]) + 1) * 10;
         } else if (maxY.value.length < 4) {
-          maxY.value = (Number(maxY.value[0])+1) * 100
+          maxY.value = (Number(maxY.value[0]) + 1) * 100;
         } else if (maxY.value.length < 5) {
-          maxY.value = (Number(maxY.value[0])+1) * 1000
+          maxY.value = (Number(maxY.value[0]) + 1) * 1000;
         } else if (maxY.value.length < 6) {
-          maxY.value = (Number(maxY.value[0])+1) * 10000
+          maxY.value = (Number(maxY.value[0]) + 1) * 10000;
         }
-      xData.value = newR.data1;
-      yData.value = newR.data;
-      yData.value.forEach((el) => {
-        maxData.push(el + 200);
-      });
-      getOption();
+        xData.value = newR.data1;
+        yData.value = newR.data;
+        yData.value.forEach((el) => {
+          maxData.push(el + 200);
+        });
+        getOption();
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
     }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
+  );
 </script>
 <style lang="less" scoped>
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.windRoad {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .road-title {
-    position: absolute;
-    left: 50px;
-    top: 10px;
-    color: #fff;
+  @font-face {
     font-family: 'douyuFont';
-    font-size: 14px;
+    src: url('../../../../assets/font/douyuFont.otf');
   }
 
-  .road-content {
-    position: relative;
+  .windRoad {
+    width: 100%;
     height: 100%;
-    padding: 52px 40px 23px 40px;
-    box-sizing: border-box;
-
-    .left-jt {
-      position: absolute;
-      top: 50%;
-      left: 18px;
-      transform: translate(0, -50%);
-    }
+    position: relative;
 
-    .right-jt {
+    .road-title {
       position: absolute;
-      top: 50%;
-      right: 18px;
-      transform: translate(0, -50%);
+      left: 50px;
+      top: 10px;
+      color: #fff;
+      font-family: 'douyuFont';
+      font-size: 14px;
     }
 
-    .road-card {
+    .road-content {
+      position: relative;
       height: 100%;
+      padding: 52px 40px 23px 40px;
+      box-sizing: border-box;
+
+      .left-jt {
+        position: absolute;
+        top: 50%;
+        left: 18px;
+        transform: translate(0, -50%);
+      }
+
+      .right-jt {
+        position: absolute;
+        top: 50%;
+        right: 18px;
+        transform: translate(0, -50%);
+      }
 
-      .head-nav {
-        height: 30px;
-        line-height: 30px;
-        padding-left: 58px;
-        box-sizing: border-box;
-        background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
-        background-size: 100% 100%;
+      .road-card {
+        height: 100%;
 
-        span {
-          font-size: 14px;
+        .head-nav {
+          height: 30px;
+          line-height: 30px;
+          padding-left: 58px;
+          box-sizing: border-box;
+          background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
+          background-size: 100% 100%;
 
-          &:nth-child(1) {
-            color: #fff;
-          }
+          span {
+            font-size: 14px;
 
-          &:nth-child(2) {
-            color: #3df6ff;
+            &:nth-child(1) {
+              color: #fff;
+            }
+
+            &:nth-child(2) {
+              color: #3df6ff;
+            }
           }
         }
-      }
 
-      .echart-box {
-        height: calc(100% - 30px);
+        .echart-box {
+          height: calc(100% - 30px);
 
-        .road {
-          width: 100%;
-          height: 100%;
+          .road {
+            width: 100%;
+            height: 100%;
+          }
         }
       }
     }
   }
-}
 </style>

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -8,309 +8,314 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
-import * as echarts from 'echarts';
-const emit = defineEmits(['goDetail']);
+  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
+  import * as echarts from 'echarts';
+  const emit = defineEmits(['goDetail']);
 
-let props = defineProps({
-  flList: Array,
-});
+  let props = defineProps({
+    flList: Array,
+  });
 
-//获取dom节点
-let windBar = ref<any>();
-//坐标轴最大值
-let maxY = ref<any>(0);
-//echart数据
-let echartData = reactive<any>({ ydata: [], xdata: [] });
-//跳转详情
-function getDetail() {
-  emit('goDetail', 'windrect');
-}
-function getOption() {
-  nextTick(() => {
-    const myChart = echarts.init(windBar.value);
-    let option = {
-      color: [
-        '#63caff',
-        '#49beff',
-        'rgba(74, 205, 255,.1)',
-        '#03387a',
-        '#03387a',
-        '#6c93ee',
-        '#a9abff',
-        '#f7a23f',
-        '#27bae7',
-        '#ff6d9d',
-        '#cb79ff',
-        '#f95b5a',
-        '#ccaf27',
-        '#38b99c',
-        '#93d0ff',
-        '#bd74e0',
-        '#fd77da',
-        '#dea700',
-      ],
-      grid: {
-        containLabel: true,
-        left: 30,
-        right: 30,
-        bottom: echartData.xdata.length > 8 ? 30 : 15,
-        top: 40,
-      },
+  //获取dom节点
+  let windBar = ref<any>();
+  //坐标轴最大值
+  let maxY = ref<any>(0);
+  //echart数据
+  let echartData = reactive<any>({ ydata: [], xdata: [] });
+  //跳转详情
+  function getDetail() {
+    emit('goDetail', 'windrect');
+  }
+  function getOption() {
+    nextTick(() => {
+      const myChart = echarts.init(windBar.value);
+      let option = {
+        color: [
+          '#63caff',
+          '#49beff',
+          'rgba(74, 205, 255,.1)',
+          '#03387a',
+          '#03387a',
+          '#6c93ee',
+          '#a9abff',
+          '#f7a23f',
+          '#27bae7',
+          '#ff6d9d',
+          '#cb79ff',
+          '#f95b5a',
+          '#ccaf27',
+          '#38b99c',
+          '#93d0ff',
+          '#bd74e0',
+          '#fd77da',
+          '#dea700',
+        ],
+        grid: {
+          containLabel: true,
+          left: 30,
+          right: 30,
+          bottom: echartData.xdata.length > 8 ? 30 : 15,
+          top: 40,
+        },
 
-      xAxis: {
-        type: 'category',
-        data: echartData.xdata,
-        axisLabel: {
-          formatter: function (params) {
-            var newParamsName = ''; // 最终拼接成的字符串
-            var paramsNameNumber = params.length; // 实际标签的个数
-            var provideNumber = 6; // 每行能显示的字的个数
-            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
-            /**
-             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-             */
-            // 条件等同于rowNumber>1
-            if (paramsNameNumber > provideNumber) {
-              /** 循环每一行,p表示行 */
-              for (var p = 0; p < rowNumber; p++) {
-                var tempStr = ''; // 表示每一次截取的字符串
-                var start = p * provideNumber; // 开始截取的位置
-                var end = start + provideNumber; // 结束截取的位置
-                // 此处特殊处理最后一行的索引值
-                if (p == rowNumber - 1) {
-                  // 最后一次不换行
-                  tempStr = params.substring(start, paramsNameNumber);
-                } else {
-                  // 每一次拼接字符串并换行
-                  tempStr = params.substring(start, end) + '\n';
+        xAxis: {
+          type: 'category',
+          data: echartData.xdata,
+          axisLabel: {
+            formatter: function (params) {
+              var newParamsName = ''; // 最终拼接成的字符串
+              var paramsNameNumber = params.length; // 实际标签的个数
+              var provideNumber = 6; // 每行能显示的字的个数
+              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber > provideNumber) {
+                /** 循环每一行,p表示行 */
+                for (var p = 0; p < rowNumber; p++) {
+                  var tempStr = ''; // 表示每一次截取的字符串
+                  var start = p * provideNumber; // 开始截取的位置
+                  var end = start + provideNumber; // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p == rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber);
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n';
+                  }
+                  newParamsName += tempStr; // 最终拼成的字符串
                 }
-                newParamsName += tempStr; // 最终拼成的字符串
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName = params;
               }
-            } else {
-              // 将旧标签的值赋给新标签
-              newParamsName = params;
-            }
-            //将最终的字符串返回
-            return newParamsName;
+              //将最终的字符串返回
+              return newParamsName;
+            },
+            fontSize: 14,
+            margin: 15,
+            interval: 0,
+            textStyle: {
+              color: '#b3b8cc',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
+            },
           },
-          fontSize: 14,
-          margin: 15,
-          interval: 0,
-          textStyle: {
-            color: '#b3b8cc',
+          splitLine: {
+            show: false,
           },
-        },
-        axisLine: {
-          lineStyle: {
-            color: 'rgba(62, 103, 164)',
+          axisTick: {
+            show: false,
           },
         },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-      },
 
-      yAxis: {
-        type: 'value',
-        name: '(m³/min)',
-        // max: maxY.value,
-        axisLabel: {
-          textStyle: {
-            fontSize: 14,
-            color: '#b3b8cc',
+        yAxis: {
+          type: 'value',
+          name: '(m³/min)',
+          // max: maxY.value,
+          axisLabel: {
+            textStyle: {
+              fontSize: 14,
+              color: '#b3b8cc',
+            },
           },
-        },
-        nameTextStyle: {
-          color: '#fff',
-          fontSize: 12,
-          lineHeight: 10,
-        },
-        splitLine: {
-          lineStyle: {
-            color: 'rgba(62, 103, 164,.4)',
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            lineHeight: 10,
           },
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-      },
-      series: [
-        {
-          data: echartData.ydata,
-          type: 'bar',
-          barMaxWidth: 'auto',
-          barWidth: 25,
-          itemStyle: {
-            color: {
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              type: 'linear',
-              global: false,
-              colorStops: [
-                {
-                  offset: 0,
-                  color: '#0b9eff',
-                },
-                {
-                  offset: 1,
-                  color: '#63caff',
-                },
-              ],
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(62, 103, 164,.4)',
             },
           },
-          label: {
-            show: true,
-            position: 'top',
-            distance: 10,
-            color: '#fff',
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
           },
         },
-        {
-          data: [1, 1, 1, 1, 1, 1, 1, 1],
-          type: 'pictorialBar',
-          barMaxWidth: '25',
-          symbol: 'diamond',
-          symbolOffset: [0, '50%'],
-          symbolSize: [25, 15],
-        },
-        {
-          data: echartData.ydata,
-          type: 'pictorialBar',
-          barMaxWidth: '25',
-          symbolPosition: 'end',
-          symbol: 'diamond',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [25, 12],
-          zlevel: 2,
-        },
-        {
-          data: [741, 741, 741, 741, 741, 741, 741, 741],
-          type: 'bar',
-          barMaxWidth: 'auto',
-          barWidth: 25,
-          barGap: '-100%',
-          zlevel: -1,
-        },
-        {
-          data: [1, 1, 1, 1, 1, 1, 1, 1],
-          type: 'pictorialBar',
-          barMaxWidth: '25',
-          symbol: 'diamond',
-          symbolOffset: [0, '50%'],
-          symbolSize: [25, 15],
-          zlevel: -2,
-        },
-        {
-          data: [741, 741, 741, 741, 741, 741, 741, 741],
-          type: 'pictorialBar',
-          barMaxWidth: '25',
-          symbolPosition: 'end',
-          symbol: 'diamond',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [25, 12],
-          zlevel: -1,
+        series: [
+          {
+            data: echartData.ydata,
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 25,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: 'linear',
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#0b9eff',
+                  },
+                  {
+                    offset: 1,
+                    color: '#63caff',
+                  },
+                ],
+              },
+            },
+            label: {
+              show: true,
+              position: 'top',
+              distance: 10,
+              color: '#fff',
+            },
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '25',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [25, 15],
+          },
+          {
+            data: echartData.ydata,
+            type: 'pictorialBar',
+            barMaxWidth: '25',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [25, 12],
+            zlevel: 2,
+          },
+          {
+            data: [741, 741, 741, 741, 741, 741, 741, 741],
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 25,
+            barGap: '-100%',
+            zlevel: -1,
+          },
+          {
+            data: [1, 1, 1, 1, 1, 1, 1, 1],
+            type: 'pictorialBar',
+            barMaxWidth: '25',
+            symbol: 'diamond',
+            symbolOffset: [0, '50%'],
+            symbolSize: [25, 15],
+            zlevel: -2,
+          },
+          {
+            data: [741, 741, 741, 741, 741, 741, 741, 741],
+            type: 'pictorialBar',
+            barMaxWidth: '25',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            symbolOffset: [0, '-50%'],
+            symbolSize: [25, 12],
+            zlevel: -1,
+          },
+        ],
+        dataZoom: [
+          {
+            // 这部分是关键
+            show: echartData.xdata.length > 8 ? true : false,
+            type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
+            start: 0, // 数据窗口范围的起始百分比
+            end: echartData.xdata.length > 8 && echartData.xdata.length < 16 ? 50 : echartData.xdata.length > 16 ? 25 : 100, // 数据窗口范围的结束百分比
+            height: 10, // 设置缩放条高度
+            left: 'center',
+            bottom: 25,
+            labelPrecision: 0, // 标签精度，默认为auto
+            showDetail: false, // 是否显示详情
+            showDataShadow: false, // 是否显示数据阴影
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          show: false,
         },
-      ],
-      dataZoom: [{
-        // 这部分是关键
-        show: echartData.xdata.length > 8 ? true : false,
-        type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
-        start: 0, // 数据窗口范围的起始百分比
-        end: echartData.xdata.length > 8 && echartData.xdata.length < 16 ? 50 : echartData.xdata.length > 16 ? 25 : 100, // 数据窗口范围的结束百分比
-        height: 10, // 设置缩放条高度
-        left: 'center',
-        bottom: 25,
-        labelPrecision: 0, // 标签精度，默认为auto
-        showDetail: false, // 是否显示详情
-        showDataShadow: false, // 是否显示数据阴影
-      }],
-      tooltip: {
-        trigger: 'axis',
-        show: false,
-      },
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-watch(
-  () => props.flList,
-  (val) => {
-    echartData.xdata.length = 0;
-    echartData.ydata.length = 0;
-    val.forEach((el: any) => {
-      if (el.readData.m3) {
-        echartData.xdata.push(el.strinstallpos);
-        echartData.ydata.push(el.readData.m3);
-      }
-    });
-    maxY.value = echartData.ydata.reduce((acr, cur) => {
-      return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
     });
-    maxY.value = maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'))
-        if (maxY.value.length < 2) {
-          maxY.value = 10
-        } else if (maxY.value.length < 3) {
-          maxY.value = (Number(maxY.value[0])+1) * 10
-        } else if (maxY.value.length < 4) {
-          maxY.value = (Number(maxY.value[0])+1) * 100
-        } else if (maxY.value.length < 5) {
-          maxY.value = (Number(maxY.value[0])+1) * 1000
-        } else if (maxY.value.length < 6) {
-          maxY.value = (Number(maxY.value[0])+1) * 10000
-        }
-    getOption();
-  },
-  {
-    deep: true,
   }
-);
+  watch(
+    () => props.flList,
+    (val) => {
+      echartData.xdata.length = 0;
+      echartData.ydata.length = 0;
+      val.forEach((el: any) => {
+        if (el.readData.m3) {
+          echartData.xdata.push(el.strinstallpos);
+          echartData.ydata.push(el.readData.m3);
+        }
+      });
+      maxY.value = echartData.ydata.reduce((acr, cur) => {
+        return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
+      });
+      maxY.value =
+        maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
+      if (maxY.value.length < 1) {
+        maxY.value = 1;
+      } else if (maxY.value.length < 2) {
+        maxY.value = 10;
+      } else if (maxY.value.length < 3) {
+        maxY.value = (Number(maxY.value[0]) + 1) * 10;
+      } else if (maxY.value.length < 4) {
+        maxY.value = (Number(maxY.value[0]) + 1) * 100;
+      } else if (maxY.value.length < 5) {
+        maxY.value = (Number(maxY.value[0]) + 1) * 1000;
+      } else if (maxY.value.length < 6) {
+        maxY.value = (Number(maxY.value[0]) + 1) * 10000;
+      }
+      getOption();
+    },
+    {
+      deep: true,
+    }
+  );
 
-onMounted(() => { });
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
-.windMonitor {
-  width: 100%;
-  height: 100%;
-  position: relative;
+  .windMonitor {
+    width: 100%;
+    height: 100%;
+    position: relative;
 
-  .title-top {
-    position: absolute;
-    top: 9px;
-    left: 46px;
-    color: #fff;
-    font-size: 16px;
-    font-family: 'douyuFont';
-    cursor: pointer;
+    .title-top {
+      position: absolute;
+      top: 9px;
+      left: 46px;
+      color: #fff;
+      font-size: 16px;
+      font-family: 'douyuFont';
+      cursor: pointer;
 
-    &:hover {
-      color: #66ffff;
+      &:hover {
+        color: #66ffff;
+      }
     }
-  }
-
-  .wind-contents {
-    position: absolute;
-    left: 0;
-    top: 36px;
-    width: 100%;
-    height: calc(100% - 36px);
 
-    .wind-bar {
+    .wind-contents {
+      position: absolute;
+      left: 0;
+      top: 36px;
       width: 100%;
-      height: 100%;
+      height: calc(100% - 36px);
+
+      .wind-bar {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
-}
 </style>