设备统计去重

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

@@ -25,100 +25,121 @@
     },
     methods: {
       initChart(data) {
-        let div = document.getElementById('DissatisfiedReason');
+      let div = document.getElementById('DissatisfiedReason');
-        this.myChart = echarts.init(div);
+      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);
+          uniqueData.push(item);
         }
-        const color = ['#1A95FF', '#27B5BD' ,'#368eff','#F95619', '#FFAA01','#1a95ff']
+      });
-        var option = {
+      const getname = uniqueData.map(item => item.tittle);
-          color,
+      const getNum = uniqueData.map(item => Number(item.numStr));
-          tooltip: {
+      const total = getNum.reduce((sum, num) => sum + num, 0);
-            trigger: "item"
+
+      // 处理成 { 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",
+        },
+        legend: {
+          type: "plain",
+          orient: "vertical",
+          right: 20,
+          top: "center",
+          align: "left",
+          itemGap: 16,
+          itemWidth: 10,
+          itemHeight: 10,
+          symbolKeepAspect: false,
+          selectedMode: false,
+          formatter: function (name) {
+            const index = getname.indexOf(name);
+            return `{name|${name}}{num|${getNum[index]}}`;
           },
-          legend: {
+          textStyle: {
-            type: "plain",
+            rich: {
-            orient: "vertical",
+              name: {
-            right: 20,
+                fontSize: 12,
-            top: "center",
+                width: 80,
-            align: "left",
+                overflow: 'hidden',
-            itemGap: 16,
+                textOverflow: 'ellipsis',
-            itemWidth: 10,
+                padding: [0, 29, 0, 5],
-            itemHeight: 10,
+                color: '#A3B9DA',
-            symbolKeepAspect: false,
+              },
-            selectedMode: false,
+              num: {
-            formatter: function (name) {
+                fontSize: 14,
-              for (var i = 0; i < getname.length; i++) {
+                fontWeight: 400,
-                if (name == data[i].name) {
+                align: 'right',
-                  return '{name|' + name + '}{num|' + getNum[i] + '}'
+                color: '#FFFFFF',
-                }
+              },
-              }
             },
-            textStyle: {
-              rich: {
-                name: {
-                  fontSize: 12,
-                  width: 80,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  padding: [0, 29, 0, 5],
-                  color: '#A3B9DA',
-                },
-                num: {
-                  fontSize: 14,
-                  fontWeight: 400,
-                  align: 'right',
-                  color: '#FFFFFF',
-                }
-              }
-            }
           },
-          series: [{
+        },
-            name: '',
+        series: [{
-            type: "pie",
+          name: '',
-            radius: ["65%", "90%"],
+          type: "pie",
-            center: ["20%", "50%"],
+          radius: ["65%", "90%"],
-            avoidLabelOverlap: false,
+          center: ["20%", "50%"],
+          avoidLabelOverlap: false,
+          label: {
+            show: true,
+            position: "center",
+            color: "rgba(13, 17, 29,0)",
+            formatter: `{primary|${total}}\n{point|门禁设备}`,
+            rich: {
+              primary: {
+                fontSize: 24,
+                color: '#7FCEFF',
+                align: 'center',
+              },
+              point: {
+                fontSize: 12,
+                fontWeight: 400,
+                color: "#A3B9DA",
+                align: 'center',
+              },
+            },
+          },
+          emphasis: {
             label: {
               show: true,
-              position: "center",
+              fontSize: '14',
-              color: "rgba(13, 17, 29,0)",
+              fontWeight: 'normal',
-              formatter: `{primary|${total}}\n{point|门禁设备}}`,
-              rich: {
-                primary: {
-                  fontSize: 24,
-                  color: '#7FCEFF',
-                  align: 'center'
-                },
-                point: {
-                  fontSize: 12,
-                  fontWeight: 400,
-                  color: "#A3B9DA",
-                  align: 'center'
-                }
-              }
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: '14',
-                fontWeight: 'normal'
-              }
-            },
-            labelLine: {
-              show: false
             },
-            data: data,
+          },
-            zlevel: 30
+          labelLine: {
-          }]
+            show: false,
-        };
+          },
-        this.myChart.setOption(option, true);
+          data: pieData,
-        window.addEventListener("resize", () => this.myChart.resize());
+          zlevel: 30,
-      }
+        }],
+      };
+
+  // 设置图表
+  this.myChart.setOption(option, true);
+
+  // 处理窗口自适应
+  window.removeEventListener("resize", this.myChart.resize);
+  window.addEventListener("resize", () => this.myChart.resize());
+}
+
     }
   }
   </script>