diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 8104301..441dc5a 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -323,9 +323,9 @@
   });
 }
 //水质信息
-export function getPortChannelEchart(code) {
+export function getWaterQualityEchart(code) {
   return request({
-    url: `/business/dataSiteRelation/getPortChannelEchart/${code}`,
+    url: `/business/dataSiteRelation/getWaterQualityEchart/${code}`,
     method: 'get',
   });
 }

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 8104301..441dc5a 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -323,9 +323,9 @@
   });
 }
 //水质信息
-export function getPortChannelEchart(code) {
+export function getWaterQualityEchart(code) {
   return request({
-    url: `/business/dataSiteRelation/getPortChannelEchart/${code}`,
+    url: `/business/dataSiteRelation/getWaterQualityEchart/${code}`,
     method: 'get',
   });
 }
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
index 6319ad2..e8d4472 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
@@ -1,13 +1,35 @@
 <template>
   <div id="YSIndex_right2">
     <div class="historySZ">
-      <div class="leve2Title">{{AllData.szHistoryData.lakerName}}历史水质</div>
+      <div class="leve2Title flex flex-justcontent-spacebetween">
+        <div @click="getData">历史水质</div>
+        <div>
+              <el-select
+      v-model="AllData.selectmodel"
+      placeholder="请选择湖泊"
+      style="width: 90px;position: relative;margin-bottom: 5px;"
+      filterable
+      size="small"
+      placement="bottom"
+      @change="selectchange"
+    >
+
+      <el-option v-for="(item) in AllData.filterList" :key="item.lakerId" :label="item.lakerName" :value="item.lakerId">
+      </el-option>
+    </el-select>
+        </div>
+      </div>
       <div id="history">
       <HistorySZChart :echartData="AllData.szHistoryData" :refresh="AllData.szHistoryrefresh"/>
 
       </div>
     </div>
-    <div class="eachLake" v-for="(item) in AllData.allSZ" :key="item.stCode">
+    <el-tabs v-model="AllData.activeName" class="demo-tabs" @tab-click="handleClick" stretch>
+    <el-tab-pane label="港渠" name="GQ"></el-tab-pane>
+    <el-tab-pane label="排口" name="PK"></el-tab-pane>
+  </el-tabs>
+  <div class="chartsbox" v-if="AllData.activeName=='GQ'">
+        <div class="eachLake" v-for="(item) in AllData.allSZ" :key="item.stCode" >
       <div class="h100">
         <div class="leve2Title">{{item.stName}}</div>
         <div id="Charts">
@@ -19,13 +41,41 @@
       </div>
       
     </div>
+     <div class="flex flex-justcontent-center" v-if="AllData.allSZ.length==0">
+    暂无数据
+  </div>
+  </div>
+
+  <div class="chartsbox" v-if="AllData.activeName=='PK'">
+        <div class="eachLake" v-for="(item) in AllData.allPK" :key="item.stCode" >
+      <div class="h100">
+        <div class="leve2Title">{{item.stName}}</div>
+        <div id="Charts">
+                      <Paikoucharts 
+          :refresh="item.chartInfo.refresh"
+          :XAxis="item.chartInfo.XAxis"
+          :YAxis="item.chartInfo.YAxis"
+          :yAxisarr="item.chartInfo.yAxisarr"
+        >
+        </Paikoucharts>
+        </div>
+      </div>
+      
+    </div>
+        <div class="flex flex-justcontent-center"  v-if="AllData.allPK.length==0">
+    暂无数据
+  </div>
+  </div>
+
+
   </div>
 </template>
 
 <script setup name="YSIndex_right2">
 import { ref, reactive, toRefs, onMounted } from 'vue';
-import { getPortChannelEchart,riverQualityGetHistory } from '@/api/MonitorAssetsOnMap';
+import { getWaterQualityEchart,riverQualityGetHistory } from '@/api/MonitorAssetsOnMap';
 import ShuiZhicharts from "./components/ShuiZhicharts.vue";
+import Paikoucharts from "./components/Paikoucharts.vue";
 import HistorySZChart from "./components/HistorySZChart.vue";
 
 const props = defineProps({
@@ -37,11 +87,18 @@
 
 });
 const AllData = reactive({
+  selectmodel:'',
+  filterList:[],
+  activeName:'',
+  GQdata:[],
+  PKdata:[],
   allSZ:[],
+  allPK:[],
   szHistoryData:[],
   szHistoryrefresh:[],
 
 });
+
 watch(
   () => props.waterRegionCode,
   val => {
@@ -56,7 +113,27 @@
   },
   { immediate: true, deep: true }
 );
+function selectchange(value) {
+  console.log('value',value);
+  AllData.filterList.map((e)=>{
+    if(e.lakerId==value){
+              AllData.szHistoryData=e
 
+      AllData.szHistoryrefresh=Math.random()
+    }
+  })
+
+}
+function handleClick(e){
+  console.log('e',e.props.name);
+  console.log('AllData.activeName',AllData.activeName);
+  if(e.props.name=='GQ'){
+    chuliDataFunGQ()
+  }else {
+    chuliDataFunPK()
+
+  }
+}
 function getHistoryData(){
   let params={
     waterRegionCode:props.waterRegionCode,
@@ -67,105 +144,44 @@
     console.log('水质历史数据',res);
       if(res.code==200){
 
-      AllData.szHistoryData=res.data
+      AllData.filterList=res.data
+      if(res.data?.length>0){
+      AllData.selectmodel=res.data[0].lakerId
+
+        AllData.szHistoryData=res.data[0]
       AllData.szHistoryrefresh=Math.random()
       }
+
+      }
   })
 }
 function getData(){
-    getPortChannelEchart(props.waterRegionCode).then(res=>{
-            let res1 = {
-        code: 200,
-        msg: '操作成功',
-        data: {
-          datas: [
-            {
-              dataKey: 'z',
-              dataName: '黄海水位',
-              unit: '(m)',
-              datas: ['0', '0', '1', '0', '2', '0.5', '0', '0', '0', '0.2'],
-              cordonLineList: [
-                {
-                  id: '1856620587907244131',
-                  cordonId: '1856647503229968394',
-                  lineName: '正常蓄水位',
-                  lineValue: '1.3',
-                  lineType: '2',
-                  lineColor: 'rgba(0, 255, 68, 1)',
-                  systemDefault: '0',
-                  code: 'normal_water_level',
-                  stConfig: 'z',
-                  calcType: '2',
-                  relateRainSiteSt: '4201110002',
-                },
-                {
-                  id: '1856620587932409132',
-                  cordonId: '1856647503229968394',
-                  lineName: '设计洪水位',
-                  lineValue: '1.8',
-                  lineType: '1',
-                  lineColor: 'rgba(221, 255, 0, 1)',
-                  systemDefault: '0',
-                  code: 'design_flood_level',
-                  stConfig: 'z',
-                  calcType: '2',
-                  relateRainSiteSt: '4201110002',
-                },
-                {
-                  id: '1856620587936604135',
-                  cordonId: '1856647503229968394',
-                  lineName: '校核洪水位',
-                  lineValue: '1.98',
-                  lineType: '1',
-                  lineColor: 'rgba(255, 191, 0, 1)',
-                  systemDefault: '0',
-                  code: 'verify_flood_level',
-                  stConfig: 'z',
-                  calcType: '2',
-                  relateRainSiteSt: '4201110002',
-                },
-                {
-                  id: '1856620587936604134',
-                  cordonId: '1856647503229968394',
-                  lineName: '坝顶高程',
-                  lineValue: '2.8',
-                  lineType: '1',
-                  lineColor: 'rgba(255, 81, 0, 1)',
-                  systemDefault: '0',
-                  code: 'dam_hight',
-                  stConfig: 'z',
-                  calcType: '2',
-                  relateRainSiteSt: '4201110002',
-                },
-              ],
-            },
-            {
-              dataKey: 'pn05',
-              dataName: '降雨量',
-              unit: 'mm',
-              datas: ['10', '5', '11', '2', '2', '20', '15', '0', '0', '0.2'],
-              cordonLineList: [],
-            },
-          ],
-          times: [
-            '1732291200000',
-            '1732291200000',
-            '1732291800000',
-            '1732292100000',
-            '1732292400000',
-            '1732292700000',
-            '1732293000000',
-            '1732293300000',
-            '1732293600000',
-            '1732293900000',
-          ],
-        },
-      };
+    getWaterQualityEchart(props.waterRegionCode).then(res=>{
+
       console.log('水质',res);
     if(res.code==200){
-       let arr=[]
-       let data=res.data
+      AllData.GQdata=res.data.portChannelDataList
+      AllData.PKdata=res.data.outletDataList
+      if(AllData.GQdata.length>0){
+        AllData.activeName='GQ'
+      chuliDataFunGQ()
+      return
+      }else if(AllData.PKdata.length>0) {
+        AllData.activeName='PK'
+      chuliDataFunPK()
+      return
+      }else {
+         AllData.activeName='GQ'
+      chuliDataFunGQ()
+      }
 
+      
+    }
+  })
+}
+function chuliDataFunGQ(){
+         let arr=[]
+       let data=AllData.GQdata
        data.forEach((e)=>{
         let obj={
           stName:e.stName,
@@ -249,9 +265,43 @@
        })
       AllData.allSZ=arr
       console.log('AllData.allSZ',AllData.allSZ);
-      
-    }
-  })
+}
+function chuliDataFunPK(){
+    let arr=[]
+       let data=AllData.PKdata
+       console.log('dataPK',data);
+       data.forEach((e)=>{
+        let obj={
+          stName:e.stName,
+          stCode:e.stCode,
+          targetQuality:e.targetQuality,
+          chartInfo:{
+              refresh: 1,
+  DataName: '',
+  XAxis: [],
+  typeName: '',
+  YAxis: [0, 1, 6, 3, 4],
+  loading: false,
+  yAxisarr: [
+
+  ],
+  marklinearr: [
+
+  ],
+          }
+        }
+        let at=obj.chartInfo
+         e.siteEchartDto.datas.map(item => {
+      at.marklinearr.push(...item.cordonLineList);
+    });
+       at.XAxis = e.siteEchartDto.times;
+        at.yAxisarr = e.siteEchartDto.datas;
+       arr.push(obj)
+       at.refresh =Math.random()
+
+       })
+       console.log('arrPK',arr);
+          AllData.allPK=arr
 }
 onMounted(() => {
 });
@@ -262,7 +312,7 @@
   width: 100%;
   height: 100%;
   
-  .historySZ,.eachLake{
+  .historySZ{
     height: calc((100% - 30px) / 3);
     
   }
@@ -271,14 +321,16 @@
 
     height: calc(100% - 32px);
   }
-  // .eachLake {
-  //   height: calc((100% - 10px) / 3 * 2);
-  //   overflow-y: auto;
-  //   #Charts {
-  //   height: calc(100% - 33px) ;
-      
-  //   }
+  .chartsbox {
+    height: calc((100% - 68px) / 3 * 2);
+    overflow-y: auto;
+  }
+  .eachLake {
+height: calc((100% - 30px) / 2);
+  }
+  :deep(.el-select .el-input__inner){
+    color: #fff;
+  }
 
-  // }
 }
 </style>

diff --git a/src/api/MonitorAssetsOnMap.js b/src/api/MonitorAssetsOnMap.js
index 8104301..441dc5a 100644
--- a/src/api/MonitorAssetsOnMap.js
+++ b/src/api/MonitorAssetsOnMap.js
@@ -323,9 +323,9 @@
   });
 }
 //水质信息
-export function getPortChannelEchart(code) {
+export function getWaterQualityEchart(code) {
   return request({
-    url: `/business/dataSiteRelation/getPortChannelEchart/${code}`,
+    url: `/business/dataSiteRelation/getWaterQualityEchart/${code}`,
     method: 'get',
   });
 }
diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
index 6319ad2..e8d4472 100644
--- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
+++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex_right2.vue
@@ -1,13 +1,35 @@
 <template>
   <div id="YSIndex_right2">
     <div class="historySZ">
-      <div class="leve2Title">{{AllData.szHistoryData.lakerName}}历史水质</div>
+      <div class="leve2Title flex flex-justcontent-spacebetween">
+        <div @click="getData">历史水质</div>
+        <div>
+              <el-select
+      v-model="AllData.selectmodel"
+      placeholder="请选择湖泊"
+      style="width: 90px;position: relative;margin-bottom: 5px;"
+      filterable
+      size="small"
+      placement="bottom"
+      @change="selectchange"
+    >
+
+      <el-option v-for="(item) in AllData.filterList" :key="item.lakerId" :label="item.lakerName" :value="item.lakerId">
+      </el-option>
+    </el-select>
+        </div>
+      </div>
       <div id="history">
       <HistorySZChart :echartData="AllData.szHistoryData" :refresh="AllData.szHistoryrefresh"/>
 
       </div>
     </div>
-    <div class="eachLake" v-for="(item) in AllData.allSZ" :key="item.stCode">
+    <el-tabs v-model="AllData.activeName" class="demo-tabs" @tab-click="handleClick" stretch>
+    <el-tab-pane label="港渠" name="GQ"></el-tab-pane>
+    <el-tab-pane label="排口" name="PK"></el-tab-pane>
+  </el-tabs>
+  <div class="chartsbox" v-if="AllData.activeName=='GQ'">
+        <div class="eachLake" v-for="(item) in AllData.allSZ" :key="item.stCode" >
       <div class="h100">
         <div class="leve2Title">{{item.stName}}</div>
         <div id="Charts">
@@ -19,13 +41,41 @@
       </div>
       
     </div>
+     <div class="flex flex-justcontent-center" v-if="AllData.allSZ.length==0">
+    暂无数据
+  </div>
+  </div>
+
+  <div class="chartsbox" v-if="AllData.activeName=='PK'">
+        <div class="eachLake" v-for="(item) in AllData.allPK" :key="item.stCode" >
+      <div class="h100">
+        <div class="leve2Title">{{item.stName}}</div>
+        <div id="Charts">
+                      <Paikoucharts 
+          :refresh="item.chartInfo.refresh"
+          :XAxis="item.chartInfo.XAxis"
+          :YAxis="item.chartInfo.YAxis"
+          :yAxisarr="item.chartInfo.yAxisarr"
+        >
+        </Paikoucharts>
+        </div>
+      </div>
+      
+    </div>
+        <div class="flex flex-justcontent-center"  v-if="AllData.allPK.length==0">
+    暂无数据
+  </div>
+  </div>
+
+
   </div>
 </template>
 
 <script setup name="YSIndex_right2">
 import { ref, reactive, toRefs, onMounted } from 'vue';
-import { getPortChannelEchart,riverQualityGetHistory } from '@/api/MonitorAssetsOnMap';
+import { getWaterQualityEchart,riverQualityGetHistory } from '@/api/MonitorAssetsOnMap';
 import ShuiZhicharts from "./components/ShuiZhicharts.vue";
+import Paikoucharts from "./components/Paikoucharts.vue";
 import HistorySZChart from "./components/HistorySZChart.vue";
 
 const props = defineProps({
@@ -37,11 +87,18 @@
 
 });
 const AllData = reactive({
+  selectmodel:'',
+  filterList:[],
+  activeName:'',
+  GQdata:[],
+  PKdata:[],
   allSZ:[],
+  allPK:[],
   szHistoryData:[],
   szHistoryrefresh:[],
 
 });
+
 watch(
   () => props.waterRegionCode,
   val => {
@@ -56,7 +113,27 @@
   },
   { immediate: true, deep: true }
 );
+function selectchange(value) {
+  console.log('value',value);
+  AllData.filterList.map((e)=>{
+    if(e.lakerId==value){
+              AllData.szHistoryData=e
 
+      AllData.szHistoryrefresh=Math.random()
+    }
+  })
+
+}
+function handleClick(e){
+  console.log('e',e.props.name);
+  console.log('AllData.activeName',AllData.activeName);
+  if(e.props.name=='GQ'){
+    chuliDataFunGQ()
+  }else {
+    chuliDataFunPK()
+
+  }
+}
 function getHistoryData(){
   let params={
     waterRegionCode:props.waterRegionCode,
@@ -67,105 +144,44 @@
     console.log('水质历史数据',res);
       if(res.code==200){
 
-      AllData.szHistoryData=res.data
+      AllData.filterList=res.data
+      if(res.data?.length>0){
+      AllData.selectmodel=res.data[0].lakerId
+
+        AllData.szHistoryData=res.data[0]
       AllData.szHistoryrefresh=Math.random()
       }
+
+      }
   })
 }
 function getData(){
-    getPortChannelEchart(props.waterRegionCode).then(res=>{
-            let res1 = {
-        code: 200,
-        msg: '操作成功',
-        data: {
-          datas: [
-            {
-              dataKey: 'z',
-              dataName: '黄海水位',
-              unit: '(m)',
-              datas: ['0', '0', '1', '0', '2', '0.5', '0', '0', '0', '0.2'],
-              cordonLineList: [
-                {
-                  id: '1856620587907244131',
-                  cordonId: '1856647503229968394',
-                  lineName: '正常蓄水位',
-                  lineValue: '1.3',
-                  lineType: '2',
-                  lineColor: 'rgba(0, 255, 68, 1)',
-                  systemDefault: '0',
-                  code: 'normal_water_level',
-                  stConfig: 'z',
-                  calcType: '2',
-                  relateRainSiteSt: '4201110002',
-                },
-                {
-                  id: '1856620587932409132',
-                  cordonId: '1856647503229968394',
-                  lineName: '设计洪水位',
-                  lineValue: '1.8',
-                  lineType: '1',
-                  lineColor: 'rgba(221, 255, 0, 1)',
-                  systemDefault: '0',
-                  code: 'design_flood_level',
-                  stConfig: 'z',
-                  calcType: '2',
-                  relateRainSiteSt: '4201110002',
-                },
-                {
-                  id: '1856620587936604135',
-                  cordonId: '1856647503229968394',
-                  lineName: '校核洪水位',
-                  lineValue: '1.98',
-                  lineType: '1',
-                  lineColor: 'rgba(255, 191, 0, 1)',
-                  systemDefault: '0',
-                  code: 'verify_flood_level',
-                  stConfig: 'z',
-                  calcType: '2',
-                  relateRainSiteSt: '4201110002',
-                },
-                {
-                  id: '1856620587936604134',
-                  cordonId: '1856647503229968394',
-                  lineName: '坝顶高程',
-                  lineValue: '2.8',
-                  lineType: '1',
-                  lineColor: 'rgba(255, 81, 0, 1)',
-                  systemDefault: '0',
-                  code: 'dam_hight',
-                  stConfig: 'z',
-                  calcType: '2',
-                  relateRainSiteSt: '4201110002',
-                },
-              ],
-            },
-            {
-              dataKey: 'pn05',
-              dataName: '降雨量',
-              unit: 'mm',
-              datas: ['10', '5', '11', '2', '2', '20', '15', '0', '0', '0.2'],
-              cordonLineList: [],
-            },
-          ],
-          times: [
-            '1732291200000',
-            '1732291200000',
-            '1732291800000',
-            '1732292100000',
-            '1732292400000',
-            '1732292700000',
-            '1732293000000',
-            '1732293300000',
-            '1732293600000',
-            '1732293900000',
-          ],
-        },
-      };
+    getWaterQualityEchart(props.waterRegionCode).then(res=>{
+
       console.log('水质',res);
     if(res.code==200){
-       let arr=[]
-       let data=res.data
+      AllData.GQdata=res.data.portChannelDataList
+      AllData.PKdata=res.data.outletDataList
+      if(AllData.GQdata.length>0){
+        AllData.activeName='GQ'
+      chuliDataFunGQ()
+      return
+      }else if(AllData.PKdata.length>0) {
+        AllData.activeName='PK'
+      chuliDataFunPK()
+      return
+      }else {
+         AllData.activeName='GQ'
+      chuliDataFunGQ()
+      }
 
+      
+    }
+  })
+}
+function chuliDataFunGQ(){
+         let arr=[]
+       let data=AllData.GQdata
        data.forEach((e)=>{
         let obj={
           stName:e.stName,
@@ -249,9 +265,43 @@
        })
       AllData.allSZ=arr
       console.log('AllData.allSZ',AllData.allSZ);
-      
-    }
-  })
+}
+function chuliDataFunPK(){
+    let arr=[]
+       let data=AllData.PKdata
+       console.log('dataPK',data);
+       data.forEach((e)=>{
+        let obj={
+          stName:e.stName,
+          stCode:e.stCode,
+          targetQuality:e.targetQuality,
+          chartInfo:{
+              refresh: 1,
+  DataName: '',
+  XAxis: [],
+  typeName: '',
+  YAxis: [0, 1, 6, 3, 4],
+  loading: false,
+  yAxisarr: [
+
+  ],
+  marklinearr: [
+
+  ],
+          }
+        }
+        let at=obj.chartInfo
+         e.siteEchartDto.datas.map(item => {
+      at.marklinearr.push(...item.cordonLineList);
+    });
+       at.XAxis = e.siteEchartDto.times;
+        at.yAxisarr = e.siteEchartDto.datas;
+       arr.push(obj)
+       at.refresh =Math.random()
+
+       })
+       console.log('arrPK',arr);
+          AllData.allPK=arr
 }
 onMounted(() => {
 });
@@ -262,7 +312,7 @@
   width: 100%;
   height: 100%;
   
-  .historySZ,.eachLake{
+  .historySZ{
     height: calc((100% - 30px) / 3);
     
   }
@@ -271,14 +321,16 @@
 
     height: calc(100% - 32px);
   }
-  // .eachLake {
-  //   height: calc((100% - 10px) / 3 * 2);
-  //   overflow-y: auto;
-  //   #Charts {
-  //   height: calc(100% - 33px) ;
-      
-  //   }
+  .chartsbox {
+    height: calc((100% - 68px) / 3 * 2);
+    overflow-y: auto;
+  }
+  .eachLake {
+height: calc((100% - 30px) / 2);
+  }
+  :deep(.el-select .el-input__inner){
+    color: #fff;
+  }
 
-  // }
 }
 </style>
diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/Paikoucharts.vue b/src/views/pictureOnMap/page/DrainageSystem/components/Paikoucharts.vue
new file mode 100644
index 0000000..d8c88c7
--- /dev/null
+++ b/src/views/pictureOnMap/page/DrainageSystem/components/Paikoucharts.vue
@@ -0,0 +1,345 @@
+<template>
+  <!-- 排口 -->
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script setup>
+import { guid } from "@/utils/ruoyi";
+import { nextTick } from "vue";
+const id = guid();
+const myChart = shallowRef("");
+import * as echarts from "echarts";
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //x轴数据
+  XAxis: {
+    type: Array,
+    default: () => [],
+  },
+  //y轴数据
+  YAxis: {
+    type: Array,
+    default: () => [],
+  },
+  //名字
+  DataName: {
+    type: String,
+  },
+  //类型
+  typeName: {
+    type: String,
+    default: "",
+  },
+  yAxisarr: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+watch(
+  () => props.refresh,
+  (value) => {
+    console.log("???????");
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    init();
+  },
+  {
+    deep: true,
+  }
+);
+function init() {
+  let colorarr = [
+    "#99FF55",
+    "#b14de5",
+    "#FFC155",
+    "#409eff",
+    "#ff7f50",
+    "#ff69b4",
+    "#87ceeb",
+    "#4682b4",
+    "#98fb98",
+  ];
+  let rightnumber = props.yAxisarr.length * "4.5" + "%";
+  let newarr = [];
+  let marklinedata = [];
+  let maxArr = [];
+  let minArr = [];
+  let finyasx = [
+    {
+      show: false,
+      inverse: true, //控制x轴在上方
+      name: props.typeName,
+      type: "value",
+      axisLabel: {
+        show: true,
+        color: "#409eff",
+
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#409eff",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(61,91,98,0.8)",
+        },
+      },
+      // min: 0,
+    },
+  ];
+
+  let finxse = [
+    // {
+    //   name: props.typeName,
+    //   type: 'bar',
+    //   barWidth: 12,
+    //   itemStyle: {
+    //     borderRadius: [0, 0, 6, 6],
+    //     color: function () {
+    //       return new echarts.graphic.LinearGradient(
+    //         0,
+    //         1,
+    //         0,
+    //         0,
+    //         [
+    //           {
+    //             offset: 0.1,
+    //             color: '#409eff', // 0% 处的颜色
+    //           },
+    //           {
+    //             offset: 0.9,
+    //             color: '#013068', // 100% 处的颜色
+    //           },
+    //         ],
+    //         false
+    //       );
+    //     },
+    //   },
+    //   // showBackground: true,
+    //   backgroundStyle: {
+    //     color: 'transparent',
+    //     borderWidth: 1,
+    //     borderColor: 'rgba(148, 250, 65, 0.2)',
+    //   },
+    //   data: props.YAxis,
+    // },
+  ];
+
+  console.log("获取的Y轴的数据", props.yAxisarr);
+
+  // 处理多个y轴遍历展示
+  if (props.yAxisarr) {
+    props.yAxisarr.map((item, index) => {
+      let arr = [];
+      let markLineArr = [];
+      item.cordonLineList.map((p) => {
+        markLineArr.push(Number(p.lineValue));
+        arr.push({
+          silent: false, //鼠标悬停事件  true没有，false有
+          lineStyle: {
+            //警戒线的样式  ，虚实  颜色
+            type: "dashed",
+            color: p.lineColor,
+          },
+          name: p.lineName,
+          yAxis: Number(p.lineValue),
+          
+          label: {
+            formatter: `${p.lineValue}-${p.lineName}`,
+            color: p.lineColor,
+          },
+        });
+      });
+
+      item["maxValue"] = Math.max.apply(null, [...item.datas, ...markLineArr]);
+      item["minValue"] = Math.min.apply(null, [...item.datas, ...markLineArr]);
+
+      marklinedata.push(arr);
+    });
+
+    console.log("marklinedata", marklinedata);
+    props.yAxisarr.map((item, index) => {
+      let obj = {
+        name: item.dataName,
+        type: "value",
+        axisLabel: {
+          show: true,
+          color: colorarr[index],
+                        formatter: function (value) {
+            return value.toFixed(2); // 保留两位小数
+          },
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: colorarr[index],
+          },
+        },
+
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "rgba(61,91,98,0.8)",
+          },
+        },
+        min: Math.floor(item.minValue * 0.95),
+        max: item.maxValue,
+      };
+
+      if (index == 0) {
+        obj.position = "left";
+      } else if (index == 1) {
+        obj.position = "right";
+      } else {
+        obj.position = "right";
+        obj.offset = (index - 1.1) * 70;
+        // obj.show = false;
+      }
+
+      finyasx.push(obj);
+
+      finxse.push({
+        smooth: true, //变为曲线 默认false折线
+        name: item.dataName + item.unit,
+        type: "line",
+        yAxisIndex: index + 1,
+        data: item.datas,
+        markLine: {
+          symbol: "none", //去掉警戒线最后面的箭头
+          label: {
+            position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+          },
+          data: marklinedata[index],
+        },
+      });
+    });
+  }
+
+  myChart.value = echarts.init(document.getElementById(id));
+  let option = {
+    color: colorarr,
+    legend: {
+      show: true,
+      orient: "horizontal", //horizontal横向 vertical 纵向
+      type: "scroll",
+      x: "center", //居右显示
+      align: "left", //图例控制在左边
+      // icon: 'circle',
+      // itemWidth: 15,
+      itemHeight: 15,
+      itemHeight: 15,
+      textStyle: {
+        color: "auto",
+        rich: {
+          another: {
+            fontSize: 14,
+          },
+        },
+        fontSize: 12,
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      // formatter: "{b}：{c}件",
+      // formatter: "{b}：{c}",
+      feature: {
+        mark: { show: true },
+        dataView: { show: true, readOnly: false },
+        magicType: { show: true, type: ["line", "bar"] },
+        restore: { show: true },
+        saveAsImage: { show: true },
+      },
+      axisPointer: {
+        type: "cross",
+        textStyle: {
+          color: "#fff",
+        },
+      },
+    },
+    grid: {
+      top: "33%",
+      left: 5,
+      right: rightnumber,
+      // right: '5%',
+      bottom: "10%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: props.XAxis,
+        axisLabel: {
+        color: 'rgba(255,255,255,1)',
+        fontSize: nowSize(12, 1920),
+        fontFamily: 'AlibabaPuHuiTi',
+        formatter: function (value) {
+          return moment(value).format('HH:MM');
+        },
+      },
+        axisPointer: {
+          type: "shadow",
+        },
+
+        axisLine: {
+          lineStyle: {
+            // color: '#3398DB',
+          },
+        },
+      },
+    ],
+    yAxis: finyasx,
+    dataZoom: [
+      {
+        show: true,
+        // show: false,
+        height: 4,
+        bottom: 18,
+        start: 0,
+        end: 100,
+        handleSize: "100%",
+        fillerColor: "#94FA41",
+        borderColor: "transparent",
+        backgroundColor: "rgba(148, 250, 65, 0.2)",
+        handleStyle: {
+          color: "#94FA41",
+        },
+        moveHandleSize: 0,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      {
+        type: "inside",
+        show: true,
+        height: 15,
+        start: 1,
+        end: 35,
+      },
+    ],
+    series: finxse,
+  };
+
+  option && myChart.value.setOption(option);
+}
+
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+onMounted(() => {
+  nextTick(() => {
+    init();
+    window.addEventListener("resize", resizeTheChart);
+  });
+});
+</script>