feat: 大屏样式优化

xinkeaboard-admin/src/pages/statistics/bigscreen/components/EnquirePieChart.js

@@ -56,7 +56,7 @@ class Pie3DChart extends React.Component {
       },
       legend: {
         itemGap: 35,
-        bottom: 70,
+        bottom: 60,
         textStyle: { color: "#fff", fontSize: "16px" },
       },
       grid: {
@@ -70,7 +70,7 @@ class Pie3DChart extends React.Component {
         {
           //   name: 'Access From',
           type: "pie",
-          radius: ["40%", "70%"],
+          radius: ["50%", "80%"],
               center: ["50%", "35%"], // 默认是 ["50%", "50%"]，这里把 y 改成 35% 就能往上移
 
           avoidLabelOverlap: false,
@@ -86,8 +86,9 @@ class Pie3DChart extends React.Component {
           emphasis: {
             label: {
               show: true,
-              fontSize: 16,
+              fontSize: 25,
               fontWeight: "bold",
+              color: '#fff'
             },
           },
           labelLine: {

xinkeaboard-admin/src/pages/statistics/bigscreen/components/WorldMap.js

@@ -57,22 +57,6 @@ class WorldMap extends React.Component {
   initChart() {
     if (!this.chartRef.current) return;
     this.chartInstance = echarts.init(this.chartRef.current);
-    // const seriesData = [
-    //   { name: "China", value: [116.4074, 39.9042, 100] },
-    //   { name: "United States", value: [-100.0, 40.0, 80] },
-    //   { name: "Brazil", value: [-47.9292, -15.7801, 60] },
-    //   { name: "Russia", value: [37.6173, 55.7558, 70] },
-    //   { name: "India", value: [77.1025, 28.7041, 90] },
-    // ];
-    // const seriesData = countries
-    //   ?.map((item) => {
-    //     const coord = this.getGeoCenterByName(item.name);
-    //     if (coord) {
-    //       return { name: item.name, value: [...coord, item.value] };
-    //     }
-    //     return null;
-    //   })
-    //   .filter(Boolean);
     const option = {
       tooltip: {
         formatter: (params) => {
@@ -80,7 +64,6 @@ class WorldMap extends React.Component {
         },
         textStyle: {
           fontSize: 28, // 字体大小
-          // color: "#fff", // 字体颜色
           fontWeight: "bold", // 可选加粗
         },
       },
@@ -88,7 +71,6 @@ class WorldMap extends React.Component {
         map: "world",
         roam: true, // 允许缩放平移
         // regionHeight: 1.1, // 区域厚度，调大更立体
-
         boxWidth: 200, // 宽度加大
         boxHeight: 20,
         regionHeight: 1,
@@ -97,45 +79,31 @@ class WorldMap extends React.Component {
           alpha: 30,
           beta: 0,
         },
+        distance: 0,
         shading: "lambert",
-        label: {
-          show: false,
-          textStyle: {
-            color: "#fff",
-            fontSize: 12,
-            backgroundColor: "rgba(0,0,0,0)",
-          },
-        },
-        // itemStyle: {
-        //   color: "#1d5e98",
-        //   opacity: 0.8,
-        //   borderWidth: 0.8,
-        //   borderColor: "#111",
-        // },
+
         itemStyle: {
           // 区域透明但微亮
           color: "rgba(255,255,255,0.05)",
           borderColor: "#66ccff", // 边界亮色
-          borderWidth: 0.8,
+          borderWidth: 2,
+          fontSize: 28,
         },
 
         emphasis: {
+          label: {
+            show: true,
+            distance: 1,
+            color: '#ffffff',
+            fontSize: 28
+          },
           itemStyle: {
-            color: "rgba(255,255,255,0.1)",
-            borderColor: "#99ffff",
+            color: "rgba(41,241,250, 0.3)", // 悬浮时区块填充颜色
+            borderColor: "#fff", // 悬浮时边框颜色
             borderWidth: 1,
           },
         },
 
-        // emphasis: {
-        //   itemStyle: {
-        //     color: "#2a333d",
-        //   },
-        //   label: {
-        //     show: false,
-        //   },
-        // },
-
         light: {
           main: {
             intensity: 1.2,
@@ -146,11 +114,6 @@ class WorldMap extends React.Component {
             intensity: 0.4,
           },
         },
-        // viewControl: {
-        //   distance: 80, // 控制相机远近
-        //   alpha: 60, // 俯视角度
-        //   beta: 0, // 水平方向旋转角度
-        // },
       },
       series: [
         {
@@ -161,6 +124,17 @@ class WorldMap extends React.Component {
           itemStyle: {
             color: "#DE701C",
           },
+          // tooltip: {
+          //   show: true,
+          //   formatter: (params) => {
+          //     return `${params.name}<br/>${params.value[2]}`;
+          //   },
+          //   textStyle: {
+          //     // color: "#fff",
+          //     fontSize: 28,
+          //     fontWeight: "bold",
+          //   },
+          // },
           data: this.props.data,
         },
       ],

xinkeaboard-admin/src/pages/statistics/bigscreen/styles/overview.less

@@ -43,7 +43,7 @@
 
       .item_value {
         position: absolute;
-        top: 0;
+        top: 40px;
         font-weight: 400;
         font-size: 64px;
         font-family: "Rajdhani", "Orbitron", "DIN Condensed", sans-serif;
@@ -53,7 +53,7 @@
 
       .item_label {
         position: absolute;
-        top: 80px;
+        top: 100px;
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: 400;
         font-size: 32px;