修改界面

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

@@ -44,11 +44,12 @@ $(() => {
             }
 
         }), document.getElementById("distributionOfBadTypesInProductionLineByDay"));
-        barChartAndLineChart({
-                xName: data.map(val => val.name),
-                yDataTwo: data.map(val => val.qty),
-                yDataTwoName: "质量"
-        }, document.getElementById("statisticOfAttribute"));
+        percentageRingDiagramTwo(null, document.getElementById("statisticOfAttribute"))
+        // barChartAndLineChart({
+        //         xName: data.map(val => val.name),
+        //         yDataTwo: data.map(val => val.qty),
+        //         yDataTwoName: "质量"
+        // }, document.getElementById("statisticOfAttribute"));
     })
 
 })

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

@@ -592,26 +592,26 @@ const barChartAndLineChartTwo = function (data, id) {
 // 饼图
 const pieChart = function (data, id) {
     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) {
+    //     data = [
+    //         {
+    //             value: 285,
+    //             name: "类型1",
+    //         },
+    //         {
+    //             value: 410,
+    //             name: "类型2",
+    //         },
+    //         {
+    //             value: 274,
+    //             name: "类型3",
+    //         },
+    //         {
+    //             value: 235,
+    //             name: "类型4",
+    //         },
+    //     ]
+    // }
     let option = {
         tooltip: {
             trigger: "item",
@@ -1880,6 +1880,126 @@ const percentageRingDiagram = function (data, id) {
     };
 
 
+    charts.setOption(option);
+    $(window).resize(charts.resize);
+}
+const percentageRingDiagramTwo = function (data, id) {
+    let charts = echarts.init(id);
+    if (!data) {
+        data = [
+            {
+                name: "数据1",
+                value: 54,
+            },
+            {
+                name: "数据1",
+                value: 44,
+            },
+            {
+                name: "数据1",
+                value: 35,
+            },
+            {
+                name: "数据1",
+                value: 30,
+            },
+            {
+                name: "数据1",
+                value: 44,
+            },
+        ];
+    }
+
+    let titleArr = [],
+        seriesArr = [];
+    let colors = [
+        ["#389af4", "#dfeaff"],
+        ["#ff8c37", "#ffdcc3"],
+        ["#ffc257", "#ffedcc"],
+        ["#fd6f97", "#fed4e0"],
+        ["#a181fc", "#e3d9fe"],
+        ["#389af4", "#dfeaff"],
+        ["#ff8c37", "#ffdcc3"],
+        ["#ffc257", "#ffedcc"],
+        ["#fd6f97", "#fed4e0"],
+    ];
+    data.forEach(function (item, index) {
+        titleArr.push({
+            text: item.name,
+            x: index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
+            y: '80%',
+            // top: '65%',
+            textAlign: "center",
+            textStyle: {
+                fontWeight: "normal",
+                fontSize: 0.8*vw,
+                color: colors[index][0],
+                textAlign: "center",
+            },
+        });
+        seriesArr.push({
+            // name: item.name,
+            type: "pie",
+            clockWise: false,
+            radius: [2*vw, 2.5*vw],
+            itemStyle: {
+                normal: {
+                    color: colors[index][0],
+                    shadowColor: colors[index][0],
+                    shadowBlur: 0,
+                    label: {
+                        show: false,
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                },
+            },
+            hoverAnimation: false,
+            center: [
+                index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
+                '50%',
+            ],
+            data: [
+                {
+                    value: item.value,
+                    label: {
+                        normal: {
+                            formatter: function (params) {
+                                return params.value + "%";
+                            },
+                            position: "center",
+                            show: true,
+                            textStyle: {
+                                fontSize: vw,
+                                fontWeight: "bold",
+                                color: colors[index][0],
+                            },
+                        },
+                    },
+                },
+                {
+                    value: 100 - item.value,
+                    name: "invisible",
+                    itemStyle: {
+                        normal: {
+                            color: colors[index][1],
+                        },
+                        emphasis: {
+                            color: colors[index][1],
+                        },
+                    },
+                },
+            ],
+        });
+    });
+
+    let option = {
+        title: titleArr,
+        series: seriesArr,
+    };
+
+
     charts.setOption(option);
     $(window).resize(charts.resize);
 }