Sfoglia il codice sorgente

fix: 大屏地图调整

周玉环 2 giorni fa
parent
commit
7ca65b35b4

+ 23 - 4
xinkeaboard-admin/src/pages/statistics/bigscreen/components/BarChart.js

@@ -50,7 +50,7 @@ class BarChart extends React.Component {
         data: this.props.xAxisdata,
         axisLabel: {
           show: true,
-          fontWeight: 'bold',
+          fontWeight: "bold",
           fontSize: 12,
           color: "#FFFFFF",
         },
@@ -59,7 +59,7 @@ class BarChart extends React.Component {
         type: "value",
         axisLabel: {
           show: true,
-          fontWeight: 'bold',
+          fontWeight: "bold",
           fontSize: 12,
           color: "#FFFFFF",
         },
@@ -69,6 +69,7 @@ class BarChart extends React.Component {
           lineStyle: {
             type: "dashed",
             color: "#ccc",
+            width: 0.3,
           },
         },
       },
@@ -104,16 +105,34 @@ class BarChart extends React.Component {
           symbolPosition: "end", // 关键:自动到柱子最高点
 
           symbolOffset: [0, -15], // 向上偏移,让图片在柱子顶部
-          data: this.props.seriesData.map(item => item == 0 ? null : item),
+          data: this.props.seriesData.map((item) => (item == 0 ? null : item)),
           z: 4,
         },
+        {
+          name: "趋势",
+          type: "line",
+          data: this.props.seriesData.map(item => item == 0 ? 2 : item - 2),
+          smooth: true, // ✅ 曲线
+          sampling: "average",// 取平均,减少抖动
+          symbol: "none",
+          symbolSize: 8,
+          lineStyle: {
+            color: "rgba(41, 241, 250, 1)",
+            width: 4,
+          },
+          itemStyle: {
+            // color: "#E94E77",
+          },
+        },
       ],
     };
     this.chartInstance.setOption(option);
   }
 
   render() {
-    return <div style={{ width: "100%", height: "100%" }} ref={this.chartRef} />;
+    return (
+      <div style={{ width: "100%", height: "100%" }} ref={this.chartRef} />
+    );
   }
 }
 

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

@@ -8,7 +8,7 @@ class Pie3DChart extends React.Component {
     this.chartRef = React.createRef();
     this.chartInstance = null;
     this.endColor = [126, 206, 244]; // RGB 起点
-    this.startColor = [64, 50, 166]; // RGB 终点
+    this.startColor = [15, 40, 99]; // RGB 终点
   }
 
   componentDidMount() {

+ 2 - 0
xinkeaboard-admin/src/pages/statistics/bigscreen/components/TrafficLineChart.js

@@ -69,6 +69,7 @@ class LineChart extends React.Component {
           lineStyle: {
             type: "dashed",
             color: "#ccc",
+            width: 0.3
           },
         },
         data: this.props.xAxisData,
@@ -83,6 +84,7 @@ class LineChart extends React.Component {
           lineStyle: {
             type: "dashed",
             color: "#ccc",
+            width: 0.3
           },
         },
       },

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

@@ -42,7 +42,7 @@ class WorldMap2D extends React.Component {
       return {
         name: d.name,
         value: [d.value[0], d.value[1], d.value[2]], // 位置
-        symbolOffset: [0, -d.value[2] / 2 * 30 ], // Y轴偏移(柱子高度一半 + 额外10像素)
+        symbolOffset: [0, -d.value[2] / 2 * 50 ], // Y轴偏移(柱子高度一半 + 额外10像素)
       };
     });
     const option = {
@@ -51,7 +51,7 @@ class WorldMap2D extends React.Component {
           return `${params.name} <br/>${params.value[2]}`;
         },
         textStyle: {
-          fontSize: 20,
+          fontSize: 30,
           fontWeight: "bold",
         },
       },
@@ -64,6 +64,11 @@ class WorldMap2D extends React.Component {
           borderColor: "#2EA7E0",
           borderWidth: 2,
         },
+        label: {
+          show: false, // ⚡ 确保不显示文字
+          color: "#fff", // 如果 show: true 时设置文字颜色
+          fontSize: 12
+        },
         emphasis: {
           itemStyle: {
             areaColor: "rgba(41, 241, 250, 0.6)", // 悬浮时高亮色
@@ -75,6 +80,9 @@ class WorldMap2D extends React.Component {
             shadowOffsetX: 10,               // X 偏移
             shadowOffsetY: -10,     
           },
+          label: {
+            show: false // 悬浮时也不显示文字
+          }
         },
       },
       series: [
@@ -83,8 +91,8 @@ class WorldMap2D extends React.Component {
           coordinateSystem: "geo",
           symbol: "rect", // 用矩形柱代替点
           symbolSize: (val) => {
-            const height = val[2] * 30;
-            return [10, height];
+            const height = val[2] * 50;
+            return [28, height];
           },
           itemStyle: {
             color: {
@@ -109,7 +117,7 @@ class WorldMap2D extends React.Component {
           type: "scatter",
           coordinateSystem: "geo",
           symbol: `image://${topIcon}`, // 图片 URL
-          symbolSize: [15, 15], // 图片大小
+          symbolSize: [33, 33], // 图片大小
           data: topIconData,
         },
       ],

+ 1 - 1
xinkeaboard-admin/src/pages/statistics/bigscreen/index.less

@@ -116,7 +116,7 @@
     position: absolute;
     left: 750px;
     top: 460px;
-    width: 2300px;
+    width: 2280px;
     height: 1330px;
     z-index: 2000;
   }