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

前言

  • 需求:因为公司实现项目的过程中存在一个生成字符云效果的需求,所以查找了一下当前使用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>

备注

  • 归档记录以备后续翻阅使用
  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值