修改界面

ruoyi-admin/src/main/resources/static/css/board/month.css

@@ -1,7 +1,7 @@
 body {
     height: auto;
     width: auto;
-    background: url(../../img/board/month/backgroundImg.jpg) no-repeat center fixed;
+    background: url(../../img/board/month/bg3.jpg) no-repeat center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;

ruoyi-admin/src/main/resources/static/js/board/month.js

@@ -26,7 +26,7 @@ $(() => {
         }, document.getElementById("safe"), '','',4)
     })
     autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => {
-        pieChart(data.map((val, index) => {
+        pieChartTwo(data.map((val, index) => {
             if (index == 0) {
                 return {
                     name: val.name,
@@ -140,8 +140,8 @@ const today = () => {
 }
 
 const moduleTitle = () => {
+    // <span style="position: absolute;top: 2.9%;left: 50%;color: #fff;font-size: 1.1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能冷柜中央管控平台</span>
     const html = `
-    <span style="position: absolute;top: 2.9%;left: 50%;color: #fff;font-size: 1.1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能冷柜中央管控平台</span>
     <span style="position: absolute;top: 14.5%;left: 2.6%;color: #CFD2D0;font-size: 1.0vw">用户满意度</span>
     <span style="position: absolute;top: 14.5%;left: 27.6%;color: #CFD2D0;font-size: 1.0vw">产品升级</span>
     <span style="position: absolute;top: 14.5%;left: 68%;color: #CFD2D0;font-size: 1.0vw">场景升级</span>

ruoyi-admin/src/main/resources/static/js/echartsCommon.js

@@ -1124,7 +1124,7 @@ const lineChartTwo = function (data, id, unit = '') {
                         color: "#a8aab0",
                         fontStyle: "normal",
                         fontFamily: "微软雅黑",
-                        fontSize: 0.5 * vw,
+                        fontSize: 0.8 * vw,
                     },
                 },
             },
@@ -1331,7 +1331,7 @@ const lineChartThree = function (data, id, unit = '',smooth=false) {
                             color: "#14bd2d",
                             fontStyle: "normal",
                             fontFamily: "微软雅黑",
-                            fontSize: 0.5 * vw,
+                            fontSize: 0.8 * vw,
                         },
                     },
                 },
@@ -1363,7 +1363,7 @@ const lineChartThree = function (data, id, unit = '',smooth=false) {
                             color: "#3094ea",
                             fontStyle: "normal",
                             fontFamily: "微软雅黑",
-                            fontSize: 0.5 * vw,
+                            fontSize: 0.8 * vw,
                         },
                     },
                 },
@@ -1481,6 +1481,93 @@ const pieChart = function (data, id, unit = '次') {
     charts.setOption(option);
     $(window).resize(charts.resize);
 }
+const pieChartTwo = function (data, id, unit = '次') {
+    let charts = echarts.init(id);
+    if (!data) {
+        data = [
+            {
+                value: 285,
+                name: "类型1",
+            },
+            {
+                value: 410,
+                name: "类型2",
+            },
+            {
+                value: 274,
+                name: "类型3",
+            },
+            {
+                value: 235,
+                name: "类型4",
+            },
+        ]
+    }
+    if (data.length === 0) {
+        data = [{
+            value: 0,
+            name: ''
+        }]
+    }
+    let option = {
+        tooltip: {
+            trigger: "item",
+            formatter: "{b} : {c} ({d}%)",
+            textStyle: {
+                fontSize: 0.8 * vw
+            }
+        },
+
+        series: [
+            {
+                name: "访问来源",
+                type: "pie",
+                radius: "50%",
+                center: ["50%", "50%"],
+                colorBy: 'data',
+                // color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
+                data: data,
+                roseType: "radius",
+                overflow:'break',
+                label: {
+                    normal: {
+                        formatter: `{b|{b}} \n {c|{c}${unit}}`,
+                        rich: {
+                            c: {
+                                color: "rgb(241,246,104)",
+                                fontSize: 0.75 * vw,
+                                lineHeight: 5,
+                            },
+                            b: {
+                                color: "rgb(98,137,169)",
+                                fontSize: 0.75 * vw,
+                                height: 1.5 * vw,
+                            },
+                        },
+                    },
+                },
+                emphasis: {
+                    label: {
+                        fontSize: 0.75 * vw
+                    }
+                },
+                labelLine: {
+                    normal: {
+                        lineStyle: {
+                            color: "rgb(98,137,169)",
+                        },
+                        smooth: true,
+                        length: 20,
+                        length2: 20,
+                    },
+                },
+            },
+        ],
+    };
+
+    charts.setOption(option);
+    $(window).resize(charts.resize);
+}
 
 // 垂直柱状图
 const verticalBarChart = function (data, id, unit = '次') {

ruoyi-admin/src/main/resources/templates/broad/month.html

@@ -64,10 +64,10 @@
 <div class="energyConsumption" id="energyConsumption"></div>
 <!--异常-->
 <div class="abnormal" id="abnormal"></div>
-<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 28.8%;font-size: 0.8vw;font-weight: 800;color: red;">品牌赋能</span>
-<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 37.2%;font-size: 0.8vw;font-weight: 800;color: red;">全网协同</span>
-<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 62.8%;font-size: 0.8vw;font-weight: 800;color: red;">生态终端</span>
-<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 71.1%;font-size: 0.8vw;font-weight: 800;color: red;">感动用户</span>
+<!--<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 28.8%;font-size: 0.8vw;font-weight: 800;color: red;">品牌赋能</span>-->
+<!--<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 37.2%;font-size: 0.8vw;font-weight: 800;color: red;">全网协同</span>-->
+<!--<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 62.8%;font-size: 0.8vw;font-weight: 800;color: red;">生态终端</span>-->
+<!--<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 71.1%;font-size: 0.8vw;font-weight: 800;color: red;">感动用户</span>-->
 <!--亮点产品-->
 <div id="slide" class="slide"></div>
 </body>