效果


ECharts 词云图(WordCloud)教学详解
词云图是一种通过关键词的大小、颜色等视觉差异来展示文本数据中词频或权重的图表。它直观、形象,是数据分析和内容展示中的利器。
本文将带你从零开始,学习如何用 ECharts 的 WordCloud 插件绘制词云图,涵盖基础配置、样式定制和多样化示例。
一、准备工作
使用词云图需要引入:
- ECharts 核心库:负责图表绘制基础
- echarts-wordcloud 插件:提供词云图功能
示例:
html
<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
配置:
js
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
支持传入函数,随机颜色让词云更丰富多彩。
三、进阶样式
你可以通过以下配置让词云更具美感和表现力:
- 旋转角度范围
js
rotationRange: [-90, 90] // 词语旋转角度区间,支持负数
让词语随机旋转,增强动感。
- 字体和粗细
js
textStyle: {
fontFamily: 'Courier New',
fontWeight: 'bold',
color: '#ff5722'
}
更换字体,调整文字粗细及颜色。
- 布局密度
js
gridSize: 10
控制词语间隔,值越小词云越紧密。
四、多样示例展示
示例 1:基础圆形词云,随机颜色
js
series: [{
type: 'wordCloud',
shape: 'circle',
data: commonWords,
textStyle: {
color: () => `rgb(${[0,0,0].map(() => Math.round(Math.random()*160)).join(',')})`
}
}]
示例 2:圆形 + 旋转角度 + 自定义字体
js
series: [{
type: 'wordCloud',
shape: 'circle',
rotationRange: [-90, 90],
textStyle: {
fontFamily: 'Courier New',
fontWeight: 'bold',
color: '#ff5722'
},
data: commonWords
}]
示例 3:矩形布局 + 单色
js
series: [{
type: 'wordCloud',
shape: 'rectangle',
gridSize: 10,
textStyle: {
fontFamily: 'Arial',
color: '#2196f3'
},
data: commonWords
}]
五、实用建议
- 词云图适合展示关键词频率、热点分析、内容聚焦。
- 可以结合后端接口动态加载词频数据。
- 通过点击事件,支持交互式高亮或跳转。
六、总结
ECharts 的 WordCloud 插件简单易用,灵活多样,通过调整 series
里的一些关键参数,就能创造出丰富美观的词云图。掌握上述基础与进阶配置,能满足大多数词云可视化需求。
源码
html
<!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 },
];
// 示例 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>