【前端】【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 控制词云轮廓形状,常用 circlerectangle,也可以是 stardiamond 等。
  • 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>
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js