首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

echarts实现词云自定义形状的示例代码

Posted in Javascript onFebruary 20, 2019

安装

npm install echarts
npm install echarts-wordcloud

词云安装官网 https://github.com/ecomfe/echarts-wordcloud

下面是一个小鸟形状的词云，可以在iconfont中下载（最好是填充的）图案，转为base64，就可以用来生成有图案的词云了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WordCloud Demo</title>
  <script type="text/javascript" src="./echarts.js"></script>
  <script type="text/javascript" src="./echarts-wordcloud.min.js"></script>
</head>
<body>
  <div id="main" style="width: 800px; height: 600px"></div>
  <script>
    onload = function () {
      var data = {
        value: [{
          "name": "花鸟市场",
          "value": 1446
        },
          {
            "name": "汽车",
            "value": 928
          },
          {
            "name": "视频",
            "value": 906
          },
          {
            "name": "电视",
            "value": 825
          },
          {
            "name": "Lover Boy 88",
            "value": 514
          },
          {
            "name": "动漫",
            "value": 486
          },
          {
            "name": "音乐",
            "value": 53
          },
          {
            "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
          },
          {
            "name": "雇主类型",
            "value": 10
          },
          {
            "name": "星座运势",
            "value": 789
          },
          {
            "name": "星座",
            "value": 316
          },
          {
            "name": "算命",
            "value": 303
          },
          {
            "name": "解梦",
            "value": 196
          },
          {
            "name": "风水",
            "value": 93
          },
          {
            "name": "面相分析",
            "value": 47
          },
          {
            "name": "手相",
            "value": 32
          },
          {
            "name": "公益",
            "value": 90
          }
        ],
        //小鸟图片
        image: "data:image/png;base64,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"
      }
      var myChart = echarts.init(document.getElementById('main'));
      //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容 iconfont上面的图标可以
      var maskImage = new Image();
      maskImage.src = data.image
 
      maskImage.onload = function(){
        myChart.setOption( {
          backgroundColor:'#fff',
          tooltip: {
            show: false
          },
          series: [{
            type: 'wordCloud',
            gridSize: 1,
            sizeRange: [12, 55],
            rotationRange: [-45, 0, 45, 90],
            maskImage: maskImage,
            textStyle: {
              normal: {
                color: function() {
                  return 'rgb(' +
                      Math.round(Math.random() * 255) +
                      ', ' + Math.round(Math.random() * 255) +
                      ', ' + Math.round(Math.random() * 255) + ')'
                }
              }
            },
            left: 'center',
            top: 'center',
            // width: '96%',
            // height: '100%',
            right: null,
            bottom: null,
            // width: 300,
            // height: 200,
            // top: 20,
            data: data.value
          }]
        })
      }
 
    }
  </script>
</body>
</html>

运行效果

echarts实现词云自定义形状的示例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

echarts实现词云自定义形状的示例代码

- Author -

小静仔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
深入理解JavaScript系列(12) 变量对象（Variable Object）
Jan 16 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
js实现新年倒计时效果
Dec 10 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 #Javascript
详解webpack 最简打包结果分析
Feb 20 #Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 #jQuery
小程序红包雨的实现示例
Feb 19 #Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 #Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 #jQuery
mysqldump(1) Windows server 2003(1) Outlook(1) appdata(1) celery(1) Mysql8(2) sentinel(1) 黑屏(2) minio(1) ACID(1)
You might like
收听困难？教您超简便短波广播抗干扰方法！
2021/03/01 无线电
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
PHPMailer安装方法及简单实例
2008/11/25 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
js 图片缩放（按比例）控制代码
2009/05/27 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
javascript基本语法
2016/05/31 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
使用Python的内建模块collections的教程
2015/04/28 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
分分钟入门python语言
2018/03/20 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
python 实用工具状态机transitions
2020/11/21 Python
潘多拉珠宝美国官方网站：Pandora US
2020/06/18 全球购物
信息服务专业毕业生求职信
2014/03/02 职场文书
小学运动会报道稿
2015/07/22 职场文书
MySQL自定义函数及触发器
2022/08/05 MySQL