当前位置：首页 > news >正文

【前端】【Echarts】ECharts 词云图（WordCloud）教学详解

news 2025/7/11 8:18:10

效果

在这里插入图片描述

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>