新增加云词组件

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",

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>

src/views/index_v1.vue

@@ -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(() => {