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

效果

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>