From c0140b24ba7a52b8cef82f0b4958a061c856b7df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Wed, 25 May 2022 18:39:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8A=A0=E4=BA=91=E8=AF=8D?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |  1 +
 src/views/dashboard/WordCloud.vue | 96 +++++++++++++++++++++++++++++++
 src/views/index_v1.vue            | 68 +++++++++++++++++++---
 3 files changed, 158 insertions(+), 7 deletions(-)
 create mode 100644 src/views/dashboard/WordCloud.vue

diff --git a/package.json b/package.json
index 445b492..65f09e6 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "clipboard": "^2.0.10",
     "countup.js": "^2.1.0",
     "echarts": "5.2.2",
+    "echarts-wordcloud": "^2.0.0",
     "element-plus": "^2.2.0",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.6",
diff --git a/src/views/dashboard/WordCloud.vue b/src/views/dashboard/WordCloud.vue
new file mode 100644
index 0000000..07c84c7
--- /dev/null
+++ b/src/views/dashboard/WordCloud.vue
@@ -0,0 +1,96 @@
+<template>
+  <div ref="chartRef" :class="className" :style="{ height: props.height, width: props.width }" />
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+
+import { useDebounceFn } from '@vueuse/core'
+import 'echarts-wordcloud'
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+  min: {
+    type: [Object, Number],
+    default: 0,
+  },
+  max: {
+    type: [Object, Number],
+    default: 0,
+  },
+  data: {
+    type: Array,
+    default: () => [{}],
+  },
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+})
+let chart = null
+const chartRef = ref()
+
+//重绘图表函数
+const resizeHandler = () => {
+  chart.resize()
+}
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
+
+  chart.setOption({
+    tooltip: {
+      formatter: '{a} <br/>{b} : {c}',
+    },
+    series: [
+      {
+        type: 'wordCloud',
+        // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
+        shape: 'circle',
+        gridSize: 1,
+        sizeRange: [12, 55],
+        rotationRange: [-45, 0, 45, 90],
+        textStyle: {
+          normal: {
+            color: function () {
+              return (
+                'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')'
+              )
+            },
+          },
+        },
+        left: 'center',
+        top: 'center',
+        right: null,
+        bottom: null,
+        data: props.data,
+      },
+    ],
+  })
+}
+const debouncedFn = useDebounceFn(() => {
+  // do something
+  resizeHandler()
+}, 500)
+
+document.addEventListener('resize', debouncedFn)
+
+onMounted(() => {
+  initChart()
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', debouncedFn)
+})
+</script>
diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue
index 16ecc14..8a86b87 100644
--- a/src/views/index_v1.vue
+++ b/src/views/index_v1.vue
@@ -5,7 +5,7 @@
       <el-col :md="24" :lg="16" :xl="16" class="mb10">
         <el-card shadow="hover">
           <template #header>
-            <span>{{$t('layout.myWorkbench')}}</span>
+            <span>{{ $t('layout.myWorkbench') }}</span>
           </template>
           <div class="user-item">
             <div class="user-item-left">
@@ -20,7 +20,7 @@
                 <el-col :xs="24" :sm="24" :md="24">
                   <el-row>
                     <el-col :xs="24" :lg="8" class="right-l-v">
-                      <div class="right-label">{{$t('common.nickName')}}：</div>
+                      <div class="right-label">{{ $t('common.nickName') }}：</div>
                       <div class="right-value">{{ userInfo.nickName }}</div>
                     </el-col>
                     <el-col :xs="24" :lg="16" class="right-l-v">
@@ -42,7 +42,7 @@
                       </div>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="16" class="right-l-v">
-                      <div class="right-label one-text-overflow">{{$t('common.time')}}：</div>
+                      <div class="right-label one-text-overflow">{{ $t('common.time') }}：</div>
                       <div class="right-value one-text-overflow">
                         {{ currentTime }}
                       </div>
@@ -51,7 +51,7 @@
                 </el-col>
                 <el-col :lg="24" class="mt10">
                   <el-button size="small" icon="edit">
-                    <router-link to="/user/profile">{{$t('layout.modifyInformation')}}</router-link>
+                    <router-link to="/user/profile">{{ $t('layout.modifyInformation') }}</router-link>
                   </el-button>
                   <!-- <el-button size="small" icon="el-icon-position" type="primary">发布活动</el-button> -->
                 </el-col>
@@ -64,8 +64,8 @@
         <el-card shadow="hover">
           <template #header>
             <div>
-              <span>{{$t('layout.onlineUsers')}}</span>
-              <el-button class="home-card-more" text @click="onOpenGitee">{{$t('btn.more')}}</el-button>
+              <span>{{ $t('layout.onlineUsers') }}</span>
+              <el-button class="home-card-more" text @click="onOpenGitee">{{ $t('btn.more') }}</el-button>
             </div>
           </template>
           <div class="info">
@@ -75,7 +75,7 @@
                 <ul class="info-ul">
                   <li v-for="(v, k) in onlineUsers" :key="k" class="info-item">
                     <div class="info-item-left" v-text="v.name"></div>
-										<div>{{v.userIP}}</div>
+                    <div>{{ v.userIP }}</div>
                     <div class="info-item-right" v-text="dayjs(v.loginTime).format('HH:mm:ss')"></div>
                   </li>
                 </ul></div
@@ -112,6 +112,13 @@
         </div>
       </el-col>
     </el-row>
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="24">
+        <div class="chart-wrapper">
+          <WordCloudChat :data="data.wordCloud" />
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
@@ -121,6 +128,7 @@ import LineChart from './dashboard/LineChart'
 import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
+import WordCloudChat from './dashboard/WordCloud.vue'
 // import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 
 import dayjs from 'dayjs'
@@ -142,6 +150,52 @@ const data = {
     expectedData: [130, 140, 141, 142, 145, 150, 160],
     actualData: [120, 82, 91, 154, 162, 140, 130],
   },
+  wordCloud: [
+    {
+      name: 'Vue3',
+      value: 1446,
+    },
+    {
+      name: '.net6',
+      value: 928,
+    },
+    {
+      name: 'Sqlsugar',
+      value: 906,
+    },
+    {
+      name: 'Redis',
+      value: 825,
+    },
+    {
+      name: 'Lover Boy',
+      value: 514,
+    },
+    {
+      name: '开源免费',
+      value: 486,
+    },
+    {
+      name: '音乐',
+      value: 53,
+    },
+    {
+      name: '打赏',
+      value: 163,
+    },
+    {
+      name: '国际化',
+      value: 163,
+    },
+    {
+      name: 'Composition api',
+      value: 1163,
+    },
+    {
+      name: 'Quartz.Net',
+      value: 1,
+    },
+  ],
 }
 const { proxy } = getCurrentInstance()
 const userInfo = computed(() => {