echarts-wordcloud词云插件

echarts-wordcloud 介绍

        echarts 是一款由百度开发的优秀的数据可视化库，而 echarts-wordcloud 则是在 echarts 的基础上扩展而来的，专门用于处理和展示文本数据中的关键词。

        词云图是一种以词语频率为基础的可视化方式，通过将词语按照频率大小排列并以不同的字体大小、颜色等方式展示，直观地呈现出文本数据中的关键信息。echarts-wordcloud 提供了丰富的配置选项，可以根据用户的需求进行个性化定制，如调整词语的字体大小、颜色、布局方式等，以及添加交互功能，使用户能够更好地探索和分析文本数据。

一、安装

npm install echarts
npm install echarts-wordcloud

二、使用

<template>
  <div class="chartBox">
    <div id="wordChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import "echarts-wordcloud";
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      var myChart = 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: 指定词条颜色, 可是颜色字符串，如 red、#ff0000设置所有词条为同一颜色，也可指定函数动态设置每个词条颜色
              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>

三、运行效果

四、更多配置

4.1 shape

4.1.1 示例

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

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

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

4.1.2 示例效果

4.2  maskImage 自定义背景图

  maskImage 参数用于设置词云图的背景图。通过指定一个图片的 url 地址，你可以使用自定义的背景图来呈现词云图。

4.2.1 示例

initEchart() {
  var myChart = echarts.init(document.getElementById("wordChart"));
  var maskImage = new Image();
  // 图片地址为base64
  maskImage.src = "data:image/png;base64,...";
  let option = {
    series: [
      {
        type: "wordCloud",
        shape: "circle",
        maskImage: maskImage,
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

4.2.2 示例效果

4.3 color 词条颜色定义

4.3.1 同一颜色

        指定词条颜色, 可是颜色字符串，如 red、#ff0000设置所有词条为同一颜色

textStyle: {
  color: "red",
},

4.3.2 随机颜色

textStyle: {
  normal: {
    color: function () {
      return (
         "rgb(" +
          Math.round(Math.random() * 255) +
          "," +
          Math.round(Math.random() * 255) +
          "," +
          Math.round(Math.random() * 255) +
          ")"
       );
    },
  },
  emphasis: {
    shadowBlur: 10,
    shadowColor: "#333",
  },
},

4.3.3 指定颜色序列

const color = ['#9eec13', '#91f152', '#d15dba', '#eec542', '#26f6b5', '#298d87', '#ea987b', '#74a5bf', '#c7e2e6', '#402e76', '#2269ac']

// ...

textStyle: {
  normal: {
   color: v => (
     `${color[v.dataIndex % 11]}`
   )
  },
  emphasis: {
    shadowBlur: 10,
    shadowColor: "#333",
  },
},