【echarts】02、echarts-wordcloud实现字符云、词云的效果

本文链接：https://blog.csdn.net/weixin_44402694/article/details/121675698

前言

需求：因为公司实现项目的过程中存在一个生成字符云效果的需求，所以查找了一下当前使用echarts实现字符云、词云效果的方式并作记录归档。
版本：当前环境下实现字符云效果存在两个版本环境：
- 1、echarts4.x + echarts-wordcloud1.x版本环境下的实现方式
- 2、echarts5.x + echarts-wordcloud2.x版本环境下的实现方式

开始

一、echarts4.x + echarts-wordcloud1.x

1、实现效果
2、前置资源获取
- http://winserver.geointech.cn:8040/echarts/echarts-4.3.1.min.js
- http://winserver.geointech.cn:8040/echarts/echarts-wordcloud-1.1.3.min.js
3、实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字符云、词云4</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #chart {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="http://winserver.geointech.cn:8040/echarts/echarts-4.3.1.min.js"></script>
    <script src="http://winserver.geointech.cn:8040/echarts/echarts-wordcloud-1.1.3.min.js"></script>
    <script>
      const data = [
        {
          name: '中国',
          value: 10000,
        },
        {
          name: '泰国',
          value: 600,
          textStyle: {
            normal: {
              color: randomColor(),
            },
          },
        },
        {
          name: '新加坡',
          value: 500,
          textStyle: {
            normal: {
              color: randomColor(),
            },
          },
        },
        {
          name: '印度尼西亚',
          value: 400,
          textStyle: {
            normal: {
              color: randomColor(),
            },
          },
        },
        {
          name: '日本',
          value: 100,
          textStyle: {
            normal: {
              color: randomColor(),
            },
          },
        },
        {
          name: '澳大利亚',
          value: 300,
          textStyle: {
            normal: {
              color: randomColor(),
            },
          },
        },
        {
          name: '韩国',
          value: 200,
          textStyle: {
            normal: {
              color: randomColor(),
            },
          },
        },
      ]

      window.onload = function () {
        createChartHandler()
      }

      // 生成随机颜色
      function randomColor() {
        return (
          'rgb(' +
          [
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255),
          ].join(',') +
          ')'
        )
      }

      // 创建chart
      function createChartHandler() {
        let chart = echarts.init(document.querySelector('#chart'))
        chart.setOption({
          backgroundColor: '#fff',
          series: [
            {
              type: 'wordCloud',
              shape: 'triangle',
              left: 'center',
              top: 'center',
              right: null,
              bottom: null,
              width: '100%',
              height: '100%',
              sizeRange: [20, 50],
              rotationRange: [-90, 90],
              rotationStep: 45,
              gridSize: 8,
              drawOutOfBound: false,
              textStyle: {
                normal: {
                  fontFamily: 'sans-serif',
                  fontWeight: 'normal',
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: randomColor(), // 鼠标移入的颜色
                },
              },
              data,
            },
          ],
        })
      }

      // shape ：词云的形状，默认是 circle，可选的参数有cardioid 、 diamond 、 triangle-forward 、 triangle 、 star。
      // left top right bottom ：词云的位置，默认是 center center。
      // width height ：词云的宽高，默认是 75% 80%。
      // sizeRange ：词云的文字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例， value 最小的渲染为 12px ，最大的渲染为 60px ，中间的值按比例计算相应的数值。
      // rotationRange rotationStep ：词云中文字的角度，词云中的文字会随机的在 rotationRange 范围内旋转角度，渲染的梯度就是 rotationStep ，这个值越小，词云里出现的角度种类就越多。以上面参数为例，可能旋转的角度就是 -90 -45 0 45 90 。
      // gridSize ：词云中每个词的间距。
      // drawOutOfBound ：是否允许词云在边界外渲染，直接使用默认参数 false 就可以，否则容易造成词重叠。
      // textStyle ：词云中文字的样式， normal 是初始的样式， emphasis 是鼠标移到文字上的样式。
    </script>
  </body>
</html>

二、echarts5.2.2 + echarts-wordcloud2.0.0

1、实现效果
2、前置资源获取
- http://winserver.geointech.cn:8040/echarts/echarts-5.2.2.min.js
- http://winserver.geointech.cn:8040/echarts/echarts-wordcloud-2.0.0.min.js
3、实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字符云、词云5</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #chart {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="http://winserver.geointech.cn:8040/echarts/echarts-5.2.2.min.js"></script>
    <script src="http://winserver.geointech.cn:8040/echarts/echarts-wordcloud-2.0.0.min.js"></script>
    <script>
      const data = [
        {
          name: '中国',
          value: 10000,
        },
        {
          name: '泰国',
          value: 600,
        },
        {
          name: '新加坡',
          value: 500,
        },
        {
          name: '印度尼西亚',
          value: 400,
        },
        {
          name: '日本',
          value: 100,
        },
        {
          name: '澳大利亚',
          value: 300,
        },
        {
          name: '韩国',
          value: 200,
        },
      ]

      window.onload = function () {
        createChartHandler()
      }

      // 生成随机颜色
      function randomColor() {
        return (
          'rgb(' +
          [
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255),
            Math.round(Math.random() * 255),
          ].join(',') +
          ')'
        )
      }

      // 创建chart
      function createChartHandler() {
        let echartsWordcloud = echarts.init(document.getElementById('chart'))
        echartsWordcloud.setOption({
          backgroundColor: '#fff',
          series: [
            {
              type: 'wordCloud',
              shape: 'triangle',
              gridSize: 10,
              sizeRange: [20, 50],
              rotationRange: [-90, 90],
              rotationStep: 45,
              gridSize: 8,
              drawOutOfBound: false,
              textStyle: {
                fontFamily: '微软雅黑',
                color: function () {
                  return randomColor()
                },
              },
              left: 'center',
              top: 'center',
              right: null,
              bottom: null,
              width: '100%',
              height: '100%',
              data,
            },
          ],
        })
        //点击事件
        echartsWordcloud.on('click', function (e) {
          alert(e)
        })
      }

      // shape ：词云的形状，默认是 circle，可选的参数有cardioid 、 diamond 、 triangle-forward 、 triangle 、 star。
      // left top right bottom ：词云的位置，默认是 center center。
      // width height ：词云的宽高，默认是 75% 80%。
      // sizeRange ：词云的文字字号范围，默认是[12, 60] ，词云会根据提供原始数据的 value 对文字的字号进行渲染。以默认值为例， value 最小的渲染为 12px ，最大的渲染为 60px ，中间的值按比例计算相应的数值。
      // rotationRange rotationStep ：词云中文字的角度，词云中的文字会随机的在 rotationRange 范围内旋转角度，渲染的梯度就是 rotationStep ，这个值越小，词云里出现的角度种类就越多。以上面参数为例，可能旋转的角度就是 -90 -45 0 45 90 。
      // gridSize ：词云中每个词的间距。
      // drawOutOfBound ：是否允许词云在边界外渲染，直接使用默认参数 false 就可以，否则容易造成词重叠。
      // textStyle ：词云中文字的样式， normal 是初始的样式， emphasis 是鼠标移到文字上的样式。
    </script>
  </body>
</html>