tui

attendance-performance-manager-ui/admin/src/views/homeCharts/record/list.vue

@@ -738,7 +738,7 @@ export default {
                 areaStyle: { color: "#56A3F1" }, //雷达覆盖区域背景颜色
                 label: {
                   show: false,
-                  formatter: function (params) {
+                  formatter: function(params) {
                     return params.value;
                   },
                 },
@@ -936,12 +936,12 @@ export default {
     },
     // 反馈记录整体情况echarts
     drawRecordPie(names = [], values = []) {
-      let colorList = ["#97e7ff", "#75f5ff", "#00deff", "#0093ff", "#2a5fcf"];
+      let colorList = ["#2a5fcf", "#fc8251", "#97e7ff", "#91cd77"];
       let visualMapPiecesData = [];
       for (var i = 0; i < names.length; i++) {
         visualMapPiecesData.push({
           value: values[i],
-          label: names[i],
+          name: names[i],
           color: colorList[i],
         });
       }
@@ -952,54 +952,133 @@ export default {
       if (!this.recordPie) {
         this.recordPie = this.$echarts.init(chartDom);
       }
-
       this.recordPie.setOption({
         tooltip: {
           trigger: "item",
         },
-
-        polar: {
-          radius: [0, "90%"],
-          center: ["50%", "55%"],
-        },
-        angleAxis: {
-          show: false, // 隐藏刻度
-          max: Math.max(...values) * 1.5, // 控制柱子高度
-          startAngle: 90,
-        },
-        radiusAxis: {
-          show: true,
-          type: "category",
-          data: names,
-        },
-
-        visualMap: {
-          top: 40,
-          x: "left",
+        legend: {
+          bottom: "0%",
+          right: "0%",
           orient: "vertical",
           textStyle: {
-            color: "#000",
-          },
-          pieces: visualMapPiecesData,
-          outOfRange: {
-            color: "#999",
+            // 文字的样式
+            fontSize: 12, // 可控制每个legend项的间距
+            color: "#000000",
+            fontWeight: 600,
           },
+          // rich: {
+          //   // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
+          //   oneone: {
+          //     width: 50,
+          //     color: "#000000",
+          //     fontSize: 12,
+          //     fontWeight: "bolder",
+          //   },
+          //   twotwo: {
+          //     width: 35,
+          //     color: "#333",
+          //     fontSize: 12,
+          //     fontWeight: 600,
+          //   },
+          //   threethree: {
+          //     // 设置百分比这一列的样式
+          //     width: 20,
+          //     color: "#333",
+          //     fontSize: 12,
+          //   },
+          // },
+          // formatter: (name) => {
+          //   // formatter格式化函数动态呈现数据
+          //   let total = 0; // 用于计算总数
+          //   let target; // 遍历拿到数据
+          //   // for (let i = 0; i < data.length; i++) {
+          //   //   total += data[i].value;
+          //   //   if (data[i].name == name) {
+          //   //     target = data[i].value;
+          //   //   }
+          //   // }
+          //   // let v = ((target / total) * 100).toFixed(2);
+          //   return `${name}`;
+          //   //     富文本第一列样式应用    富文本第二列样式应用      富文本第三列样式应用
+          // },
         },
+
         series: [
           {
-            type: "bar",
-            data: values,
-            coordinateSystem: "polar",
+            type: "pie",
+            radius: "80%",
+            // avoidLabelOverlap: false,
+            data: visualMapPiecesData,
+            left: "-25%",
+            top: "10%",
+            minAngle: 1, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
+            avoidLabelOverlap: true,
+            // label: {
+            //   position: "center",
+            //   fontSize: 16,
+            //   // formatter: () => {
+            //   //   return "总" + "\n" + total;
+            //   // },
+            // },
             itemStyle: {
               normal: {
                 // 定制显示（按顺序）
-                color: function (params) {
+                color: function(params) {
                   return colorList[params.dataIndex];
                 },
               },
             },
+            labelLine: {
+              show: true,
+            },
           },
         ],
+        // tooltip: {
+        //   trigger: "item",
+        // },
+
+        // polar: {
+        //   radius: [0, "90%"],
+        //   center: ["50%", "55%"],
+        // },
+        // angleAxis: {
+        //   show: false, // 隐藏刻度
+        //   max: Math.max(...values) * 1.5, // 控制柱子高度
+        //   startAngle: 90,
+        // },
+        // radiusAxis: {
+        //   show: true,
+        //   type: "category",
+        //   data: names,
+        // },
+
+        // visualMap: {
+        //   top: 40,
+        //   x: "left",
+        //   orient: "vertical",
+        //   textStyle: {
+        //     color: "#000",
+        //   },
+        //   pieces: visualMapPiecesData,
+        //   outOfRange: {
+        //     color: "#999",
+        //   },
+        // },
+        // series: [
+        //   {
+        //     type: "bar",
+        //     data: values,
+        //     coordinateSystem: "polar",
+        //     itemStyle: {
+        //       normal: {
+        //         // 定制显示（按顺序）
+        //         color: function(params) {
+        //           return colorList[params.dataIndex];
+        //         },
+        //       },
+        //     },
+        //   },
+        // ],
       });
       window.addEventListener("resize", this.adapterEcharts);
     },