Echarts词云图

一、什么是词云

1.词云的简介

        词云,又称文字云,英文名:Word Cloud。是文本数据的视觉表示形式。就是对指定范围文本中出现频率较高的“关键词”予以视觉上的突出表现,从而过滤掉大量的文本信息,形成“关键词云层”或“关键词渲染”,使浏览网页者只要一眼扫过文本就可以领略文本的主题宗旨。

2.词云实现原理

   某个词云就是指定文章内的关键字集合体。一篇文章我们可以拆分成多个关键词,然后把每个单词出现的频率进行统计

3. 实现词云的方式

二、词云图的特点

   目前主要有两种词云的实现库,一个是最基础的词云wordcloud,另一个是基于wordcloud实现的stylecloud。

词云图是一种数据可视化技术,它通过将文本数据中的单词按照其频率或重要性进行排列,并以不同大小或颜色展示,以便于观察和分析。以下是词云图的特点:

  • 视觉冲击力强。词云图通常具有较高的视觉吸引力,能够快速抓住观众的注意力,这使得它在展示大量文本数据时尤为有效。
  • 内容直接。词云图是对文本内容的高度浓缩和精简处理,能够直观地反映特定文本的内容,帮助读者快速理解文本的主题、关键概念或主要内容。
  • 应用范围广泛。词云图可以应用于用户画像、舆情分析等多种场景,并且可以轻松地嵌入到PPT报告、数据分析类产品或可视化大屏中。
  • 制作简单。即使没有深厚的数据处理技术背景,也能制作出有效的词云图,这使得它成为一种易于使用的工具。
  • 趣味性强。可以通过调整颜色深浅、气泡大小等来直观地展示数据的数值大小,还可以根据实际需要调整词云的形状,使其具有有趣和直观的效果。
  • 存在信息缺失问题。词云图仅展示词汇,而缺少了文本的上下文和逻辑结构,这可能导致信息的不完整性。
  • 缺乏逻辑性。词云图由词汇、颜色、字体大小和图形组成,虽然具有视觉吸引力,但失去了文本原有的内在逻辑结构,需要读者将高频词汇串联起来形成联想。

三、代码实现

1.引用配置文件

        需要的js文件:

        echarts.js

        echarts-wordcloud.min.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>词云图</title>
    
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
</head>
2.配置一个div盒子
<div id="main" style="width: 600px;height: 500px; "></div>

3.所有代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>词云图</title>
    
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
</head>
<body>
    
    <div id="main" style="width: 600px;height: 500px; "></div>

    <script >
        var mycharts = echarts.init(document.getElementById("main"));
        //用来存储数据
        var jsonlist = [];
        jsonlist.push(
        { 
            "name": "花鸟市场",
            "value": 1446
        },
        {
            "name": "汽车",
            "value": 928
        },
        {
            "name": "视频",
            "value": 906
        },
        {
            "name": "电视",
            "value": 825
        },
        {
            "name": "Lover Boy 88",
            "value": 399
        },
        {
            "name": "动漫",
            "value": 486
        },
        {
            "name": "崩溃",
            "value": 50032
        },
        {
            "name": "直播",
            "value": 163
        },
        {
            "name": "广播电台",
            "value": 86
        },
        {
            "name": "戏曲曲艺",
            "value": 17
        },
        {
            "name": "演出票务",
            "value": 6
        },
        {
            "name": "给陌生的你听",
            "value": 1
        },
        {
            "name": "资讯",
            "value": 1437
        },
        {
            "name": "商业财经",
            "value": 422
        },
        {
            "name": "娱乐八卦",
            "value": 353
        },
        {
            "name": "军事",
            "value": 331
        },
        {
            "name": "科技资讯",
            "value": 313
        },
        {
            "name": "社会时政",
            "value": 307
        },
        {
            "name": "时尚",
            "value": 43
        },
        {
            "name": "网络奇闻",
            "value": 15
        },
        {
            "name": "旅游出行",
            "value": 438
        },
        {
            "name": "景点类型",
            "value": 957
        },
        {
            "name": "国内游",
            "value": 927
        },
        {
            "name": "远途出行方式",
            "value": 908
        },
        {
            "name": "酒店",
            "value": 693
        },
        {
            "name": "关注景点",
            "value": 611
        },
        {
            "name": "旅游网站偏好",
            "value": 512
        },
        {
            "name": "出国游",
            "value": 382
        },
        {
            "name": "交通票务",
            "value": 312
        },
        {
            "name": "旅游方式",
            "value": 187
        },
        {
            "name": "旅游主题",
            "value": 163
        },
        {
            "name": "港澳台",
            "value": 104
        },
        {
            "name": "本地周边游",
            "value": 3
        },
        {
            "name": "小卖家",
            "value": 1331
        },
        {
            "name": "全日制学校",
            "value": 941
        },
        {
            "name": "基础教育科目",
            "value": 585
        },
        {
            "name": "考试培训",
            "value": 473
        },
        {
            "name": "语言学习",
            "value": 358
        },
        {
            "name": "留学",
            "value": 246
        },
        {
            "name": "K12课程培训",
            "value": 207
        },
        {
            "name": "艺术培训",
            "value": 194
        },
        {
            "name": "技能培训",
            "value": 104
        },
        {
            "name": "IT培训",
            "value": 87
        },
        {
            "name": "高等教育专业",
            "value": 63
        },
        {
            "name": "家教",
            "value": 48
        },
        {
            "name": "体育培训",
            "value": 23
        },
        {
            "name": "职场培训",
            "value": 5
        },
        {
            "name": "金融财经",
            "value": 1328
        },
        {
            "name": "银行",
            "value": 765
        },
        {
            "name": "股票",
            "value": 452
        },
        {
            "name": "保险",
            "value": 415
        },
        {
            "name": "贷款",
            "value": 253
        },
        {
            "name": "基金",
            "value": 211
        },
        {
            "name": "信用卡",
            "value": 180
        },
        {
            "name": "外汇",
            "value": 138
        },
        {
            "name": "P2P",
            "value": 116
        },
        {
            "name": "贵金属",
            "value": 98
        },
        {
            "name": "债券",
            "value": 93
        },
        {
            "name": "网络理财",
            "value": 92
        },
        {
            "name": "信托",
            "value": 90
        },
        {
            "name": "征信",
            "value": 76
        },
        {
            "name": "期货",
            "value": 76
        },
        {
            "name": "公积金",
            "value": 40
        },
        {
            "name": "银行理财",
            "value": 36
        },
        {
            "name": "银行业务",
            "value": 30
        },
        {
            "name": "典当",
            "value": 7
        },
        {
            "name": "海外置业",
            "value": 1
        },
        {
            "name": "汽车",
            "value": 1309
        },
        {
            "name": "汽车档次",
            "value": 965
        },
        {
            "name": "汽车品牌",
            "value": 900
        },
        {
            "name": "汽车车型",
            "value": 727
        },
        {
            "name": "购车阶段",
            "value": 461
        },
        {
            "name": "二手车",
            "value": 309
        },
        {
            "name": "汽车美容",
            "value": 260
        },
        {
            "name": "新能源汽车",
            "value": 173
        },
        {
            "name": "汽车维修",
            "value": 155
        },
        {
            "name": "租车服务",
            "value": 136
        },
        {
            "name": "车展",
            "value": 121
        },
        {
            "name": "违章查询",
            "value": 76
        },
        {
            "name": "汽车改装",
            "value": 62
        },
        {
            "name": "汽车用品",
            "value": 37
        },
        {
            "name": "路况查询",
            "value": 32
        },
        {
            "name": "汽车保险",
            "value": 28
        },
        {
            "name": "陪驾代驾",
            "value": 4
        },
        {
            "name": "网络购物",
            "value": 1275
        },
        {
            "name": "做我的猫",
            "value": 1088
        },
        {
            "name": "只想要你知道",
            "value": 907
        },
        {
            "name": "团购",
            "value": 837
        },
        {
            "name": "比价",
            "value": 201
        },
        {
            "name": "海淘",
            "value": 195
        },
        {
            "name": "移动APP购物",
            "value": 179
        },
        {
            "name": "支付方式",
            "value": 119
        },
        {
            "name": "代购",
            "value": 43
        },
        {
            "name": "体育健身",
            "value": 1234
        },
        {
            "name": "体育赛事项目",
            "value": 802
        },
        {
            "name": "运动项目",
            "value": 405
        },
        {
            "name": "体育类赛事",
            "value": 337
        },
        {
            "name": "健身项目",
            "value": 199
        },
        {
            "name": "健身房健身",
            "value": 78
        },
        {
            "name": "运动健身",
            "value": 77
        },
        {
            "name": "家庭健身",
            "value": 36
        },
        {
            "name": "健身器械",
            "value": 29
        },
        {
            "name": "办公室健身",
            "value": 3
        },
        {
            "name": "商务服务",
            "value": 1201
        },
        {
            "name": "法律咨询",
            "value": 508
        },
        {
            "name": "化工材料",
            "value": 147
        },
        {
            "name": "广告服务",
            "value": 125
        },
        {
            "name": "会计审计",
            "value": 115
        },
        {
            "name": "人员招聘",
            "value": 101
        },
        {
            "name": "印刷打印",
            "value": 66
        },
        {
            "name": "知识产权",
            "value": 32
        },
        {
            "name": "翻译",
            "value": 22
        },
        {
            "name": "安全安保",
            "value": 9
        },
        {
            "name": "公关服务",
            "value": 8
        },
        {
            "name": "商旅服务",
            "value": 2
        },
        {
            "name": "展会服务",
            "value": 2
        },
        {
            "name": "特许经营",
            "value": 1
        },
        {
            "name": "休闲爱好",
            "value": 1169
        },
        {
            "name": "收藏",
            "value": 412
        },
        {
            "name": "摄影",
            "value": 393
        },
        {
            "name": "温泉",
            "value": 230
        },
        {
            "name": "博彩彩票",
            "value": 211
        },
        {
            "name": "美术",
            "value": 207
        },
        {
            "name": "书法",
            "value": 139
        },
        {
            "name": "DIY手工",
            "value": 75
        },
        {
            "name": "舞蹈",
            "value": 23
        },
        {
            "name": "钓鱼",
            "value": 21
        },
        {
            "name": "棋牌桌游",
            "value": 17
        },
        {
            "name": "KTV",
            "value": 6
        },
        {
            "name": "密室",
            "value": 5
        },
        {
            "name": "采摘",
            "value": 4
        },
        {
            "name": "电玩",
            "value": 1
        },
        {
            "name": "真人CS",
            "value": 1
        },
        {
            "name": "轰趴",
            "value": 1
        },
        {
            "name": "家电数码",
            "value": 1111
        },
        {
            "name": "手机",
            "value": 885
        },
        {
            "name": "电脑",
            "value": 543
        },
        {
            "name": "大家电",
            "value": 321
        },
        {
            "name": "家电关注品牌",
            "value": 253
        },
        {
            "name": "网络设备",
            "value": 162
        },
        {
            "name": "摄影器材",
            "value": 149
        },
        {
            "name": "影音设备",
            "value": 133
        },
        {
            "name": "办公数码设备",
            "value": 113
        },
        {
            "name": "生活电器",
            "value": 67
        },
        {
            "name": "厨房电器",
            "value": 54
        },
        {
            "name": "智能设备",
            "value": 45
        },
        {
            "name": "个人护理电器",
            "value": 22
        },
        {
            "name": "服饰鞋包",
            "value": 1047
        },
        {
            "name": "服装",
            "value": 566
        },
        {
            "name": "饰品",
            "value": 289
        },
        {
            "name": "鞋",
            "value": 184
        },
        {
            "name": "箱包",
            "value": 168
        },
        {
            "name": "奢侈品",
            "value": 137
        },
        {
            "name": "母婴亲子",
            "value": 1041
        },
        {
            "name": "孕婴保健",
            "value": 505
        },
        {
            "name": "母婴社区",
            "value": 299
        },
        {
            "name": "早教",
            "value": 103
        },
        {
            "name": "奶粉辅食",
            "value": 66
        },
        {
            "name": "童车童床",
            "value": 41
        },
        {
            "name": "关注品牌",
            "value": 271
        },
        {
            "name": "宝宝玩乐",
            "value": 30
        },
        {
            "name": "母婴护理服务",
            "value": 25
        },
        {
            "name": "纸尿裤湿巾",
            "value": 16
        },
        {
            "name": "妈妈用品",
            "value": 15
        },
        {
            "name": "宝宝起名",
            "value": 12
        },
        {
            "name": "童装童鞋",
            "value": 9
        },
        {
            "name": "胎教",
            "value": 8
        },
        {
            "name": "宝宝安全",
            "value": 1
        },
        {
            "name": "宝宝洗护用品",
            "value": 1
        },
        {
            "name": "软件应用",
            "value": 1018
        },
        {
            "name": "系统工具",
            "value": 896
        },
        {
            "name": "理财购物",
            "value": 440
        },
        {
            "name": "生活实用",
            "value": 365
        },
        {
            "name": "影音图像",
            "value": 256
        },
        {
            "name": "社交通讯",
            "value": 214
        },
        {
            "name": "手机美化",
            "value": 39
        },
        {
            "name": "办公学习",
            "value": 28
        },
        {
            "name": "应用市场",
            "value": 23
        },
        {
            "name": "母婴育儿",
            "value": 14
        },
        {
            "name": "游戏",
            "value": 946
        },
        {
            "name": "手机游戏",
            "value": 565
        },
        {
            "name": "PC游戏",
            "value": 353
        },
        {
            "name": "网页游戏",
            "value": 254
        },
        {
            "name": "游戏机",
            "value": 188
        },
        {
            "name": "模拟辅助",
            "value": 166
        },
        {
            "name": "个护美容",
            "value": 942
        },
        {
            "name": "护肤品",
            "value": 177
        },
        {
            "name": "彩妆",
            "value": 133
        },
        {
            "name": "美发",
            "value": 80
        },
        {
            "name": "香水",
            "value": 50
        },
        {
            "name": "个人护理",
            "value": 46
        },
        {
            "name": "美甲",
            "value": 26
        },
        {
            "name": "SPA美体",
            "value": 21
        },
        {
            "name": "花鸟萌宠",
            "value": 914
        },
        {
            "name": "绿植花卉",
            "value": 311
        },
        {
            "name": "狗",
            "value": 257
        },
        {
            "name": "其他宠物",
            "value": 131
        },
        {
            "name": "水族",
            "value": 125
        },
        {
            "name": "猫",
            "value": 122
        },
        {
            "name": "动物",
            "value": 81
        },
        {
            "name": "鸟",
            "value": 67
        },
        {
            "name": "宠物用品",
            "value": 41
        },
        {
            "name": "宠物服务",
            "value": 26
        },
        {
            "name": "书籍阅读",
            "value": 913
        },
        {
            "name": "网络小说",
            "value": 483
        },
        {
            "name": "关注书籍",
            "value": 128
        },
        {
            "name": "文学",
            "value": 105
        },
        {
            "name": "报刊杂志",
            "value": 77
        },
        {
            "name": "人文社科",
            "value": 22
        },
        {
            "name": "建材家居",
            "value": 907
        },
        {
            "name": "装修建材",
            "value": 644
        },
        {
            "name": "家具",
            "value": 273
        },
        {
            "name": "家居风格",
            "value": 187
        },
        {
            "name": "家居家装关注品牌",
            "value": 140
        },
        {
            "name": "家纺",
            "value": 107
        },
        {
            "name": "厨具",
            "value": 47
        },
        {
            "name": "灯具",
            "value": 43
        },
        {
            "name": "家居饰品",
            "value": 29
        },
        {
            "name": "家居日常用品",
            "value": 10
        },
        {
            "name": "生活服务",
            "value": 883
        },
        {
            "name": "物流配送",
            "value": 536
        },
        {
            "name": "家政服务",
            "value": 108
        },
        {
            "name": "摄影服务",
            "value": 49
        },
        {
            "name": "搬家服务",
            "value": 38
        },
        {
            "name": "物业维修",
            "value": 37
        },
        {
            "name": "婚庆服务",
            "value": 24
        },
        {
            "name": "二手回收",
            "value": 24
        },
        {
            "name": "鲜花配送",
            "value": 3
        },
        {
            "name": "维修服务",
            "value": 3
        },
        {
            "name": "殡葬服务",
            "value": 1
        },
        {
            "name": "求职创业",
            "value": 874
        },
        {
            "name": "创业",
            "value": 363
        },
        {
            "name": "目标职位", 
            "value": 162
        },
        {
            "name": "目标行业",  
            "value": 50 
        },
        {
            "name": "兼职",
            "value": 21 
        },
        {
            "name": "期望年薪",
            "value": 20
        },
        {
            "name": "实习",
            "value": 16
        },     
    
    );
    // 人像的base64编码
        image1= "data:image/png;base64,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"
        var maskResource = new Image()
        maskResource.src=image1;
        var option ={
            //设置标题,居中显示
            title:{
                text: 'E词云图',
                left:'center',
             },
            //数据可以点击
            tooltip:{

            },

            series:[
                {
                    maskImage:maskResource,
                    //词的类型
                    type: 'wordCloud',
                    //设置字符大小范围
                    sizeRange:[6,78],
                    rotationRange:[-45,90],
                    textStyle: {
                        normal:{
                            //生成随机的字体颜色
                            color:function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',')+')';

                            }
                        }

                    },
                    //不要忘记调用数据
                       data:jsonlist

                 }
            ]

        };
        //加载图像,将数据放在图像中
        maskResource.onload = function(){
            mycharts.setOption(option)

            };
    </script>

</body>
</html>

(该爱心形状需要转化为base64格式)

image1= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAPfklEQVR4Xu2dCfB+Ux3GP6IsMZMpQlIZM9JQUrZRo9QgRmUXZUlRtkqyFEmWIrSSQkXIGtmylMqWLDHRomiyjMmSUrLk30zzTOfHH7/3vfeee89dzn3OzDvM/O75Lp9zn/+5596zzIOLCZjARALzmI0JmMBkAhaI7w4TmELAAvHtYQIWiO8BE4gj4B4kjptrjYSABTKShnaacQQskDhurjUSAhbISBraacYRsEDiuLnWSAhYICNpaKcZR8ACiePmWiMhYIGMpKGdZhwBCySOm2uNhIAFMpKGdppxBCyQOG6uNRICFshIGtppxhGwQOK4udZICFggI2lopxlHwAKJ4+ZaIyFggYykoZ1mHAELJI6ba42EgAUykoZ2mnEELJA4bq41EgIWyEga2mnGEchNIAsDrw2/5cN/lwAWmPL7B/CH8Lt9rv+/Iw7pYGstNws7sXwJ8MSU319nYffoYCk8J/AhC0Q3/XuBteZq2KUbbJg5oeGvBS4ArgAea9B+l6b0D8n6wHrAGoHffA0GdO9c/9BcCZwPPNmg/dZMDU0g6g0kincD72qN0jOOJJTLgF8At3bgv47LNwPrAusA76hjKLLuWcB5wOXAg5E2Wq82BIGo65cYZn6tQ5rg8OYglLOBa/oS1HPiUO+6eRDEij2K8ZwgFInlzz2K63mh9FkgawI7hl+fGSo29SynAmf0JNAtgW2AjXoSz7QwTgT0+2UfY+2jQN4WRPH+PgIriEm9ioSinwavbRY9fkoU+r2xTccN+TolCOXnDdlrxEyfBKIBo3oMPRIMvegZWyI5CbglcTIrA9sFYSyW2Fcb5jVWUY9yaRvOinz0QSB6Tt47DLyL4h3a3/UK+SDgK4kC/zhwYHgVm8hFZ2b15uuIrsd3XQtkD+CLwIKdNUM7jvX2RkJpqjdRryFh6I1ezuVxYF/ga10l2ZVAXg4cHh4Nusq9bb9N9SY59xqT2kSPqvsA97fdaF0IZIPQa6zUdrI98Rfbm4yl15jUTPrupN7k4jbbsW2B7A8c3GaCPfWl3uRjwMkl49MgXOMYTfsYezkAOKQtCG0J5IXAacBmbSU2ED97AUcVxKoXGHocdXmGgD406jOA5oglLW0IZJHwynMIH62Swp5gXDe/Hh1mKxLPnl0ENQCfVwEbA39LGWtqgbwMOBd4S8okMrD9XWBXQG9tVBYCvglsm0FuKVPQ7GvNL7s7lZOUAnkFcD2wVKrgM7N7IbAboDY5tqPJmENE+vcwo/v3KYJPJZBlgTtTBJy5Tf2DojZZNfM8U6QnZjc2bTiFQPRl/OqmA7U9EyhBYG1A608aK00LZEngvsaisyETqE5gUUCv0RspTQtEk/Q0MHcxga4I/AV4TVPOmxSIlqS+vanAbMcEahA4HtipRv2nqzYlEE0m272JgGzDBBoioJkKtSc5NiEQKfVbDSVlMybQJIFNwne4aJt1BaJlsVrYoq/lLibQNwIPhe9J0a9/6wrkx2H7mL6BcTwmMEPgkjofXesI5AMVZqO6uUygSwKasvP9mABiBTIvcB2gvZZcTKDvBPSIpQ3y/ls10FiBaIZp0TTtqrH4ehNISeCTwNFVHcQIRNvLqPd4VVVnvt4EOiRwV+hFKm3HFCOQw4D9OkzUrk0glsAXgE9XqVxVIFpHrt5D6xVcTGBoBLT5uMYipfdVriqQr4c1C0MD43hNYIbAN6rM+qgikBcDWpTySrM2gQETuAdYAfh3mRyqCGTrsLa8jF1fYwJ9JqD9i7WJSGGpIhDtXL5FoUVfYAL9J3AmoB3wC0tZgbw6nBg0f6FFX2AC/Seg0650vJzWjkwtZQWiqcOpNmAuitF/N4EUBLSF61eLDJcViBdDFZH034dG4GfhOLraPchqwK+Glr3jNYESBFYPW1NNvLRMD/KJmDksJYLzJSbQNYFPAUdOC6KMQDTiz+HUp64bw/77R+BHRWeslBHIA0AOR3v1r3kcUdcEtK/v1F14igSiJbXXdp2F/ZtAQgLaiWfiwaFFAtEc+qnPaAkDt2kTaIOAjsb73CRHRQLxmvM2msg+uiSg3mPifm5FAnkKmK/L6O3bBBITmAPogKdZyzSBvA3QxxQXE8idwMRxyDSB6IhhHX7jYgK5E9BJVTpc9XllmkC2B3TykYsJ5E5gB+B7VQWiyVxfzp2M8zMBQLNFZp2MO60H0auvA43PBEZAYOKr3mkCUe+hXsTFBHInoN5DvUilMYjGHxqHuJhA7gQ0/tA4pJJA9AZLb7JcTCB3AnqDpTdZlQSibyD6FuJiArkTmPg1fdoY5CJgg9zJOD8TAC4GNqzag3gdiO+dsRA4B9isqkA8SB/L7eE8dXaIzhCpNAY5BtjF7ExgBAR0xuZHqgrkCEBrdl1MIHcC+uanM28q9SD+kp77beH8ZggcCuxfVSCbAmeboQmMgMDOwLerCmT5sN3oCPg4xZET0FmbN1UViK7XHqYvGjk8p58/gYnfA4uW3EpVq+TPxxmOmIDu8YmnNRcJ5KRJ74dHDNSp50VAYw+NQWYtRQLZo8wO2HnxcjYjIzBxgC4ORQJ5HfDbkQFzuuMi8AbgN7E9iOrd7XMJx3XHjChbnVe4zLR8i3oQ1T0B2HFE0JzqeAhovuEH6wpE4pBIXEwgNwJbATp7c2Ip04N4HJLbbeF8ROAxYCngkboCUX0fweabKjcCFwDvLkqqTA8iG3oVdlyRMf/dBAZEYFfg2KJ4ywpkUeC20CUV2fTfTaDvBO4DVgIeLgq0rEBk5+hJewcVOfHfTaBnBHQv6+ybwlJFIDoR9LpCi77ABPpPQCc331AmzCoCkb3zgY3KGPY1JtBTAoUHd84dd1WBrA/o1CkXExgqgfcBp5cNvqpAZFfGtyzrwNeZQI8I6EDatarEEyOQtaedClrFua81gZYJbFL1UKgYgSgn75nVcsvaXW0CJwPbVbUSK5BVgeurOvP1JtARgX+FR6tbq/qPFYj8HAB8vqpDX28CHRD4LHBwjN86ApG/S4F1Yxy7jgm0RODm0Hs8HuOvrkD08VATGReKce46JtACgfWAy2L91BWI/OqT/ZGxAbieCSQkoK1za92bTQhE+Wn7eL1CczGBvhCYuGN7lQCbEsji4dvIClWc+1oTSERAmzBobHx/XftNCURxaPOtUhPA6gbt+iZQQKDWuGNu200KRHb1mKXHLRcT6IrAFsBZTTlvWiCKS2er67wFFxNom0Cj4lDwKQRikbR9W9ifCDQujpQC8eOWb9o2CXwIODGFw1Q9yEysHrinaDXbnJvAQYBOQ0tSUgtEQesVcO3XbUmyt9GhE0jWc8yAaUMgM760k8SSQ28Rx98LAv8MYw7NBUxa2hSIEtGKrjWTZmTjuRPQt7btgd+1kWjbAlFOpwJbt5GcfWRH4DTgo4B6kFZKFwJRYocAn2klQzvJhcBhXdwzXQlEjeZd43O5ddPmMQfQNqGzHtOc1nW6D4Vl414H+GnZi33d6AjcGcSRfDA+iWyXPchMTMsCAuFiAnMT0D+c6jlu7xJLHwSi/BcJR729pEsY9t0bAt8J4nii64j6IpAZDlo/vHLXUOy/UwLRGyykiLpvAlGOPwQ2TpGsbfaawKOh19D+Vb0pfRSI4BwF7NkbSg4kNQEdNb4LcGVqR1Xt91UgymM34OtVE/L1gyNwUeg57upj5H0WiHhtCFzYR3COqRECOgJNb6p6W/ouEIFbBbiptwQdWCyBvYEvxVZuq94QBCIWywB/BOZvC4z9JCPwUOg1zkzmoUHDQxGIUtbujb8Glm8wf5tql8CNQRyD2fh8SAKZaUqdcKWTrlyGRUC73Wi8MajFc0MUiG4LDe407dllGARKnyrbt3SGKhBx1L6rR/QNqON5HoE9hvy6fsgCUUtsBfzAN2UvCdwbHql0MvJgy9AFIvDvBC4fbAvkGfjVQRzaI3fQJQeBqAE0wVETHV26J6Al1RqMP9J9KPUjyEUgIrE0cE34ZlKfjC3EEOhkWWxMoGXr5CQQ5bwAcAmgo6pd2iPwVOg1jm/PZTuechPIDDUfU93O/SMvdwRxRB9z1l6o1T3lKhCR0MIbbUvpko7AT4I4NA0oy5KzQNRg+pioj4ouzRPQZtEajD/ZvOn+WMxdICKtbfHP6A/yLCLp1bLYlETHIBDx8/ZCzdxF/wq9hg7IHEUZi0DUmK8H9My82Chatvkkbwvi6N2y2OZTfcbimASirJcCzgVWSwk1Q9ta1anxxt0Z5jY1pbEJRDBeBGjnjC3H1tiR+R4T9geIrD7samMUyEyL6aBRHTjqMpnAIJbFpmzAMQtEXLXDvHaad3k2gQfDI1VjxykPFfDYBaJ22xk4bqgNmCDuwS2LTcDgaZMWyP9RbAqcnRL0QGyLgQbjDwwk3uRhWiDPINYER72tWTg59X460G6We/UztO6iskCezX5FQMd8rdRdk3TiedDLYlMSs0CeT3cJ4ISwq2NK9n2wfU94pLqgD8H0MQYLZPZWmQ/QZLxt+9hoDcWUzbLYhnjMasYCmU43113mTwk9R2unxaa8iVPatkCK6e4HaClpLuVQYP9ckkmdhwVSjvCHuzpltVx4pa7SslidwaHxlUtJAhZISVDh1Ct9WZ63fJXeXPmn8Ejl7ZEqNokFUg3YWwEdMLlctWqdXp39stiUdC2Q6nRXCG+41qxetfUaepzSl/H/tO45E4cWSFxDLh6e5TeKq95KrQM8EbM+ZwsknuELgkh2iDeRpKZe3arX0Ktcl5oELJCaAMMxYn2Zw3RrEMdV9dOyBRGwQJq5D/YBvtiMqWgro10WG02sREULpASkkpfs2OE3hm8Au5eM05dVIGCBVIBV4tL3hDdcLy1xbVOX6CChI5syZjvPJmCBNH9HrBVEkvqwUS1q0mDcC72ab8OnLVogaeAuG8Ykm6cxzxXAvsANiezbbCBggaS9FZoevGtnQ002PDxt2LY+Q8ACSX8vvAnYKfxivd0HnA5oy89bYo24XnUCFkh1ZrE1JJRtgDWAstNUzgvnL0ocD8c6dr14AhZIPLs6NRcEVgc0kJ/5zQEeCj9tvaOZt/+o48R16xOwQOoztIWMCVggGTeuU6tPwAKpz9AWMiZggWTcuE6tPgELpD5DW8iYgAWSceM6tfoELJD6DG0hYwIWSMaN69TqE7BA6jO0hYwJWCAZN65Tq0/AAqnP0BYyJmCBZNy4Tq0+AQukPkNbyJiABZJx4zq1+gQskPoMbSFjAhZIxo3r1OoTsEDqM7SFjAlYIBk3rlOrT8ACqc/QFjImYIFk3LhOrT4BC6Q+Q1vImMD/AOLHxNhLM2LOAAAAAElFTkSuQmCC"
        var maskResource = new Image()
        maskResource.src=image1;

四、效果图

  • 33
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 是一个非常流行的数据可视化库,它支持多种图表类型,包括词云图。下面是一个简单的使用 Echarts 绘制词云图的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts 词云图</title> <!-- 引入 Echarts 库 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 使用 Echarts 绘制词云图的容器 --> <div id="wordcloud" style="width: 600px; height: 400px;"></div> <script> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('wordcloud')); // 定义词云图的数据 var data = [ {name: '张三', value: 100}, {name: '李四', value: 80}, {name: '王五', value: 70}, {name: '赵六', value: 60}, {name: '钱七', value: 50}, {name: '孙八', value: 40}, {name: '周九', value: 30}, {name: '吴十', value: 20}, ]; // 配置词云图的参数 var option = { series: [{ type: 'wordCloud', shape: 'circle', left: 'center', top: 'center', width: '80%', height: '80%', right: null, bottom: null, sizeRange: [12, 60], rotationRange: [-90, 90], rotationStep: 45, gridSize: 8, drawOutOfBound: false, textStyle: { normal: { fontFamily: 'sans-serif', fontWeight: 'bold', color: function () { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } }, emphasis: { shadowBlur: 10, shadowColor: '#333' } }, data: data }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 这个示例中,我们首先引入了 Echarts 库,然后在页面中创建一个容器用于显示词云图。接着,我们定义了词云图的数据,包括每个词的名称和权重。最后,我们使用 Echarts 的 `wordCloud` 类型来创建词云图,并通过配置参数来指定词云图的样式和数据。最终,我们将配置项和数据传递给 Echarts 的实例对象,并通过调用 `setOption` 方法显示图表。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值