总收入排行

src/views/Screen/index.vue

@@ -41,7 +41,7 @@
                   <h4>孵化总收入排行榜</h4>
                 </div>
                 <div class="ct-box">
-                  <div class="wrap srphWrapper"></div>
+                  <div class="wrap srphWrapper" id="srphWrapper"></div>
                 </div>
               </div>
             </div>
@@ -99,8 +99,10 @@ import { reqApi } from "@/assets/js/httpApi.js";
 import { Highchart } from "@/assets/js/chartTemplates.js";
 import cuAmap from "@/components/AMap";
 import request from "@/utils/request";
+import Highcharts from 'highcharts';
 
 //关闭信息窗体
+
 function closeInfoWindow(mapEle) {
   mapEle.clearInfoWindow();
 }
@@ -231,7 +233,7 @@ export default {
     },
 
     sjzl() {
-      // 数据总览
+      // 孵化数据总览
       request({
         url: "api/homePage/incubatorOverview?size=9",
         method: "get",
@@ -240,12 +242,12 @@ export default {
       });
     },
     srph() {
-      // 收入排行f
+      // 孵化总收入排行榜
       request({
         url: "api/homePage/incubatorLeaderboard",
         method: "get",
       }).then((res) => {
-        const list = res.body || [];
+        const list = res.body.slice(0, 7) || [];
         var colors = ["#ff8371", "#08b2c0", "#427fff", "#8dbffa", "#b2e2fe"];
         var chartData = Highchart.formatSeriesList(list, {
           value: "value",
@@ -255,18 +257,54 @@ export default {
           chartConfig: {
             chart: {
               type: "bar",
-              marginBottom: 10,
+              // marginBottom: 10,
+              bottom:10,
+              left:40,
             },
             xAxis: {
               type: "category",
               lineWidth: 1,
               labels: {
                 x: -5,
+                style: {
+                  fontSize: "0.17rem",
+                },
+                formatter: function() {
+                  return this.value.length > 5 ? this.value.substring(0, 5) + '...' : this.value;
+                }
               },
             },
             yAxis: {
+              min: 0,
               visible: false,
+              title: {
+                style: {
+                  color: "#eee",
+                  fontSize: "0.18rem",
+                },
+              },
+              labels: {
+                  overflow: 'justify',
+                  // style: {
+                  //     fontSize: '20px' // 设置 Y 轴标签的字体大小
+                  // }
+              }
             },
+                plotOptions: {
+                  bar: {
+                      dataLabels: {
+                          enabled: true,
+                          allowOverlap: true, // 允许数据标签重叠
+                          style: {
+                                      fontSize: '0.19rem', // 设置数据标签的字体大小
+                                      fontWeight: 'bold' // 设置数据标签的字体粗细
+                                  }
+                      }
+                  }
+              },
+              tooltip: {
+                pointFormat: "<b style='fontSize:24rem;'>{series.name}:</b> <b style='fontSize:24rem;'>{point.y:.1f}%</b>",
+              },
             series: [
               {
                 name: "",
@@ -288,6 +326,57 @@ export default {
           opts
         );
       });
+//       var chart = Highcharts.chart('srphWrapper', {
+//         isSeriesData: true,
+//     chart: {
+//         type: 'bar'
+//     },
+//     xAxis: {
+//         categories: ['非洲', '美洲', '亚洲', '欧洲', '大洋洲'],
+//         title: {
+//             text: null,
+          
+//         },
+//         labels: {
+//                 x: -5,
+//                 style: {
+//                   fontSize: "20px",
+//                 },
+//               },
+        
+//     },
+//     yAxis: {
+//         min: 0,
+//         title: {
+//             text: '(万)',
+//         },
+//         labels: {
+//             overflow: 'justify',
+//             style: {
+//                   fontSize: "20px",
+//                 },
+//         }
+//     },
+//     tooltip: {
+//         valueSuffix: ' 百万'
+//     },
+//     plotOptions: {
+//         bar: {
+//             dataLabels: {
+//                 enabled: true,
+//                 allowOverlap: true, // 允许数据标签重叠
+//                 style: {
+//                             fontSize: '20px', // 设置数据标签的字体大小
+//                             fontWeight: 'bold' // 设置数据标签的字体粗细
+//                         }
+//             }
+//         }
+//     },
+//     series: [{
+//         name: '',
+//         data: [107, 31, 635, 203, 2]
+//     }]
+// });
     },
     qycxcysjfx() {
       //企业创新创业数据分析
@@ -1139,17 +1228,11 @@ export default {
 <style lang="scss" scope>
 .amap-icon{ // 高德地图样式覆盖
   img{
-    width:0.42rem !important;
-    height: 0.42rem !important;
+    width:0.52rem !important;
+    height: 0.52rem !important;
   }
 }
-.textEllipsis {
-  display: inline-block;
-  white-space: nowrap; /* 不换行 */
-  overflow: hidden; /* 超出隐藏 */
-  text-overflow: ellipsis; /* 添加省略号 */
-  width: 320px; /* 设置宽度 */
-}
+
 #container {
   height: 100%;
   width: 100%;
@@ -1920,6 +2003,13 @@ export default {
     background-position: center center;
     background-size: 100% 100%;
     position: relative;
+    .textEllipsis {
+      display: inline-block;
+      white-space: nowrap; /* 不换行 */
+      overflow: hidden; /* 超出隐藏 */
+      text-overflow: ellipsis; /* 添加省略号 */
+      width: 320px; /* 设置宽度 */
+    }
     button {
       width: 1.5rem;
       height: 0.4rem;