【前端】【Echarts】ECharts 词云图（WordCloud）教学详解
效果
ECharts 词云图（WordCloud）教学详解
词云图是一种通过关键词的大小、颜色等视觉差异来展示文本数据中词频或权重的图表。它直观、形象，是数据分析和内容展示中的利器。
本文将带你从零开始，学习如何用 ECharts 的 WordCloud 插件绘制词云图，涵盖基础配置、样式定制和多样化示例。
一、准备工作
使用词云图需要引入：
- ECharts 核心库：负责图表绘制基础
- echarts-wordcloud 插件：提供词云图功能
示例：
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2/dist/echarts-wordcloud.min.js"></script>
确保插件加载顺序正确，先加载 ECharts，再加载词云插件。
二、基本配置讲解
核心是 series 配置：
series: [{type: 'wordCloud', // 必填，指定词云图类型shape: 'circle', // 词云形状，常用有circle, rectangle等data: [ // 词频数据数组，每项包含name和value{ name: 'ECharts', value: 10000 },{ name: '词云', value: 8000 },// ...],textStyle: { // 文字样式配置fontFamily: 'sans-serif',color: () => `rgb(${[0,0,0].map(() => Math.round(Math.random()*160)).join(',')})`}
}]
type固定为'wordCloud'，告诉 ECharts 使用词云图渲染。shape控制词云轮廓形状，常用circle、rectangle，也可以是star、diamond等。data数组中的value决定对应词的字体大小，值越大字体越大。textStyle.color支持传入函数，随机颜色让词云更丰富多彩。
三、进阶样式
你可以通过以下配置让词云更具美感和表现力：
- 旋转角度范围
rotationRange: [-90, 90] // 词语旋转角度区间，支持负数
让词语随机旋转，增强动感。
- 字体和粗细
textStyle: {fontFamily: 'Courier New',fontWeight: 'bold',color: '#ff5722'
}
更换字体，调整文字粗细及颜色。
- 布局密度
gridSize: 10
控制词语间隔，值越小词云越紧密。
四、多样示例展示
示例 1：基础圆形词云，随机颜色
series: [{type: 'wordCloud',shape: 'circle',data: commonWords,textStyle: {color: () => `rgb(${[0,0,0].map(() => Math.round(Math.random()*160)).join(',')})`}
}]
示例 2：圆形 + 旋转角度 + 自定义字体
series: [{type: 'wordCloud',shape: 'circle',rotationRange: [-90, 90],textStyle: {fontFamily: 'Courier New',fontWeight: 'bold',color: '#ff5722'},data: commonWords
}]
示例 3：矩形布局 + 单色
series: [{type: 'wordCloud',shape: 'rectangle',gridSize: 10,textStyle: {fontFamily: 'Arial',color: '#2196f3'},data: commonWords
}]
五、实用建议
- 词云图适合展示关键词频率、热点分析、内容聚焦。
- 可以结合后端接口动态加载词频数据。
- 通过点击事件，支持交互式高亮或跳转。
六、总结
ECharts 的 WordCloud 插件简单易用，灵活多样，通过调整 series 里的一些关键参数，就能创造出丰富美观的词云图。掌握上述基础与进阶配置，能满足大多数词云可视化需求。
源码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>ECharts WordCloud 词云图示例</title><style>body {font-family: Arial, sans-serif;background-color: #f9f9f9;padding: 20px;}h2, p {text-align: center;}.section {max-width: 1200px;margin: 0 auto 40px;padding: 20px;background-color: #fff;border-radius: 10px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}.chart-container {display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;}.chart-box {width: 400px;height: 400px;}.desc {font-size: 14px;color: #555;margin-bottom: 10px;}</style>
</head>
<body><h2>🌈 ECharts WordCloud 词云图多样化示例</h2>
<p>以下展示多个词云图实例，涵盖不同样式与用途，帮助你灵活掌握词云图的配置技巧。</p><div class="section"><div class="desc"><strong>示例 1：基础词云</strong> - 使用圆形排布，颜色随机</div><div class="chart-container"><div class="chart-box" id="wordcloud1"></div></div>
</div><div class="section"><div class="desc"><strong>示例 2：自定义字体和旋转角度</strong> - 调整文字方向与字体风格</div><div class="chart-container"><div class="chart-box" id="wordcloud2"></div></div>
</div><div class="section"><div class="desc"><strong>示例 3：矩形布局 + 单色风格</strong> - 更加正式的展示效果</div><div class="chart-container"><div class="chart-box" id="wordcloud3"></div></div>
</div><!-- ECharts 核心库 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- WordCloud 插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2/dist/echarts-wordcloud.min.js"></script><script>const commonWords = [{ name: 'ECharts', value: 10000 },{ name: '词云', value: 8000 },{ name: '图表', value: 6000 },{ name: '可视化', value: 5000 },{ name: 'JavaScript', value: 4000 },{ name: '前端', value: 3000 },{ name: '数据', value: 2000 },{ name: '配置', value: 1800 },{ name: '颜色', value: 1500 },{ name: '插件', value: 1200 },];// 示例 1echarts.init(document.getElementById('wordcloud1')).setOption({series: [{type: 'wordCloud',shape: 'circle',textStyle: {fontFamily: 'sans-serif',color: () => `rgb(${[0,0,0].map(() => Math.round(Math.random()*160)).join(',')})`},data: commonWords}]});// 示例 2echarts.init(document.getElementById('wordcloud2')).setOption({series: [{type: 'wordCloud',shape: 'circle',rotationRange: [-90, 90],textStyle: {fontFamily: 'Courier New',fontWeight: 'bold',color: '#ff5722'},data: commonWords}]});// 示例 3echarts.init(document.getElementById('wordcloud3')).setOption({series: [{type: 'wordCloud',shape: 'rectangle',gridSize: 10,textStyle: {fontFamily: 'Arial',color: '#2196f3'},data: commonWords}]});
</script></body>
</html>