修改界面

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

@@ -138,6 +138,8 @@ const horizontalRoundedBarChartWithBackground = function (data, id) {
     $(window).resize(charts.resize);
 }
 const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
+    let time = () => {
+    }
     let charts = echarts.init(id);
     if (!data) {
         data = {
@@ -159,7 +161,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
             top: "0%",
             containLabel: true,
         },
-        dataZoom:[],
+        dataZoom: [],
         xAxis: {
             show: false,
         },
@@ -213,8 +215,8 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
                         color: "#fff",
                         fontSize: 0.75 * vw
                     },
-                    formatter: function (val,index,e) {
-                        return data.yData[val.dataIndex] +'%'
+                    formatter: function (val, index, e) {
+                        return data.yData[val.dataIndex] + '%'
                     }
                 },
                 itemStyle: {
@@ -245,7 +247,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
         })
 
         let step = 1 / (data.yNameOne.length / 9) * 100
-        setInterval(() => {
+        time = setInterval(() => {
             option.dataZoom[0].end += step
             option.dataZoom[0].start += step
             if (option.dataZoom[0].start >= 100) {
@@ -258,6 +260,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
             }
             charts.setOption(option);
         }, 3000)
+        time()
     }
     charts.setOption(option);
     $(window).resize(charts.resize);
@@ -919,7 +922,7 @@ const barChartAndLineChartFour = function (data, id) {
             }
         ]
     };
-    if (Math.max(...data.yDataOne) <=5){
+    if (Math.max(...data.yDataOne) <= 5) {
         option.yAxis[0].max = 5
     }
 
@@ -1503,7 +1506,7 @@ const multipleVerticalBarChartTwo = function (data, id) {
 }
 
 // 单个垂直柱状图
-const singleVerticalBarChart = function (data, id,rotate=0) {
+const singleVerticalBarChart = function (data, id, rotate = 0) {
     let charts = echarts.init(id);
     if (!data) {
         data = {
@@ -1583,6 +1586,14 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
                         ),
                     },
                 },
+                label: {
+                    show: true,
+                    position: "top",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 0.75 * vw
+                    },
+                },
                 data: data.yData,
             },
         ],
@@ -1593,12 +1604,14 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
     $(window).resize(charts.resize);
 }
 const singleVerticalBarChartTwo = function (data, id) {
+    let time = () => {
+    }
     let charts = echarts.init(id);
     if (!data) {
         data = {
             xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'],
             yData: [38, 60, 40, 55, 42, 39, 45, 40],
-            yImg: ['','','','','','','',''],
+            yImg: ['', '', '', '', '', '', '', ''],
         }
     }
     let option = {
@@ -1620,7 +1633,7 @@ const singleVerticalBarChartTwo = function (data, id) {
                 color: '#c0c3cd', //X轴文字
                 fontSize: 14,
                 interval: 0,
-                rotate:20,
+                rotate: 20,
             },
             axisTick: {
                 lineStyle: {
@@ -1709,8 +1722,8 @@ const singleVerticalBarChartTwo = function (data, id) {
             {
                 type: 'pictorialBar',
                 name: 'pictorial element',
-                symbol: function(val,index){
-                         return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
+                symbol: function (val, index) {
+                    return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
                 },
                 symbolSize: [40, 40],
                 z: 10,
@@ -1722,7 +1735,7 @@ const singleVerticalBarChartTwo = function (data, id) {
                     }
                 })
             },
-            ],
+        ],
     };
     if (data.xName.length > 10) {
         option.dataZoom.push({
@@ -1739,20 +1752,21 @@ const singleVerticalBarChartTwo = function (data, id) {
             }
         })
 
-    let step = 1 / (data.xName.length / 11) * 100
-    setInterval(() => {
-        option.dataZoom[0].end += step
-        option.dataZoom[0].start += step
-        if (option.dataZoom[0].start >= 100) {
-            option.dataZoom[0].start = 0
-            option.dataZoom[0].end = step
-        }
-        if (option.dataZoom[0].end >= 100) {
-            option.dataZoom[0].end = 100
-            option.dataZoom[0].start = option.dataZoom[0].end - step
-        }
-        charts.setOption(option);
-    }, 3000)
+        let step = 1 / (data.xName.length / 11) * 100
+        time = setInterval(() => {
+            option.dataZoom[0].end += step
+            option.dataZoom[0].start += step
+            if (option.dataZoom[0].start >= 100) {
+                option.dataZoom[0].start = 0
+                option.dataZoom[0].end = step
+            }
+            if (option.dataZoom[0].end >= 100) {
+                option.dataZoom[0].end = 100
+                option.dataZoom[0].start = option.dataZoom[0].end - step
+            }
+            charts.setOption(option);
+        }, 3000)
+        time()
     }
 
 
@@ -2124,28 +2138,28 @@ const hollowPieChart = function (data, id) {
 // 多个环形图
 const percentageRingDiagram = function (data, id) {
     let charts = echarts.init(id);
-        data ??= [
-            {
-                name: "内胆检漏",
-                value: 54,
-            },
-            {
-                name: "安全检测",
-                value: 44,
-            },
-            {
-                name: "成品检漏",
-                value: 35,
-            },
-            {
-                name: "测温性能",
-                value: 30,
-            },
-            {
-                name: "成品外观",
-                value: 44,
-            },
-        ];
+    data ??= [
+        {
+            name: "内胆检漏",
+            value: 54,
+        },
+        {
+            name: "安全检测",
+            value: 44,
+        },
+        {
+            name: "成品检漏",
+            value: 35,
+        },
+        {
+            name: "测温性能",
+            value: 30,
+        },
+        {
+            name: "成品外观",
+            value: 44,
+        },
+    ];
 
     let titleArr = [],
         seriesArr = [];
@@ -2194,7 +2208,7 @@ const percentageRingDiagram = function (data, id) {
             },
             hoverAnimation: false,
             center: [
-                    index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
+                index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
                 index > 2 ? "75%" : "25%",
             ],
             data: [