图表tooltip

src/components/Drag.vue

@@ -49,7 +49,7 @@ nextTick(() => {
 </script>
 <style scoped>
 .drag-container {
-  position: fixed !important;
+  position: absolute !important;
   z-index: 100;
 }
 </style>

src/components/changeLine.vue

@@ -80,7 +80,7 @@ getLine()
 
 <style lang="scss" scoped>
 .changeLine {
-  position: fixed;
+  position: absolute;
   color: #fff;
   width: 400px;
 

src/pages/views/home/components/CehicleOperation.vue

@@ -502,7 +502,9 @@ import Layout from '@/components/layout.vue'
 import Box from '@/components/box.vue'
 import Echart from '@/components/chart.vue'
 
-import { computed, ref, watch } from 'vue'
+import {
+  computed, onUnmounted, ref, watch
+} from 'vue'
 import { graphic } from 'echarts'
 import CehicleOperationService from '../services/cehicleOperation.service'
 import useStore from '@/pages/store'
@@ -571,6 +573,10 @@ const leftContent = ref({
     grid: {
       containLabel: true
     },
+    tooltip: {
+      show: true,
+      formatter: '{b}: {c}辆 ,占比: {d}%'
+    },
     // 图表图例
     legend: {
       show: true,
@@ -588,7 +594,6 @@ const leftContent = ref({
       }
     },
 
-    // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
     series: [
       {
         type: 'pie', // 图表类型为饼图
@@ -598,7 +603,7 @@ const leftContent = ref({
         label: {
           show: true,
           fontSize: 16,
-          formatter: '{b}： {c}条',
+          formatter: '{b}： {c}辆',
           color: 'white'
         },
         data: [
@@ -638,6 +643,10 @@ const rightContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}次 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -651,15 +660,14 @@ const rightContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 14
           }
         },
 
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -668,13 +676,13 @@ const rightContent = ref({
               color: 'white'
             },
             data: [
-              { key: 2, name: '老年卡', value: 180 },
-              { key: 2, name: '电子钱包', value: 50 },
-              { key: 2, name: '现金', value: 30 },
-              { key: 2, name: '学生卡', value: 20 },
-              { key: 2, name: '成人次卡', value: 10 },
-              { key: 2, name: '其他', value: 10 },
-              { key: 2, name: '免费人次', value: 10 }
+              { name: '老年卡', value: 180 },
+              { name: '电子钱包', value: 50 },
+              { name: '现金', value: 30 },
+              { name: '学生卡', value: 20 },
+              { name: '成人次卡', value: 10 },
+              { name: '其他', value: 10 },
+              { name: '免费人次', value: 10 }
             ]
           }
         ]
@@ -688,6 +696,13 @@ const rightContent = ref({
           right: 30,
           left: 50
         },
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{b}<br /> {a0}：{c0}人次',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
         legend: {
           show: true,
           left: 'center',
@@ -809,6 +824,13 @@ const rightContent = ref({
           right: 30,
           left: 50
         },
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{b}<br /> {a0}：{c0}km',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
         legend: {
           show: true,
           left: 'center',
@@ -996,6 +1018,13 @@ watch(() => store.currentLineId, () => {
   getBusLineDriver()
   getBusLineDetail()
 })
+const timer = setInterval(() => {
+  getBusLineCar()
+}, 5 * 1000)
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
 
 const nameMap:any = {
   1: '老年卡',
@@ -1188,7 +1217,7 @@ getVehicleStatusService()
           .value {
             display: flex;
             justify-content: center;
-            align-items: flex-end;
+            align-items: baseline;
             gap: 10px;
           }
         }
@@ -1308,6 +1337,7 @@ getVehicleStatusService()
 
               .bold {
                 font-size: 24px;
+
               }
 
               .busNum {

src/pages/views/home/components/HomePage.vue

@@ -424,6 +424,7 @@ const leftContent:any = ref({
         },
         tooltip: {
           trigger: 'axis',
+          formatter: '{b}<br /> {a0}：{c0}万 <br />{a1}：{c1}%',
           axisPointer: {
             type: 'shadow'
           }

src/pages/views/home/components/LineAnalysis.vue

@@ -186,9 +186,9 @@ const leftContent:Ref<any> = ref({
               color: 'white'
             },
             data: [
-              { key: 2, name: '常规', value: 130 },
-              { key: 2, name: '快线', value: 50 },
-              { key: 2, name: '特色线路', value: 50 }
+              { name: '常规', value: 130 },
+              { name: '快线', value: 50 },
+              { name: '特色线路', value: 50 }
             ]
           }
         ]
@@ -387,11 +387,11 @@ const rightContent:Ref<any> = ref({
               color: 'white'
             },
             data: [
-              { key: 2, name: '5km', value: 180 },
-              { key: 2, name: '5-10km', value: 50 },
-              { key: 2, name: '10-15km', value: 30 },
-              { key: 2, name: '15-20km', value: 20 },
-              { key: 2, name: '20km', value: 10 }
+              { name: '5km', value: 180 },
+              { name: '5-10km', value: 50 },
+              { name: '10-15km', value: 30 },
+              { name: '15-20km', value: 20 },
+              { name: '20km', value: 10 }
             ]
           }
         ]
@@ -450,10 +450,10 @@ const rightContent:Ref<any> = ref({
               color: 'white'
             },
             data: [
-              { key: 2, name: '<300m', value: 180 },
-              { key: 2, name: '300-500m', value: 50 },
-              { key: 2, name: '300-1000m', value: 30 },
-              { key: 2, name: '>1000m', value: 20 }
+              { name: '<300m', value: 180 },
+              { name: '300-500m', value: 50 },
+              { name: '300-1000m', value: 30 },
+              { name: '>1000m', value: 20 }
             ]
           }
         ]

src/pages/views/home/components/MaintenanceDynamics.vue

@@ -318,7 +318,7 @@ const leftContent:Ref<any> = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -369,7 +369,7 @@ const leftContent:Ref<any> = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {

src/pages/views/home/components/PassengerFlow.vue

@@ -128,6 +128,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -141,7 +145,7 @@ const leftContent = ref({
           top: 'center', // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
@@ -149,7 +153,7 @@ const leftContent = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的日候显示一个占位圆
             label: {
@@ -178,10 +182,12 @@ const leftContent = ref({
         },
         tooltip: {
           trigger: 'axis',
+          formatter: '{b}<br /> {a0}：{c0}万人',
           axisPointer: {
             type: 'shadow'
           }
         },
+
         legend: {
           top: 10,
           right: '40%',
@@ -225,6 +231,13 @@ const leftContent = ref({
         },
         yAxis: [
           {
+            name: '人数/万人',
+            nameLocation: 'center',
+            nameGap: 50,
+            nameTextStyle: {
+              color: '#fff',
+              fontSize: 18
+            },
             splitNumber: 2,
             axisLabel: {
               show: true,
@@ -273,7 +286,8 @@ const leftContent = ref({
             barWidth: 30,
             data: [ 200, 108, 200, 40, 210, 100 ]
           }
-        ]
+        ],
+        dataZoom: {}
       }
     }
   ],
@@ -284,6 +298,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}条 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -297,7 +315,7 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
@@ -345,6 +363,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -358,7 +380,7 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
@@ -366,7 +388,7 @@ const leftContent = ref({
         series: [
           {
             type: 'pie', // 图表类型为饼图
-            radius: [ '55%', '75%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
+            radius: [ '45%', '60%' ], // 控制内外圆环的半径，30%代表内圆，60%代表外圆
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
@@ -391,6 +413,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人次 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -404,11 +430,10 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
         series: [
           {
             type: 'pie', // 图表类型为饼图
@@ -436,6 +461,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人次 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -449,11 +478,9 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
-
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
         series: [
           {
             type: 'pie', // 图表类型为饼图
@@ -481,6 +508,10 @@ const leftContent = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          show: true,
+          formatter: '{b}: {c}万人次 , 占比: {d}%'
+        },
         // 图表图例
         legend: {
           show: true,
@@ -494,7 +525,7 @@ const leftContent = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 16
           }
         },
 
@@ -561,6 +592,7 @@ const rightContent = ref({
     },
     tooltip: {
       trigger: 'axis',
+      formatter: '{b}<br /> {a0}：{c0}辆',
       axisPointer: {
         type: 'shadow'
       }
@@ -666,6 +698,13 @@ const rightContent = ref({
       right: 30,
       left: 50
     },
+    tooltip: {
+      trigger: 'axis',
+      formatter: '今日{b}<br /> {a0}：{c0}人<br /> {a1}：{c1}人',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
     legend: {
       show: true,
       left: 'center',
@@ -806,6 +845,13 @@ const rightContent = ref({
       right: 30,
       left: 50
     },
+    tooltip: {
+      trigger: 'axis',
+      formatter: '今日{b}<br /> {a0}：{c0}人 <br /> {a1}：{c1}人  <br /> {a2}：{c2}人',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
     legend: {
       show: true,
       left: 'center',
@@ -980,6 +1026,13 @@ const rightContent = ref({
       right: 30,
       left: 50
     },
+    tooltip: {
+      trigger: 'axis',
+      formatter: '今日{b}<br /> {a0}：{c0}人<br /> {a1}：{c1}人',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
     legend: {
       show: true,
       left: 'center',
@@ -1245,7 +1298,7 @@ getTrafficFlowRank()
       flex-wrap: wrap;
       gap: 15px;
       height: 335px;
-      overflow: scroll;
+      overflow: hidden;
 
       .line {
         width: 100%;

src/pages/views/home/components/StationManagement.vue

@@ -250,7 +250,7 @@ const leftTitle: Ref<any[]> = ref([ {
     },
     series: {
       type: 'pie',
-      radius: [ '55%', '75%' ],
+      radius: [ '45%', '60%' ],
       label: {
         show: true,
         color: '#fff',
@@ -541,7 +541,7 @@ const airportChart = ref({
   },
   series: {
     type: 'pie',
-    radius: [ '55%', '75%' ],
+    radius: [ '45%', '60%' ],
     label: {
       show: true,
       color: '#fff',