统计

package.json

@@ -50,14 +50,14 @@
     "core-js": "^3.11.0",
     "dayjs": "^1.10.6",
     "echarts": "^4.9.0",
+    "echarts-wordcloud": "^1.1.3",
     "recorder-core": "^1.1.21080800",
     "regenerator-runtime": "^0.12.1",
     "vue": "^2.6.11",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.2.0",
     "vuex-persistedstate": "^4.0.0-beta.3",
-    "wangeditor": "^4.7.10",
-    "wordcloud": "^1.2.2"
+    "wangeditor": "^4.7.10"
   },
   "devDependencies": {
     "@babel/runtime": "~7.12.0",

src/project/pidu/AppDataStatistics/components/sensitive.vue

@@ -41,15 +41,15 @@
     </div>
 
     <div class="groups_box" v-if="wordData">
-      <canvas id="main"></canvas>
+      <div id="main"></div>
     </div>
-   
   </div>
 </template>
 
 <script>
 import echarts from "echarts";
-import WordCloud from 'wordcloud';
+import "echarts-wordcloud";
+
 export default {
   name: "sensitive",
   props: {
@@ -60,7 +60,7 @@ export default {
       info: {},
       groupData: [],
       userData: [],
-      wordData: []
+      wordData: [],
     };
   },
   created() {
@@ -68,7 +68,6 @@ export default {
   },
   methods: {
     getData() {
-      // 居民好友
       this.$http
         .post(
           `/app/appsessionarchivekeywordrecord/getKeywordRecordStatistic?departmentId=${this.departmentId}`
@@ -83,14 +82,14 @@ export default {
             this.userData = res.data.personRecordListMap.map((e) => e.cnt);
 
             res.data.wordNames.map((item) => {
-              var i = [item.wordName, item.wordCount*8]
-              this.wordData.push(i)
-            })
+              var i = { name: item.wordName, value: item.wordCount };
+              this.wordData.push(i);
+            });
             this.$nextTick(() => {
               this.getGroupEcharts(groupMonth, this.groupData);
               this.getUserEcharts(userMonth, this.userData);
               if (this.wordData) {
-                this.getKeyWordEcharts(this.wordData)
+                this.getKeyWordEcharts(this.wordData);
               }
             });
           }
@@ -222,15 +221,44 @@ export default {
       };
       option && userChart.setOption(option);
     },
-    getKeyWordEcharts(list) {
-      WordCloud(document.getElementById('main'), {
-        list: list 
-        // [
-        //   ['foo', 50],
-        //   ['bar', 6],
-        //   // ...
-        // ],
-        // 其他自定义选项
+    getKeyWordEcharts(data) {
+      var chart = echarts.init(document.getElementById("main"));
+
+      chart.setOption({
+        series: [
+          {
+            type: "wordCloud",
+            sizeRange: [15, 80],
+            rotationRange: [0, 0],
+            rotationStep: 45,
+            gridSize: 8,
+            shape: "pentagon",
+            width: "100%",
+            height: "100%",
+            textStyle: {
+              normal: {
+                color: function () {
+                  return (
+                    "rgb(" +
+                    [
+                      Math.round(Math.random() * 160),
+                      Math.round(Math.random() * 160),
+                      Math.round(Math.random() * 160),
+                    ].join(",") +
+                    ")"
+                  );
+                },
+                fontFamily: "sans-serif",
+                fontWeight: "normal",
+              },
+              emphasis: {
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+            },
+            data,
+          },
+        ],
       });
     },
   },

src/project/pidu/AppSensitive/AppSensitive.vue

@@ -84,7 +84,6 @@ export default {
             }else {
               item.text = this.changeKeyRed(item.content, item.wordName)
             }
-            
           })
           this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
           this.pages = res.data.pages