本文介绍了使用ECharts的WordCloud插件创建词云图的详细教程。文章从准备工作开始，讲解了如何引入ECharts核心库和词云插件。在基本配置部分，重点说明了series配置中的type、shape、data和textStyle等重要参数。进阶样式部分分享了旋转角度、字体样式和布局密度的定制技巧。文章还提供了三个实用示例：基础圆形词云、自定义旋转角度和字体样式、以及矩形单 - 指南

效果

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
              },
              ];
              // 示例 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>

posted @ 2025-07-26 09:43 yjbjingcha 阅读(6) 评论(0) 收藏举报

刷新页面返回顶部

效果