实现简易的人才画像功能

package.json

@@ -17,6 +17,7 @@
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "echarts": "^5.3.3",
+    "echarts-wordcloud": "^2.0.0",
     "element-ui": "^2.13.2",
     "js-cookie": "2.2.0",
     "jsmind": "^0.4.8",

src/api/person.js

@@ -7,3 +7,11 @@ export function getPersonData(params) {
     params
   })
 }
+
+export function getPersonTag(params) {
+  return request({
+    url: '/person/person_tag',
+    method: 'get',
+    params
+  })
+}

src/router/index.js

@@ -178,6 +178,7 @@ export const constantRoutes = [
         path: 'show',
         name: 'JobShow',
         component: () => import('@/views/job/show'),
+        // component: () => import('@/views/job/job'),
         meta: { title: '岗位总览' }
       },
       {
@@ -192,30 +193,47 @@ export const constantRoutes = [
   {
     path: '/person',
     component: Layout,
-    children: [{
+    redirect: '/person/person',
-      path: 'person',
+    name: 'Person',
-      name: 'person',
-      component: () => import('@/views/person/person'),
     meta: {
       title: '人员',
       icon: '人员'
-      }
+    },
-    }]
+    children: [
+      {
+        path: 'person',
+        name: 'PersonAll',
+        component: () => import('@/views/person/person'),
+        meta: { title: '人员' }
+      },
+      {
+        path: 'person_pic_test',
+        name: 'PersonPicTest',
+        component: () => import('@/views/person/person_pic'),
+        meta: { title: '人员画像' }
+      },
+      {
+        path: 'person_review',
+        name: 'PersonReview',
+        component: () => import('@/views/person/person_review'),
+        meta: { title: '人员盘点' }
+      },
+    ]
   },
 
-  {
+  // {
-    path: '/person_review',
+  //   path: '/person_review',
-    component: Layout,
+  //   component: Layout,
-    children: [{
+  //   children: [{
-      path: 'person_review',
+  //     path: 'person_review',
-      name: 'person_review',
+  //     name: 'person_review',
-      component: () => import('@/views/person_review/person_review'),
+  //     component: () => import('@/views/person_review/person_review'),
-      meta: {
+  //     meta: {
-        title: '人才盘点',
+  //       title: '人才盘点',
-        icon: '人员'
+  //       icon: '人员'
-      }
+  //     }
-    }]
+  //   }]
-  },
+  // },
 
   {
     path: '/event',

src/views/job/job.vue

@@ -21,9 +21,9 @@ export default {
       var config = {
         containerId: "viz",
         neo4j: {
-          serverUrl: "bolt://localhost:7687",
+          serverUrl: "bolt://222.20.95.239:7687",
-          serverUser: "neo4j",
+          serverUser: "yzw",
-          serverPassword: "neo4j123",
+          serverPassword: "yzw1234567",
         },
         labels: {
           Character: {
@@ -37,7 +37,7 @@ export default {
             value: "weight",
           },
         },
-        initialCypher: "MATCH (n)-[r:INTERACTS]->(m) RETURN n,r,m limit 100",
+        initialCypher: "MATCH (n:Person) RETURN n LIMIT 25",
       };
       this.neoViz = new NeoVis(config);
       this.neoViz.render();

src/views/login/index.vue

@@ -150,6 +150,7 @@ export default {
           console.log(err);
           this.loading = false;
         });
+        
     },
   },
 };

src/views/person/components/PersonPicture.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="content-body">
     <div class="content-side">培训推荐</div>
+
     <div class="content-main">
       <div>
-        <div class="pp-block1-left">
+        <div class="pp-block1-left" id="wordcloud_chart">
-          <div>
+          <!-- <div>
             {{ personData["最高专业技术资格名称"] }}
             {{ personData["最高专业技术资格等级"] }}
           </div>
@@ -12,7 +13,8 @@
             {{ personData["最高职业技能等级名称"] }}
             {{ personData["最高职业技能等级级别"] }}
           </div>
-          <div>待修改</div>
+          <div>待修改</div> -->
+          关键词云
         </div>
         <div class="pp-block1-right" id="radar_chart">人才评价</div>
       </div>
@@ -33,15 +35,39 @@
 
 <script>
 import * as echarts from "echarts";
+import "echarts-wordcloud";
+
 export default {
   props: ["data"],
   data() {
     return {
       personData: this.data,
+      wordcloudData: [
+        { name: "女", value: 1 },
+        { name: "三连优秀", value: 90 },
+        { name: "学士", value: 40 },
+        { name: "大学", value: 40 },
+        { name: "90后", value: 1 },
+        { name: "兴趣盎然", value: 24 },
+        { name: "初出茅庐", value: 10 },
+        { name: "中共党员", value: 25 },
+        { name: "本省人", value: 1 },
+        { name: "三次优秀", value: 90 },
+        { name: "文思敏捷", value: 70 },
+        { name: "新党员", value: 25 },
+        { name: "运动达人", value: 24 },
+        { name: "初来乍到", value: 20 },
+        { name: "四级电工", value: 80 },
+        { name: "优秀员工", value: 90 },
+        { name: "积极踊跃", value: 8 },
+        { name: "创新达人", value: 90 },
+        { name: "初级助理工程师", value: 80 },
+      ],
     };
   },
   mounted() {
     this.showRadarChart();
+    this.showWordCloud();
   },
   methods: {
     showRadarChart() {
@@ -51,34 +77,34 @@ export default {
 
       option = {
         title: {
-          text: "Basic Radar Chart",
+          text: "",
         },
         legend: {
-          data: ["Allocated Budget", "Actual Spending"],
+          data: ["个人", "全员平均"],
         },
         radar: {
-          shape: 'circle',
+          shape: "circle",
           indicator: [
-            { name: "Sales", max: 6500 },
+            // { name: "工作态度", max: 100 },
-            { name: "Administration", max: 16000 },
+            { name: "工作能力", max: 100 },
-            { name: "Information Technology", max: 30000 },
+            { name: "工作经验", max: 100 },
-            { name: "Customer Support", max: 38000 },
+            { name: "个人品质", max: 100 },
-            { name: "Development", max: 52000 },
+            { name: "团队合作", max: 100 },
-            { name: "Marketing", max: 25000 },
+            { name: "绩效", max: 100 },
           ],
         },
         series: [
           {
-            name: "Budget vs spending",
+            name: "员工表现雷达图",
             type: "radar",
             data: [
               {
-                value: [4200, 3000, 20000, 35000, 50000, 18000],
+                value: [49, 45, 34, 20, 78],
-                name: "Allocated Budget",
+                name: "个人",
               },
               {
-                value: [5000, 14000, 28000, 26000, 42000, 21000],
+                value: [33, 73, 21, 22, 57],
-                name: "Actual Spending",
+                name: "全员平均",
               },
             ],
           },
@@ -86,6 +112,52 @@ export default {
       };
       option && myChart.setOption(option);
     },
+    showWordCloud() {
+      let myChart = echarts.init(document.getElementById("wordcloud_chart"));
+      myChart.setOption({
+        series: [
+          {
+            type: "wordCloud",
+            shape: "circle", // 形状
+            left: "center", // X轴偏移量
+            top: "center", // Y轴偏移量
+            width: "100%", // canvas宽度大小
+            height: "100%", // canvas高度大小
+            sizeRange: [12, 50], //  词典字体大小范围配置
+            rotationRange: [0, 0], // 词典字体旋转角度配置，默认不旋转
+            gridSize: 25, // 词典字体间距配置
+            layoutAnimation: true, // 为false词典过度会阻塞
+            drawOutOfBound: false,
+            textStyle: {
+              fontFamily: "sans-serif",
+              fontWeight: "bold",
+              // Color can be a callback function or a color string
+              color: function () {
+                // Random color
+                return (
+                  "rgb(" +
+                  [
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                  ].join(",") +
+                  ")"
+                );
+              },
+            },
+            emphasis: {
+              focus: "self",
+              textStyle: {
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+            },
+            // 渲染词典数据
+            data: this.wordcloudData,
+          },
+        ],
+      });
+    },
   },
 };
 </script>

src/views/person/person_pic.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <div class="search-bar">
+      <el-row type="flex" justify="space-between" >
+        <el-col :span="18"
+          ><el-input
+            placeholder="请输入内容"
+            v-model="query"
+            clearable
+          ></el-input
+        ></el-col>
+        <el-col :span="4"
+          ><el-button type="primary" icon="el-icon-search"
+          @click="searchPersonPic"
+            >搜索</el-button
+          ></el-col
+        >
+      </el-row>
+    </div>
+    <div id="wordcloud_chart" class="pic"></div>
+    <div id="radar_chart" class="pic"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import "echarts-wordcloud";
+import * as personApi from "@/api/person";
+export default {
+  name: "person_review",
+  components: {},
+  data() {
+    return {
+      query: '',
+      wordcloudData: [
+        { name: "女", value: 1, rarity: 0.01},
+        { name: "三连优秀", value: 90 },
+        { name: "学士", value: 40 },
+        { name: "大学", value: 40 },
+        { name: "90后", value: 1 },
+        { name: "兴趣盎然", value: 24 },
+        { name: "初出茅庐", value: 10 },
+        { name: "中共党员", value: 25 },
+        { name: "本省人", value: 1 },
+        { name: "三次优秀", value: 90 },
+        { name: "文思敏捷", value: 70 },
+        { name: "新党员", value: 25 },
+        { name: "运动达人", value: 24 },
+        { name: "初来乍到", value: 20 },
+        { name: "四级电工", value: 80 },
+        { name: "优秀员工", value: 90 },
+        { name: "积极踊跃", value: 8 },
+        { name: "创新达人", value: 90 },
+        { name: "初级助理工程师", value: 80 },
+      ],
+      radarData: [
+        {
+          value: [49, 45, 34, 20, 78],
+          name: "个人",
+        },
+        {
+          value: [33, 73, 21, 22, 57],
+          name: "全员平均",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.showWordCloud();
+    this.showRadarChart();
+  },
+  methods: {
+    showRadarChart() {
+      let chartDom = document.getElementById("radar_chart");
+      let myChart = echarts.init(chartDom);
+      let option;
+      option = {
+        title: {
+          text: "员工表现雷达图",
+        },
+        legend: {
+          data: ["个人", "全员平均"],
+        },
+        radar: {
+          shape: "circle",
+          indicator: [
+            // { name: "工作态度", max: 100 },
+            { name: "工作能力", max: 100 },
+            { name: "工作经验", max: 100 },
+            { name: "个人品质", max: 100 },
+            { name: "团队合作", max: 100 },
+            { name: "绩效", max: 100 },
+          ],
+        },
+        series: [
+          {
+            name: "员工表现雷达图",
+            type: "radar",
+            data: this.radarData,
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+    showWordCloud() {
+      let myChart = echarts.init(document.getElementById("wordcloud_chart"));
+      myChart.setOption({
+        title: {
+          text: "员工标签词云",
+        },
+        series: [
+          {
+            type: "wordCloud",
+            shape: "circle", // 形状
+            left: "center", // X轴偏移量
+            top: "center", // Y轴偏移量
+            width: "100%", // canvas宽度大小
+            height: "100%", // canvas高度大小
+            sizeRange: [12, 50], //  词典字体大小范围配置
+            rotationRange: [0, 0], // 词典字体旋转角度配置，默认不旋转
+            gridSize: 25, // 词典字体间距配置
+            layoutAnimation: true, // 为false词典过度会阻塞
+            drawOutOfBound: false,
+            textStyle: {
+              fontFamily: "sans-serif",
+              fontWeight: "bold",
+              // Color can be a callback function or a color string
+              color: function () {
+                // Random color
+                return (
+                  "rgb(" +
+                  [
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                  ].join(",") +
+                  ")"
+                );
+              },
+            },
+            emphasis: {
+              focus: "self",
+              textStyle: {
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+            },
+            // 渲染词典数据
+            data: this.wordcloudData,
+          },
+        ],
+      });
+    },
+    searchPersonPic() {
+      personApi.getPersonTag({
+        "query": this.query
+      }).then(
+        (res) => {
+          this.wordcloudData = res.data.wordcloud;
+          this.radarData = res.data.radar;
+          this.showWordCloud();
+          this.showRadarChart();
+        },
+        (err) => {
+          console.log('err:', err)
+        }
+      )
+    }
+  },
+};
+</script>
+
+
+<style scoped>
+.pic {
+  height: 600px;
+  width: 600px;
+  border: 1px solid black;
+  margin: 10px auto 20px;
+}
+
+.search-bar {
+  width: 600px;
+  margin: 20px auto 20px;
+}
+</style>

src/views/person/person_review.vue

@@ -0,0 +1,411 @@
+<template>
+  <div>
+    <div id="pic1" class="pic"></div>
+    <div id="pic2" class="pic"></div>
+    <div id="pic3" class="pic"></div>
+    <div id="pic4" class="pic"></div>
+    <div id="pic5" class="pic"></div>
+    <div id="pic6" class="pic"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import "echarts-wordcloud";
+export default {
+  name: "person_review",
+  components: {},
+  data() {
+    return {
+      genderData: [
+        { value: 588, name: "男" },
+        { value: 177, name: "女" },
+      ],
+      ageData: {
+        xAxis: [
+          "21~25",
+          "26~30",
+          "31~35",
+          "36~40",
+          "41~45",
+          "46~50",
+          "51~55",
+          "56~60",
+          "61~65",
+        ],
+        yAxis: [58, 170, 39, 23, 68, 109, 180, 116, 2],
+      },
+      nationData: [
+        { value: 423, name: "汉族" },
+        { value: 265, name: "土家族" },
+        { value: 62, name: "苗族" },
+        { value: 2, name: "白族" },
+        { value: 2, name: "回族" },
+        { value: 2, name: "满族" },
+        { value: 2, name: "畲族" },
+        { value: 2, name: "侗族" },
+        { value: 2, name: "蒙古族" },
+        { value: 1, name: "藏族" },
+        { value: 1, name: "瑶族" },
+        { value: 1, name: "壮族" },
+      ],
+      politicsData: [
+        { value: 314, name: "群众" },
+        { value: 243, name: "中共党员" },
+        { value: 199, name: "共青团员" },
+        { value: 9, name: "中共预备党员" },
+      ],
+      partyAgeData: {
+        xAxis: [
+          "1~5",
+          "6~10",
+          "11~15",
+          "16~20",
+          "21~25",
+          "26~30",
+          "31~35",
+          "36~40",
+          "41~100",
+        ],
+        yAxis: [52, 35, 27, 41, 53, 34, 6, 5, 0],
+      },
+    };
+  },
+  mounted() {
+    this.showGenderPie();
+    this.showAgeBar();
+    this.showNationPie();
+    this.showPoliticsPie();
+    this.showPartyAgeBar();
+    this.showWordCloud();
+  },
+  methods: {
+    showGenderPie() {
+      let chartDom = document.getElementById("pic1");
+      let myChart = echarts.init(chartDom);
+      let option;
+
+      option = {
+        title: {
+          text: "恩施卷烟厂员工性别分布饼图",
+          //   subtext: "",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            // name: "Access From",
+            type: "pie",
+            radius: "50%",
+            data: this.genderData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    showAgeBar() {
+      let chartDom = document.getElementById("pic2");
+      let myChart = echarts.init(chartDom);
+      let option;
+
+      option = {
+        title: {
+          text: "恩施卷烟厂员工年龄分布直方图",
+          left: "center",
+        },
+        xAxis: {
+          type: "category",
+          data: this.ageData.xAxis,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: this.ageData.yAxis,
+            type: "bar",
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    showNationPie() {
+      let chartDom = document.getElementById("pic3");
+      let myChart = echarts.init(chartDom);
+      let option;
+
+      option = {
+        title: {
+          text: "恩施卷烟厂员工民族分布饼图",
+          //   subtext: "",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            // name: "Access From",
+            type: "pie",
+            radius: "50%",
+            data: this.nationData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    showPoliticsPie() {
+      let chartDom = document.getElementById("pic4");
+      let myChart = echarts.init(chartDom);
+      let option;
+
+      option = {
+        title: {
+          text: "恩施卷烟厂员工民族分布饼图",
+          //   subtext: "",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            // name: "Access From",
+            type: "pie",
+            radius: "50%",
+            data: this.politicsData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    showPartyAgeBar() {
+      let chartDom = document.getElementById("pic5");
+      let myChart = echarts.init(chartDom);
+      let option;
+
+      option = {
+        title: {
+          text: "恩施卷烟厂员工党员年龄分布直方图",
+          left: "center",
+        },
+        xAxis: {
+          type: "category",
+          data: this.partyAgeData.xAxis,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: this.partyAgeData.yAxis,
+            type: "bar",
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    showWordCloud() {
+      const chart = echarts.init(document.getElementById("pic6"));
+
+      const originData = [
+        { name: "基因编辑", value: 1228 },
+        { name: "婴儿", value: 981 },
+        { name: "贺建奎", value: 363 },
+        { name: "首例", value: 361 },
+        { name: "免疫", value: 291 },
+        { name: "艾滋病", value: 289 },
+        { name: "伦理", value: 211 },
+        { name: "回应", value: 208 },
+        { name: "世界", value: 177 },
+        { name: "科学家", value: 135 },
+        { name: "深圳", value: 129 },
+        { name: "谴责", value: 107 },
+        { name: "南科大", value: 96 },
+        { name: "科技", value: 86 },
+        { name: "人类", value: 80 },
+        { name: "和美医院", value: 76 },
+        { name: "试验", value: 75 },
+        { name: "项目", value: 69 },
+        { name: "专家", value: 66 },
+        { name: "审查", value: 62 },
+        { name: "联合", value: 51 },
+        { name: "科创委", value: 49 },
+        { name: "资助", value: 44 },
+        { name: "委员会", value: 43 },
+        { name: "技术", value: 41 },
+        { name: "大学", value: 40 },
+        { name: "峰会", value: 38 },
+        { name: "实验", value: 38 },
+        { name: "医学", value: 36 },
+        { name: "背后", value: 36 },
+        { name: "监管", value: 34 },
+        { name: "医疗", value: 33 },
+        { name: "莆田", value: 31 },
+        { name: "临床", value: 31 },
+        { name: "团队", value: 30 },
+        { name: "疯狂", value: 29 },
+        { name: "科学", value: 29 },
+        { name: "国际", value: 29 },
+        { name: "创新", value: 28 },
+        { name: "停薪留职", value: 27 },
+        { name: "胚胎", value: 26 },
+        { name: "双胞胎", value: 25 },
+        { name: "科研", value: 22 },
+        { name: "科学界", value: 21 },
+        { name: "人体", value: 21 },
+        { name: "生物学", value: 20 },
+        { name: "涉嫌", value: 20 },
+        { name: "细胞", value: 19 },
+        { name: "经费", value: 19 },
+        { name: "卫计委", value: 18 },
+        { name: "属实", value: 18 },
+        { name: "签字", value: 18 },
+        { name: "官方", value: 18 },
+        { name: "学会", value: 18 },
+        { name: "疑问", value: 17 },
+        { name: "学术", value: 17 },
+        { name: "广东", value: 35 },
+        { name: "公开", value: 17 },
+        { name: "数据", value: 17 },
+        { name: "注册号", value: 16 },
+        { name: "深圳市", value: 16 },
+        { name: "探索", value: 16 },
+        { name: "香港", value: 16 },
+        { name: "历史", value: 16 },
+        { name: "组织", value: 16 },
+        { name: "疑点", value: 15 },
+        { name: "否认", value: 15 },
+        { name: "生物", value: 15 },
+        { name: "投资", value: 15 },
+        { name: "学校", value: 15 },
+        { name: "招募", value: 14 },
+        { name: "架构", value: 14 },
+        { name: "商人", value: 14 },
+        { name: "露露", value: 13 },
+        { name: "干细胞", value: 13 },
+        { name: "违背", value: 13 },
+        { name: "娜娜", value: 12 },
+        { name: "坚信", value: 13 },
+        { name: "真相", value: 13 },
+        { name: "签名", value: 13 },
+        { name: "美国", value: 13 },
+        { name: "合作", value: 13 },
+        { name: "环境", value: 13 },
+        { name: "股权", value: 12 },
+        { name: "助理", value: 12 },
+        { name: "志愿者", value: 12 },
+        { name: "不负责任", value: 12 },
+        { name: "旗下", value: 12 },
+        { name: "学者", value: 12 },
+        { name: "人生", value: 12 },
+        { name: "改写", value: 11 },
+        { name: "冒进", value: 11 },
+        { name: "抵抗", value: 11 },
+        { name: "副教授", value: 11 },
+        { name: "指责", value: 11 },
+        { name: "教授", value: 11 },
+        { name: "孩子", value: 11 },
+        { name: "瀚海基因", value: 10 },
+        { name: "伪造", value: 10 },
+        { name: "震惊", value: 10 },
+      ];
+
+      chart.setOption({
+        series: [
+          {
+            type: "wordCloud",
+            shape: "circle",
+            left: "center",
+            top: "center",
+            width: "70%",
+            height: "80%",
+            right: null,
+            bottom: null,
+            sizeRange: [12, 60],
+            rotationRange: [-90, 90],
+            rotationStep: 45,
+            gridSize: 8,
+            drawOutOfBound: false,
+            textStyle: {
+              fontFamily: "sans-serif",
+              fontWeight: "bold",
+              // Color can be a callback function or a color string
+              color: function () {
+                // Random color
+                return (
+                  "rgb(" +
+                  [
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                  ].join(",") +
+                  ")"
+                );
+              },
+            },
+            emphasis: {
+              focus: "self",
+              textStyle: {
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+            },
+
+            data: originData,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.pic {
+  height: 600px;
+  width: 600px;
+  border: 1px solid black;
+}
+</style>

src/views/person_review/person_review.vue

@@ -5,11 +5,13 @@
     <div id="pic3" class="pic"></div>
     <div id="pic4" class="pic"></div>
     <div id="pic5" class="pic"></div>
+    <div id="pic6" class="pic"></div>
   </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
+import "echarts-wordcloud";
 export default {
   name: "person_review",
   components: {},
@@ -75,6 +77,7 @@ export default {
     this.showNationPie();
     this.showPoliticsPie();
     this.showPartyAgeBar();
+    this.showWordCloud();
   },
   methods: {
     showGenderPie() {
@@ -242,6 +245,158 @@ export default {
 
       option && myChart.setOption(option);
     },
+    showWordCloud() {
+      const chart = echarts.init(document.getElementById("pic6"));
+
+      const originData = [
+        { name: "基因编辑", value: 1228 },
+        { name: "婴儿", value: 981 },
+        { name: "贺建奎", value: 363 },
+        { name: "首例", value: 361 },
+        { name: "免疫", value: 291 },
+        { name: "艾滋病", value: 289 },
+        { name: "伦理", value: 211 },
+        { name: "回应", value: 208 },
+        { name: "世界", value: 177 },
+        { name: "科学家", value: 135 },
+        { name: "深圳", value: 129 },
+        { name: "谴责", value: 107 },
+        { name: "南科大", value: 96 },
+        { name: "科技", value: 86 },
+        { name: "人类", value: 80 },
+        { name: "和美医院", value: 76 },
+        { name: "试验", value: 75 },
+        { name: "项目", value: 69 },
+        { name: "专家", value: 66 },
+        { name: "审查", value: 62 },
+        { name: "联合", value: 51 },
+        { name: "科创委", value: 49 },
+        { name: "资助", value: 44 },
+        { name: "委员会", value: 43 },
+        { name: "技术", value: 41 },
+        { name: "大学", value: 40 },
+        { name: "峰会", value: 38 },
+        { name: "实验", value: 38 },
+        { name: "医学", value: 36 },
+        { name: "背后", value: 36 },
+        { name: "监管", value: 34 },
+        { name: "医疗", value: 33 },
+        { name: "莆田", value: 31 },
+        { name: "临床", value: 31 },
+        { name: "团队", value: 30 },
+        { name: "疯狂", value: 29 },
+        { name: "科学", value: 29 },
+        { name: "国际", value: 29 },
+        { name: "创新", value: 28 },
+        { name: "停薪留职", value: 27 },
+        { name: "胚胎", value: 26 },
+        { name: "双胞胎", value: 25 },
+        { name: "科研", value: 22 },
+        { name: "科学界", value: 21 },
+        { name: "人体", value: 21 },
+        { name: "生物学", value: 20 },
+        { name: "涉嫌", value: 20 },
+        { name: "细胞", value: 19 },
+        { name: "经费", value: 19 },
+        { name: "卫计委", value: 18 },
+        { name: "属实", value: 18 },
+        { name: "签字", value: 18 },
+        { name: "官方", value: 18 },
+        { name: "学会", value: 18 },
+        { name: "疑问", value: 17 },
+        { name: "学术", value: 17 },
+        { name: "广东", value: 35 },
+        { name: "公开", value: 17 },
+        { name: "数据", value: 17 },
+        { name: "注册号", value: 16 },
+        { name: "深圳市", value: 16 },
+        { name: "探索", value: 16 },
+        { name: "香港", value: 16 },
+        { name: "历史", value: 16 },
+        { name: "组织", value: 16 },
+        { name: "疑点", value: 15 },
+        { name: "否认", value: 15 },
+        { name: "生物", value: 15 },
+        { name: "投资", value: 15 },
+        { name: "学校", value: 15 },
+        { name: "招募", value: 14 },
+        { name: "架构", value: 14 },
+        { name: "商人", value: 14 },
+        { name: "露露", value: 13 },
+        { name: "干细胞", value: 13 },
+        { name: "违背", value: 13 },
+        { name: "娜娜", value: 12 },
+        { name: "坚信", value: 13 },
+        { name: "真相", value: 13 },
+        { name: "签名", value: 13 },
+        { name: "美国", value: 13 },
+        { name: "合作", value: 13 },
+        { name: "环境", value: 13 },
+        { name: "股权", value: 12 },
+        { name: "助理", value: 12 },
+        { name: "志愿者", value: 12 },
+        { name: "不负责任", value: 12 },
+        { name: "旗下", value: 12 },
+        { name: "学者", value: 12 },
+        { name: "人生", value: 12 },
+        { name: "改写", value: 11 },
+        { name: "冒进", value: 11 },
+        { name: "抵抗", value: 11 },
+        { name: "副教授", value: 11 },
+        { name: "指责", value: 11 },
+        { name: "教授", value: 11 },
+        { name: "孩子", value: 11 },
+        { name: "瀚海基因", value: 10 },
+        { name: "伪造", value: 10 },
+        { name: "震惊", value: 10 },
+      ];
+
+      chart.setOption({
+        series: [
+          {
+            type: "wordCloud",
+            shape: "circle",
+            left: "center",
+            top: "center",
+            width: "70%",
+            height: "80%",
+            right: null,
+            bottom: null,
+            sizeRange: [12, 60],
+            rotationRange: [-90, 90],
+            rotationStep: 45,
+            gridSize: 8,
+            drawOutOfBound: false,
+            textStyle: {
+              fontFamily: "sans-serif",
+              fontWeight: "bold",
+              // Color can be a callback function or a color string
+              color: function () {
+                // Random color
+                return (
+                  "rgb(" +
+                  [
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                    Math.round(Math.random() * 160),
+                  ].join(",") +
+                  ")"
+                );
+              },
+            },
+            emphasis: {
+              focus: "self",
+              textStyle: {
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+            },
+
+            data: originData,
+          },
+        ],
+      });
+    },
   },
 };
 </script>
@@ -251,5 +406,6 @@ export default {
 .pic {
   height: 600px;
   width: 600px;
+  border: 1px solid black;
 }
 </style>

vue.config.js

@@ -38,7 +38,8 @@ module.exports = {
     },
     proxy: {
       '/': {
-        target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
+        // target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
+        target: 'http://127.0.0.1:8000',
         // target: 'http://192.168.31.102:8000',
         // target: 'http://222.20.95.239:8000',
         changeOrigin: true,