【前端】【Echarts】ECharts 词云图（WordCloud）教学详解_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><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><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 }, ]; // 示例 1 echarts.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 }] }); // 示例 2 echarts.init(document.getElementById(\'wordcloud2\')).setOption({ series: [{ type: \'wordCloud\', shape: \'circle\', rotationRange: [-90, 90], textStyle: { fontFamily: \'Courier New\', fontWeight: \'bold\', color: \'#ff5722\' }, data: commonWords }] }); // 示例 3 echarts.init(document.getElementById(\'wordcloud3\')).setOption({ series: [{ type: \'wordCloud\', shape: \'rectangle\', gridSize: 10, textStyle: { fontFamily: \'Arial\', color: \'#2196f3\' }, data: commonWords }] });</script></body></html>
