From 6dbf6466668e6ff059613d8f41246d8c7e8e3c13 Mon Sep 17 00:00:00 2001 From: jzy <928294064@qq.com> Date: Thu, 9 Oct 2025 11:17:36 +0800 Subject: [PATCH] yangshi --- gyxtp/src/view/small.vue | 96 ++++++++++++++++++++++++------------------------ 1 file changed, 49 insertions(+), 47 deletions(-) diff --git a/gyxtp/src/view/small.vue b/gyxtp/src/view/small.vue index dbea468..18c560c 100644 --- a/gyxtp/src/view/small.vue +++ b/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%)`