echarts-wordcloud:打造个性化词云库

前言

在当今信息爆炸的时代,如何从海量的文本数据中提取有用的信息成为了一项重要的任务。词云作为一种直观、易于理解的数据可视化方式,被广泛应用于文本分析和可视化领域。本文将介绍一种基于 echarts-wordcloud 实现的词云库,通过其丰富的功能和灵活的定制性,帮助用户更好地探索和展示文本数据中的关键信息。


echarts-wordcloud 介绍

echarts-wordcloud 是一种基于 echarts 库实现的词云插件,用于生成和展示词云图。echarts 是一款由百度开发的优秀的数据可视化库,而 echarts-wordcloud 则是在 echarts 的基础上扩展而来的,专门用于处理和展示文本数据中的关键词。词云图是一种以词语频率为基础的可视化方式,通过将词语按照频率大小排列并以不同的字体大小、颜色等方式展示,直观地呈现出文本数据中的关键信息。echarts-wordcloud 提供了丰富的配置选项,可以根据用户的需求进行个性化定制,如调整词语的字体大小、颜色、布局方式等,以及添加交互功能,使用户能够更好地探索和分析文本数据。

一、安装

一共需要安装两个包,一个 echarts 基础包,另一个是 echarts-wordcloud

js 复制代码
npm install echarts
npm install echarts-wordcloud

二、基础使用

  • 创建一个容器:在 html 中,创建一个 <div> 元素作为词云图的容器。给该元素指定一个唯一的 id,以便后续操作;
  • 准备数据:准备一个包含词语和对应频率的数据集。你可以使用 javaScript 对象或从后端获取的数据,确保数据格式正确;
  • 初始化 echarts 实例:在 javaScript 代码中,使用 echarts.init() 方法初始化一个 echarts 实例,并将其绑定到词云图容器的 id 上;
  • 配置词云图选项:通过配置 echartsoption 对象,设置词云图的样式、布局和数据。在 option 对象中,使用 series 属性来定义词云图的系列类型为 wordCloud,并设置相关的配置选项,如 shape(词云形状)、sizeRange(词语字体大小范围)、rotationRange(词语旋转角度范围)等。
  • 绑定数据:将准备好的词语和频率数据绑定到词云图的 series 属性中;
  • 渲染词云图:调用 echarts 实例的 setOption() 方法,将配置好的 option 对象传入,以渲染词云图;
  • 显示词云图:在页面中显示生成的词云图,你可以将词云图容器的样式进行调整,以适应你的需求。

完整代码

html 复制代码
<template>
  <div class="chartBox">
    <div id="wordChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
<script>
import "echarts-wordcloud";
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      var myChart = this.$echarts.init(document.getElementById("wordChart"));
      let option = {
        series: [
          {
            type: "wordCloud", //类型是词云图
            shape: "circle", //词云图的形状为圆形
            keepAspect: false, //不保持词云图的纵横比
            //词云图的位置和大小
            left: "center",
            top: "center",
            width: "100%",
            height: "100%",
            right: null,
            bottom: null,
            sizeRange: [12, 50], //词云图中词语的字体大小范围,最小12px,最大60px
            rotationRange: [-90, 90], //词云图中词语的旋转角度范围
            rotationStep: 45, //词云图中词语的旋转步长
            gridSize: 10, //词云图中词语的间距
            drawOutOfBound: false, //不绘制超出词云图范围的词语
            layoutAnimation: true, //开启布局动画
            //词云图中词语的样式
            textStyle: {
              fontWeight: "bold",
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            // 词云图中词语的高亮样式
            emphasis: {
              textStyle: {
                textShadowBlur: 2,
                textShadowColor: "orange",
              },
            },
            // 词云图中的数据,必须有name和value属性
            data: [
              { name: "无人驾驶", value: 352 },
              { name: "区块链", value: 214 },
              { name: "云计算", value: 534 },
              { name: "物联网", value: 134 },
              { name: "虚拟现实", value: 534 },
              { name: "增强现实", value: 542 },
              { name: "人工智能", value: 242 },
              { name: "机器学习", value: 42 },
              { name: "深度学习", value: 435 },
              { name: "自然语言处理", value: 124 },
              { name: "计算机视觉", value: 654 },
              { name: "神经网络", value: 232 },
              { name: "数据挖掘", value: 324 },
              { name: "语音识别", value: 453 },
              { name: "图像识别", value: 124 },
              { name: "聊天机器人", value: 453 },
              { name: "智能家居", value: 233 },
              { name: "人脸识别", value: 123 },
              { name: "量子计算", value: 212 },
              { name: "智能制造", value: 241 },
              { name: "语义分割", value: 414 },
              { name: "知识图谱", value: 564 },
              { name: "增量学习", value: 755 },
              { name: "多模态学习", value: 229 },
              { name: "迁移学习", value: 233 },
              { name: "生成对抗网络", value: 124 },
              { name: "强化学习", value: 65 },
              { name: "人机交互", value: 199 },
              { name: "机器人技术", value: 299 },
              { name: "智能音箱", value: 454 },
              { name: "智能医疗", value: 365 },
              { name: "异常检测", value: 360 },
              { name: "时间序列预测", value: 187 },
              { name: "推荐系统", value: 360 },
              { name: "情感分析", value: 460 },
              { name: "机器翻译", value: 480 },
              { name: "语音合成", value: 488 },
              { name: "人脸生成", value: 51 },
              { name: "图像风格转换", value: 99 },
              { name: "实例分割", value: 120 },
              { name: "目标检测", value: 150 },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
.chartBox {
  width: 50%;
  height: 50vh;
}
</style>

实现效果


三、进阶使用

3.1 shape

特殊情况下,shape 属性也可以是一个函数,用于自定义词云图的形状。当我们需要创建一个非常特殊的形状时,可以使用这个函数来实现。

实例代码

js 复制代码
shape: function shapeSquare(theta) {
  return Math.min(
    1 / Math.abs(Math.cos(theta)),
    1 / Math.abs(Math.sin(theta))
  );
},

在上面的示例代码中,shape 参数被定义为一个函数,函数名为 shapeSquare。这个函数接受一个参数 theta,表示角度。在函数内部,我们使用三角函数(余弦和正弦)来计算正方形的形状。具体来说,我们计算了余弦和正弦的绝对值的倒数,并使用 Math.min 方法来取其中较小的值。这样做的目的是确保正方形的边长不会超过 1。通过这个函数,我们可以根据给定的角度 theta 来计算正方形的形状。当 theta 的值接近 0180 度时,余弦的绝对值会接近 1,而正弦的绝对值会接近 0,因此正方形的形状会更接近于宽度大于高度的长方形。当 theta 的值接近 90270 度时,余弦的绝对值会接近 0,而正弦的绝对值会接近 1,因此正方形的形状会更接近于高度大于宽度的长方形。

实现效果


3.2 color

echarts-wordcloud 中,color 是用于配置词云图中词语的颜色的参数。它可以接受不同的取值,包括字符串和函数。

  • 字符串:你可以直接指定一个颜色字符串,如 red#ff0000 等,来设置所有词语的颜色为同一个固定值;
  • 函数:你可以定义一个函数来动态地设置每个词语的颜色。

字符串

js 复制代码
textStyle: {
  color: "red",
},

实现效果


函数

js 复制代码
color: function () {
  return (
    "rgb(" +
    [
      Math.round(Math.random() * 255),
      Math.round(Math.random() * 255),
      Math.round(Math.random() * 255),
    ].join(",") +
    ")"
  );
},

实现效果


3.2 自定义背景图

echarts-wordcloud 中,maskImage 参数用于设置词云图的背景图。通过指定一个图片的 url 地址,你可以使用自定义的背景图来呈现词云图。以下是一个示例代码,展示如何使用 maskImage 参数来设置词云图的背景图:

js 复制代码
initEchart() {
  var myChart = this.$echarts.init(document.getElementById("wordChart"));
  var maskImage = new Image();
  maskImage.src = "data:image/png;base64,";
  let option = {
    series: [
      {
        type: "wordCloud",
        shape: "circle",
        maskImage: maskImage,
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
},

核心代码

实现效果

相关推荐

玩转数据可视化,从入门到精通 Echarts

相关推荐
zhougl9961 小时前
html处理Base文件流
linux·前端·html
花花鱼1 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript