设备统计去重

src/views/dataBoard/IoTPerception/devicesNumber/index.vue

@@ -27,18 +27,36 @@
       initChart(data) {
       let div = document.getElementById('DissatisfiedReason');
       this.myChart = echarts.init(div);
-        var getname = data.map(item => item.tittle); // 课程名
+
-        var getNum = data.map(item => item.numStr);
+      // 数据去重
-        var total = eval(getNum.join('+'))
+      const uniqueData = [];
-        var data = [];
+      const seenTitles = new Set();
-        for (var i = 0; i < getname.length; i++) {
+      data.forEach(item => {
-          data.push({name: getname[i], value: getNum[i]})
+        if (!seenTitles.has(item.tittle)) {
-        }
+          seenTitles.add(item.tittle);
-        const color = ['#1A95FF', '#27B5BD' ,'#368eff','#F95619', '#FFAA01','#1a95ff']
+          uniqueData.push(item);
-        var option = {
+        }
+      });
+      const getname = uniqueData.map(item => item.tittle);
+      const getNum = uniqueData.map(item => Number(item.numStr));
+      const total = getNum.reduce((sum, num) => sum + num, 0);
+
+      // 处理成 { name, value } 格式数据
+      const pieData = getname.map((name, index) => ({
+        name,
+        value: getNum[index],
+      }));
+
+      // 动态颜色生成
+      const color = [...Array(uniqueData.length)].map(
+        (_, i) => `hsl(${(i * 360) / uniqueData.length}, 70%, 50%)`
+      );
+
+      // 配置图表
+      const option = {
         color,
         tooltip: {
-            trigger: "item"
+          trigger: "item",
         },
         legend: {
           type: "plain",
@@ -52,11 +70,8 @@
           symbolKeepAspect: false,
           selectedMode: false,
           formatter: function (name) {
-              for (var i = 0; i < getname.length; i++) {
+            const index = getname.indexOf(name);
-                if (name == data[i].name) {
+            return `{name|${name}}{num|${getNum[index]}}`;
-                  return '{name|' + name + '}{num|' + getNum[i] + '}'
-                }
-              }
           },
           textStyle: {
             rich: {
@@ -73,9 +88,9 @@
                 fontWeight: 400,
                 align: 'right',
                 color: '#FFFFFF',
-                }
+              },
-              }
+            },
-            }
+          },
         },
         series: [{
           name: '',
@@ -87,38 +102,44 @@
             show: true,
             position: "center",
             color: "rgba(13, 17, 29,0)",
-              formatter: `{primary|${total}}\n{point|门禁设备}}`,
+            formatter: `{primary|${total}}\n{point|门禁设备}`,
             rich: {
               primary: {
                 fontSize: 24,
                 color: '#7FCEFF',
-                  align: 'center'
+                align: 'center',
               },
               point: {
                 fontSize: 12,
                 fontWeight: 400,
                 color: "#A3B9DA",
-                  align: 'center'
+                align: 'center',
-                }
+              },
-              }
+            },
           },
           emphasis: {
             label: {
               show: true,
               fontSize: '14',
-                fontWeight: 'normal'
+              fontWeight: 'normal',
-              }
+            },
           },
           labelLine: {
-              show: false
+            show: false,
           },
-            data: data,
+          data: pieData,
-            zlevel: 30
+          zlevel: 30,
-          }]
+        }],
       };
+
+  // 设置图表
   this.myChart.setOption(option, true);
+
+  // 处理窗口自适应
+  window.removeEventListener("resize", this.myChart.resize);
   window.addEventListener("resize", () => this.myChart.resize());
-      }
+}
+
     }
   }
   </script>