yangshi

gyxtp/src/view/small.vue

@@ -384,57 +384,59 @@ export default {
   },
   methods: {
   initChart() {
-    // 如果已存在实例，先销毁
-    if (this.chart) {
-      this.chart.dispose()
-    }
+    getKeywordsByKeyword(this.getpoinName).then(res=>{
+      this.words = res
 
-    // 初始化 ECharts 实例
-    this.chart = echarts.init(this.$refs.chart)
 
-    const option = {
-      tooltip: { show: true },
-      series: [
-        {
-          type: 'wordCloud',
-          shape: 'diamond', // 心形，可换为 'circle' 或 'diamond'
-          sizeRange: [12, 40], // 字体大小范围：最小12px，最大60px
-          rotationRange: [0, 45], // 旋转角度
-          gridSize: 8, // 网格间距，越小越密
-          drawOutOfBound: false, // 不允许超出边界
-          layoutAnimation: true, // 动画效果
-          left: 'center',
-          top: 'center',
-          width: '100%',
-          height: '100%',
-          data: this.words.map(item => ({
-            name: item.name,
-            value: item.value,
-            textStyle: { color: this.randomColor() }
-          })),
-          emphasis: {
-            focus: 'self',
-            textStyle: { textShadowBlur: 10, textShadowColor: '#333' }
-          },
-          // ✅ 关键：确保所有词都被绘制
-          minSize: 10, // 最小字号
-          maxSize: 60, // 最大字号
-          // ✅ 强制所有数据项都参与布局
-          wordGap: 1, // 单词之间的间隙
-          wordSizeRange: [10, 60], // 明确设置字大小范围
-          // ✅ 重要：避免词被裁剪或隐藏
-          rotateStep: 45, // 每次旋转步长
-          // ✅ 设置背景透明，便于观察
-          backgroundColor: 'transparent'
-        }
-      ],
-      backgroundColor: 'rgba(255, 255, 255, 0.21)'
-    }
+      // 如果已存在实例，先销毁
+      if (this.chart) {
+        this.chart.dispose()
+      }
 
-    getKeywordsByKeyword(this.getpoinName).then(res=>{
-      this.words = res
+      // 初始化 ECharts 实例
+      this.chart = echarts.init(this.$refs.chart)
+
+      const option = {
+        tooltip: { show: true },
+        series: [
+          {
+            type: 'wordCloud',
+            shape: 'diamond', // 心形，可换为 'circle' 或 'diamond'
+            sizeRange: [12, 40], // 字体大小范围：最小12px，最大60px
+            rotationRange: [0, 45], // 旋转角度
+            gridSize: 8, // 网格间距，越小越密
+            drawOutOfBound: false, // 不允许超出边界
+            layoutAnimation: true, // 动画效果
+            left: 'center',
+            top: 'center',
+            width: '100%',
+            height: '100%',
+            data: this.words.map(item => ({
+              name: item.name,
+              value: item.value,
+              textStyle: { color: this.randomColor() }
+            })),
+            emphasis: {
+              focus: 'self',
+              textStyle: { textShadowBlur: 10, textShadowColor: '#333' }
+            },
+            // ✅ 关键：确保所有词都被绘制
+            minSize: 10, // 最小字号
+            maxSize: 60, // 最大字号
+            // ✅ 强制所有数据项都参与布局
+            wordGap: 1, // 单词之间的间隙
+            wordSizeRange: [10, 60], // 明确设置字大小范围
+            // ✅ 重要：避免词被裁剪或隐藏
+            rotateStep: 45, // 每次旋转步长
+            // ✅ 设置背景透明，便于观察
+            backgroundColor: 'transparent'
+          }
+        ],
+        backgroundColor: 'rgba(255, 255, 255, 0.21)'
+      }
+      this.chart.setOption(option)
     })
-    this.chart.setOption(option)
+
   },
   randomColor() {
     return `hsl(${Math.random() * 360}, 70%, 50%)`