tooltip

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

@@ -196,7 +196,7 @@ const facilityStatistics = ref({
       {
         name: '设备数量',
         nameLocation: 'center',
-        nameGap: 40,
+        nameGap: 35,
         nameTextStyle: {
           color: '#fff',
           fontSize: 14
@@ -342,14 +342,15 @@ const carVehicle = ref({
         type: 'value',
         name: '数量/辆',
         nameLocation: 'center',
-        nameGap: 40,
+        nameGap: 60,
         nameTextStyle: {
           color: '#fff',
           fontSize: 14
         },
         location: 'center',
         axisLabel: {
-          color: '#fff'
+          color: '#fff',
+          formatter: '{value} 辆'
         },
         splitLine: {
           show: true,
@@ -473,8 +474,17 @@ const facilityStation = ref({
     xAxis: [
       {
         type: 'value',
+        name: '数量/座',
+        nameLocation: 'center',
+        nameGap: 40,
+        nameTextStyle: {
+          color: '#fff',
+          fontSize: 16
+        },
         axisLabel: {
-          color: '#fff'
+          color: '#fff',
+          formatter: '{value} 座',
+          fontSize: 16
         },
         splitLine: {
           show: true,
@@ -560,27 +570,27 @@ const carWasher = ref({
   good: 50,
   allTotal: '000550',
   bar: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)' ],
     tooltip: {
-      trigger: 'item'
+      formatter: '{b}: {c}个 , 占比: {d}%'
     },
     legend: {
       orient: 'horizontal',
       bottom: '0',
       icon: 'circle',
       textStyle: {
-        color: '#fff'
+        color: '#fff',
+        fontSize: 16
       }
     },
     series: [
       {
         type: 'pie',
-        radius: '70%',
+        radius: '50%',
         label: {
           show: true,
           color: '#fff',
           formatter: '{b}: {c}个',
-          fontSize: 14
+          fontSize: 16
         },
         data: [
           { value: 1048, name: '0-5年' },
@@ -641,33 +651,32 @@ const chargingStation = ref({
   good: 50,
   allTotal: '000550',
   bar: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)' ],
     tooltip: {
-      trigger: 'item'
+      formatter: '{b}: {c}个 , 占比: {d}%'
     },
     legend: {
       orient: 'horizontal',
       bottom: '0',
       icon: 'circle',
       textStyle: {
-        color: '#fff'
+        color: '#fff',
+        fontSize: 16
       }
     },
     series: [
       {
         type: 'pie',
-        radius: '70%',
+        radius: '50%',
         label: {
           show: true,
           color: '#fff',
           formatter: '{b}: {c}个',
-          fontSize: 14
+          fontSize: 16
         },
         data: [
           { value: 1048, name: '0-5年' },
           { value: 735, name: '6-10年' },
           { value: 580, name: '11-15年' }
-
         ]
 
       }
@@ -1159,6 +1168,7 @@ getFacilityVehicleComponents()
     .value {
       text-align: center;
       color: #80FFFF;
+      font-size: 20px;
       margin-top: 32px;
     }
 

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

@@ -300,6 +300,9 @@ const leftContent:Ref<any> = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          formatter: '{b}: {c}辆 ,占比: {d}%'
+        },
         // 图表图例
         legend: {
           type: 'scroll',
@@ -312,7 +315,7 @@ const leftContent:Ref<any> = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 18
           }
         },
         series: [
@@ -322,8 +325,9 @@ const leftContent:Ref<any> = ref({
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
-              formatter: '{b}\n{d}%',
-              color: 'white'
+              formatter: '{b} {d}%',
+              color: 'white',
+              fontSize: 18
             },
             data: [
               { name: '运营中', value: 30619 },
@@ -351,6 +355,9 @@ const leftContent:Ref<any> = ref({
         grid: {
           containLabel: true
         },
+        tooltip: {
+          formatter: '{b}: {c}辆 ,占比: {d}%'
+        },
         // 图表图例
         legend: {
           type: 'scroll',
@@ -363,7 +370,7 @@ const leftContent:Ref<any> = ref({
           bottom: 0, // 图例垂直居中
           textStyle: {
             color: 'white', // 图例文字颜色
-            fontSize: 20
+            fontSize: 18
           }
         },
         series: [
@@ -373,8 +380,9 @@ const leftContent:Ref<any> = ref({
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
             label: {
-              formatter: '{b}\n{d}%',
-              color: 'white'
+              formatter: '{b} {d}%',
+              color: 'white',
+              fontSize: 18
             },
             data: [
               { name: '隔日留交车辆', value: 30619 },
@@ -446,7 +454,9 @@ const rightContent = ref({
             fontSize: 18
           }
         },
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        tooltip: {
+          formatter: '{b}: {c}个 , {d}%'
+        },
         series: {
           bottom: 50,
           type: 'pie', // 图表类型为饼图
@@ -485,7 +495,9 @@ const rightContent = ref({
             fontSize: 18
           }
         },
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        tooltip: {
+          formatter: '{b}: {c}个 , {d}%'
+        },
         series: {
           bottom: 50,
           type: 'pie', // 图表类型为饼图
@@ -525,7 +537,9 @@ const rightContent = ref({
             fontSize: 18
           }
         },
-        // color: [ '#6386e0', '#fb9a55', '#6bd98d', '#8dfd15', '#6bd98d', '#fff' ],
+        tooltip: {
+          formatter: '{b}: {c}个 , {d}%'
+        },
         series: {
           bottom: 50,
           type: 'pie', // 图表类型为饼图
@@ -566,6 +580,9 @@ const rightContent = ref({
           fontWeight: 'normal'
         }
       },
+      tooltip: {
+        formatter: '{b}: {c}辆 ,占比: {d}%'
+      },
       grid: {
         containLabel: true,
         top: 0,
@@ -594,7 +611,7 @@ const rightContent = ref({
         showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
         label: {
           show: true,
-          formatter: '{b}: {d}俩',
+          formatter: '{b}: {d}辆',
           color: 'white',
           fontSize: 18
         },

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

@@ -235,7 +235,7 @@ import StationManagementService from '../services/stationManagement.service'
 const leftTitle: Ref<any[]> = ref([ {
   name: '类型分布',
   option: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+
     tooltip: {
       formatter: '{b}: {c}个 ,占比: {d}%'
     },
@@ -269,7 +269,7 @@ const leftTitle: Ref<any[]> = ref([ {
 {
   name: '面积分布',
   option: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+
     tooltip: {
       formatter: '{b}: {c}个 ,占比: {d}%'
     },
@@ -303,7 +303,6 @@ const leftTitle: Ref<any[]> = ref([ {
 {
   name: '场站权属情况',
   option: {
-    color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
     tooltip: {
       formatter: '{b}: {c}个 ,占比: {d}%'
     },
@@ -534,7 +533,7 @@ const powerChart = ref({
   }
 })
 const airportChart = ref({
-  color: [ 'rgb(86,137,239)', 'rgb(85,206,160)', 'rgb(88,107,141)', 'rgb(234,181,23)' ],
+
   tooltip: {
     trigger: 'item',
     formatter: '{b}: {c}个 ,占比: {d}%'