词云

package.json

@@ -10,11 +10,13 @@
     "serve": "vite --host 0.0.0.0"
   },
   "dependencies": {
-    "@antv/g6": "^5.0.21",
     "@antv/g2": "^5.2.2",
+    "@antv/g6": "^5.0.21",
     "@types/node": "^20.14.12",
     "axios": "^1.7.2",
     "default-passive-events": "^2.0.0",
+    "echarts": "^5.5.1",
+    "echarts-wordcloud": "^2.1.0",
     "element-plus": "^2.3.7",
     "fast-glob": "^3.3.2",
     "pinia": "^2.1.7",

src/views/manage/home/cloud-echarts.vue

@@ -0,0 +1,51 @@
+<template>
+  <div id="cloudId" style="width: 100%;height: 100%;" v-loading="state.loading">
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive, watch} from "vue";
+import * as echarts from 'echarts';
+import 'echarts-wordcloud';
+
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+  data: {}
+})
+const state: any = reactive({
+  chartChangeData: null,
+  loading: false
+})
+const initChart = () => {
+  const data = props.data.map(v => {
+    v.value = v.count
+    // v.name = v.name
+    return v
+  })
+  if (state.chartChangeData) {
+    state.chartChangeData(data)
+    state.loading = false
+  } else {
+    const chart = echarts.init(document.getElementById('cloudId'));
+    chart.setOption({
+      legend: {
+        data: ['啊啊', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+      },
+      series: {
+        type: 'wordCloud',
+        data: data
+      }
+    })
+    state.loading = false
+  }
+}
+watch(() => props.data, () => {
+  state.loading = true
+  setTimeout(() => {
+    initChart()
+  }, 100)
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/manage/home/cloud-g2.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="cloudId" style="width: 100%;height: 100%;" v-loading="state.loading">
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive, watch} from "vue";
+import {Chart} from "@antv/g2";
+
+const {proxy} = getCurrentInstance()
+const props = defineProps({
+  data: {}
+})
+const state: any = reactive({
+  chartChangeData: null,
+  loading: false
+})
+const initChart = () => {
+  const data = props.data.map(v => {
+    console.log(v.name)
+    v.value = v.count
+    v.text = v.name
+    return v
+  })
+  if (state.chartChangeData) {
+    state.chartChangeData(data)
+    state.loading = false
+  } else {
+    const chart = new Chart({
+      container: 'cloudId',
+      autoFit: true,
+    })
+    chart.wordCloud()
+    .data(data)
+    .layout({
+      spiral: 'rectangular',
+      fontSize: [10, 40],
+    })
+    .encode('color', 'text')
+    .tooltip({
+      items: [
+        {name: '数量', field: 'count'},
+        {name: '文字长度', field: 'length'},
+      ]
+    })
+    .legend({
+      color: {
+        position: 'bottom',
+        layout: {
+          justifyContent: 'center',
+        },
+      }
+    })
+    chart.render();
+    state.chartChangeData = (data) => chart.changeData(data)
+    state.loading = false
+  }
+}
+watch(() => props.data, () => {
+  state.loading = true
+  setTimeout(() => {
+    initChart()
+  }, 100)
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/manage/home/index.vue

@@ -21,7 +21,8 @@
     </div>
     <div class="__cus-manage_content-main">
       <div class="cloud">
-        <div id="cloudId"/>
+        <cloudG2 :data="state.query.result.data"/>
+<!--        <cloudEcharts :data="state.query.result.data"/>-->
       </div>
       <div class="page">
         <CusPage
@@ -38,8 +39,9 @@
 
 <script setup lang="ts">
 import {getCurrentInstance, onMounted, reactive, ref} from "vue";
-import { Chart } from '@antv/g2';
 import {useDictionaryStore} from "@/stores";
+import cloudG2 from './cloud-g2.vue'
+import cloudEcharts from './cloud-echarts.vue'
 
 const DictionaryStore = useDictionaryStore()
 const {proxy} = getCurrentInstance()
@@ -102,21 +104,27 @@ const onPage = (pageNum, pageSize) => {
   setTimeout(() => {
     state.query.result.total = 100
     const arr = []
-    for (let i = 0; i < state.query.page.pageSize; i++) {
+    for (let i = 0; i < 50; i++) {
       const str = []
-      for (let k = 0; k < proxy.$util.randomNum(1, 20); k++) {
+      for (let k = 0; k < i + 1; k++) {
         str.push('啊')
       }
       arr.push({
         id: i,
         name: str.join(''),
-        count: proxy.$util.randomNum(1, 1000),
+        count: proxy.$util.randomNum(1, 100),
         startTime: '2020-04-06 12:34:22',
         endTime: '2023-11-26 03:29:14',
+        username: '张三',
+        length: str.length
       })
     }
+    // arr.push({
+    //   id: 1,
+    //   name: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
+    //   count: 10
+    // })
     state.query.result.data = arr
-    initChart()
     state.query.loading = false
   }, 1000)
   // sysIndexFindIndexByPage(proxy.$util.formatGetParam(params)).then(res => {
@@ -125,37 +133,6 @@ const onPage = (pageNum, pageSize) => {
   //   state.query.loading = false
   // })
 }
-const initChart = () => {
-  const data = state.query.result.data.map(v => {
-    v.value = v.count
-    v.text = v.name
-    return v
-  })
-  if (state.chartChangeData) {
-    state.chartChangeData(data)
-  } else {
-    const chart = new Chart({
-      container: 'cloudId',
-      autoFit: true,
-    })
-    chart.wordCloud()
-    .data(data)
-    .layout({
-      spiral: 'rectangular',
-      fontSize: [20, 100],
-    })
-    .encode('color', 'text')
-    .tooltip({
-      items: [
-        {name: '数量', field: 'count'},
-        {name: '首次查询日期', field: 'startTime'},
-        {name: '最近查询日期', field: 'endTime'},
-      ]
-    })
-    chart.render();
-    state.chartChangeData = (data) => chart.changeData(data)
-  }
-}
 onMounted(() => {
   initDictionary()
 })

yarn.lock

@@ -1600,6 +1600,19 @@ dotignore@~0.1.2:
   dependencies:
     minimatch "^3.0.4"
 
+echarts-wordcloud@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-2.1.0.tgz#c3de6fe267044f6c3343e4ff0e05eedb01c05096"
+  integrity sha512-Kt1JmbcROgb+3IMI48KZECK2AP5lG6bSsOEs+AsuwaWJxQom31RTNd6NFYI01E/YaI1PFZeueaupjlmzSQasjQ==
+
+echarts@^5.5.1:
+  version "5.5.1"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz#8dc9c68d0c548934bedcb5f633db07ed1dd2101c"
+  integrity sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.6.0"
+
 element-plus@^2.3.7:
   version "2.8.0"
   resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.0.tgz#122685f9f1e01784f511dd4858fe005677ad1b95"
@@ -3513,6 +3526,11 @@ traverse@^0.6.6:
     typedarray.prototype.slice "^1.0.3"
     which-typed-array "^1.1.15"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^2.0.3, tslib@^2.3.1, tslib@^2.5.0, tslib@^2.5.3:
   version "2.7.0"
   resolved "https://registry.npmmirror.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
@@ -3825,3 +3843,10 @@ yargs@~3.10.0:
     cliui "^2.1.0"
     decamelize "^1.0.0"
     window-size "0.1.0"
+
+zrender@5.6.0:
+  version "5.6.0"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz#01325b0bb38332dd5e87a8dbee7336cafc0f4a5b"
+  integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==
+  dependencies:
+    tslib "2.3.0"