看板

 <template>
 <template>
   <div class="main">
   <div class="main">
     <el-row class="w100">
     <el-row class="w100">
-      <el-col :span="8">
+      <el-col :span="type=='是'?8:12">
         <left-page/>
         <left-page/>
       </el-col>
       </el-col>
-      <el-col :span="8">
+      <el-col v-if="type=='是'" :span="8">
         <center-page/>
         <center-page/>
       </el-col>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="type=='是'?8:12">
         <right-page/>
         <right-page/>
       </el-col>
       </el-col>
     </el-row>
     </el-row>
@@ -20,9 +20,9 @@ import LeftPage from "@/viewsPc/vip/leftPage"
 import CenterPage from "@/viewsPc/vip/centerPage"
 import CenterPage from "@/viewsPc/vip/centerPage"
 import RightPage from "@/viewsPc/vip/rightPage"
 import RightPage from "@/viewsPc/vip/rightPage"
 import {getYS000} from '@/api/server.js'
 import {getYS000} from '@/api/server.js'
+import {ref} from 'vue'
 
 
-const fullUrl = window.location.href;
-const type = ref(null)
+const type = ref('是')
 // url.value = window.location.host + '/pc.html#/match/list/'
 // url.value = window.location.host + '/pc.html#/match/list/'
 handelGetYS000()
 handelGetYS000()
 console.log(window.location.host)
 console.log(window.location.host)
@@ -30,8 +30,7 @@ console.log(window.location.host)
 
 
 async function handelGetYS000() {
 async function handelGetYS000() {
   const res = await getYS000()
   const res = await getYS000()
-  type.value = res.data.IFBASE
-  console.log(res)
+  // type.value = res.data?.IFBASE || '否'
 }
 }
 
 
 
 

@@ -252,7 +252,7 @@ async function handelGetYS004() {
   })).sort((v1, v2) => v2.DSO - v1.DSO)
   })).sort((v1, v2) => v2.DSO - v1.DSO)
   
   
   let arr = [...haishangArr, ...daluArr]
   let arr = [...haishangArr, ...daluArr]
-  let listX = arr.map(v => v.BASE)
+  let listX = arr.map(v => v.BASEJC)
   
   
   let styleItem1 = {
   let styleItem1 = {
     color: {
     color: {
@@ -275,7 +275,7 @@ async function handelGetYS004() {
         {offset: 1, color: 'rgba(77, 197, 243, 1)'}  // 底部颜色
         {offset: 1, color: 'rgba(77, 197, 243, 1)'}  // 底部颜色
       ]
       ]
     },
     },
-    borderColor: 'rgba(0, 255, 190, 1)',
+    borderColor: 'rgba(0, 168, 255, 1)',
     borderWidth: 1
     borderWidth: 1
   }
   }
   
   
@@ -283,12 +283,10 @@ async function handelGetYS004() {
     value: v.DSO,
     value: v.DSO,
     day: v.DAYS,
     day: v.DAYS,
     itemStyle: v.type == 2 ? styleItem1 : styleItem2,
     itemStyle: v.type == 2 ? styleItem1 : styleItem2,
-    name: v.type == 2 ? "陆地" : '海上'
+    name: v.type == 2 ? "陆地" : '海上',
+    type: v.type
   }))
   }))
   
   
-  let listHai = arr.map(v => v.type === 1 ? v.DSO : 0)
-  let listLu = arr.map(v => v.type === 2 ? v.DSO : 0)
-  
   handelZhu4(listX, dataList)
   handelZhu4(listX, dataList)
 }
 }
 
 
@@ -1119,25 +1117,6 @@ const handelZhu3 = (row1, row2) => {
   autoHover(chart33, option, 0, 2000)
   autoHover(chart33, option, 0, 2000)
 }
 }
 const handelZhu4 = (listX, dataList) => {
 const handelZhu4 = (listX, dataList) => {
-  // let name1 = row1.BLOCK
-  // let name2 = row2.BLOCK
-  // let x1 = row1.list.forEach(val => val.type = 1) || []
-  // let x2 = row2.list.forEach(val => val.type = 2) || []
-  // let list = [...x1, ...x2].map(val => val.BASE)
-  // let listX = []
-  // let listL = []
-  // let listH = []
-  // for (const val of list) {
-  //   listX.push(val.BASE)
-  //   if (val.type == 1) {
-  //     listL.push(val.DSO)
-  //     listH.push(0)
-  //   } else {
-  //     listL.push(0)
-  //     listH.push(val.DSO)
-  //   }
-  // }
-  
   chart44 = echarts.init(zhuRef4.value)
   chart44 = echarts.init(zhuRef4.value)
   const option = {
   const option = {
     tooltip: {
     tooltip: {
@@ -1152,6 +1131,23 @@ const handelZhu4 = (listX, dataList) => {
       textStyle: {
       textStyle: {
         color: '#fff',        // 文字颜色
         color: '#fff',        // 文字颜色
         fontSize: 12,         // 文字大小
         fontSize: 12,         // 文字大小
+      },
+      // 过滤数据
+      formatter: (row) => {
+        console.log(row[0].data)
+        return `
+       <div style="color: #fff;font-size: 12px;">${row[0].data.name}</div>
+        <div style="color: #fff;font-size: 12px;">
+        <span style="background:${row[0].data.itemStyle.borderColor};display: inline-block;width: 10px;height: 10px;border-radius: 50%;"></span>
+        <span style="margin-right: 20px;">DSO</span>
+        ${row[0]?.data?.value}
+        </div>
+         <div style="color: #fff;font-size: 12px;">
+          <span style="background:${row[0].data.itemStyle.borderColor};display: inline-block;width: 10px;height: 10px;border-radius: 50%;"></span>
+         <span style="margin-right: 20px;">天数</span>
+         ${row[0]?.data?.day}
+         </div>
+       `
       }
       }
     },
     },
     legend: {
     legend: {
@@ -1164,6 +1160,7 @@ const handelZhu4 = (listX, dataList) => {
       left: '3%',
       left: '3%',
       right: '4%',
       right: '4%',
       bottom: '3%',
       bottom: '3%',
+      top: "20%",
       containLabel: true
       containLabel: true
     },
     },
     xAxis: [
     xAxis: [
@@ -1185,7 +1182,7 @@ const handelZhu4 = (listX, dataList) => {
     yAxis: [
     yAxis: [
       {
       {
         type: 'value',
         type: 'value',
-        name: '天',
+        name: '',
         axisLine: {
         axisLine: {
           show: true,
           show: true,
           lineStyle: {
           lineStyle: {
@@ -1221,8 +1218,8 @@ const handelZhu4 = (listX, dataList) => {
               {offset: 1, color: 'rgba(106, 235, 228, 1)'}  // 底部颜色
               {offset: 1, color: 'rgba(106, 235, 228, 1)'}  // 底部颜色
             ]
             ]
           },
           },
-          borderColor: 'rgba(0, 255, 190, 1)',
-          borderWidth: 1
+          // borderColor: 'rgba(0, 255, 190, .5)',
+          // borderWidth: 1
         },
         },
         barWidth: '30%',
         barWidth: '30%',
       },
       },