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

【前端】【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 控制词云轮廓形状,常用 circlerectangle,也可以是 stardiamond 等。
  • 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>
http://www.dtcms.com/a/272588.html

相关文章:

  • Prompt提示词的主要类型和核心原则
  • 在vscode中和obsidian中使用Mermaid
  • Spring AI Alibaba(2)——通过Graph实现工作流
  • Flutter 与 Android 的互通几种方式
  • Linux 中 sed 命令
  • RedisJSON 路径语法深度解析与实战
  • Spring Boot + Javacv-platform:解锁音视频处理的多元场景
  • 【TCP/IP】12. 文件传输协议
  • MySQL索引操作全指南:创建、查看、优化
  • Debian-10编译安装Mysql-5.7.44 笔记250706
  • macOS 上安装 Miniconda + Conda-Forge
  • Jekyll + Chirpy + GitHub Pages 搭建博客
  • 如何使用Java WebSocket API实现客户端和服务器端的通信?
  • 蓝桥杯第十六届(2025)真题深度解析:思路复盘与代码实战
  • MinerU将PDF转成md文件,并分拣图片
  • Alibaba Druid主要配置
  • 图片合并pdf
  • 新手向:实现ATM模拟系统
  • TDengine 数据库建模最佳实践
  • Oracle 视图
  • Tomcat:Java Web应用的幕后英雄
  • 线性探针是什么:是一种用于探测神经网络中特定特征的工具
  • 从零开始搭建深度学习大厦系列-3.卷积神经网络基础(5-9)
  • 李宏毅(深度学习)--(2)
  • 数据库复合索引设计:为什么等值查询列应该放在范围查询列前面?
  • 区间动态规划详解
  • 【JMeter】跨线程组传递参数
  • 在Docker中运行macOS的超方便体验!
  • SpringAI×Ollama:Java生态无缝集成本地大模型实践指南
  • Redis数据库基础概述