关于Echarts词云图如何实现自定义形状

文章目录

关于Echarts词云图如何实现自定义形状
前言
一、前期准备
二、形成步骤
- 1.转化图片为base64
- 2.填入代码，实现形状

前言

因为这段时间一直在弄Echarts词云图，所以对这东西稍微有点了解了，自己遇到的困难解决了，也分享给可能遇到同样问题的你，希望可以帮助到大家顺利解决。

一、前期准备

首先要说明的是，Echarts词云图是给了几个默认的形状的，具体的如下（完整的代码我就不贴了，既然大家搜索到这里，一定是对框架有所了解了，具体的也可以查看我的另一篇博客地址贴在这）

// cardioid (apple or heart shape curve, the most known polar equation), diamond (// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.// 词云的形状，可选值有  cardioid心形,diamond菱形,square正方形,triangle-forward指向右边的三角形,triangle-upright正三角形  triangle三角形，pentagon五角形，star五角星形，shape:'star',

在进行自定义形状的过程中，简单来说我们需要一张图片，然后通过转换工具将图片格式转化成base64，再通过代码实现词云图展示。
关于图片，要说明的是，我们的这张图片一定要是矢量图，并且最好为黑色填充，也不能说必须是黑色，但就我实验来看，黑色的都成功了，其他的我都失败了0.0这里向大家推荐阿里巴巴矢量图标库官网-iconfont地址戳这，这里边的基本上都是可以的（注意图片填充要为黑色），然后再附上图片转化base64的网站地址戳这
这样我们的前期准备工作就完成了

二、形成步骤

1.转化图片为base64

我这里在Iconfont上下载了一张猫头的图片，如图

然后我们用我上面个给的网站将图片转化成base64格式码

全选复制，准备使用！

2.填入代码，实现形状

废话不多说，我先贴代码和示例图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>cat</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: 700px; height: 500px"></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'));var maskImage = new Image();maskImage.src = data.imagemaskImage.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',right: null,bottom: null,data: data.value}]})}}</script>
</body>
</html>

（这里学习了这位博主的代码，特此感谢地址）

运行效果如图（对比）：

效果还是很好的，这样就大功告成了！0.0

关于Echarts词云图自定义形状如何实现相关推荐

echarts 词云图使用 + vue
介绍根据自己定义Echarts词云图背景图,词云图可方便的对词组进行可视化的显示. 效果图一安装 npm install echarts-wordcloud 注意Echarts5.0的版本要对应 ...
echarts词云图形状_用Wordcloud生成指定形状的词云图
wordcloud是Python扩展库中一种将词语用图片表达出来的一种形式,通过词云生成的图片,我们可以更加直观的看出某篇文章的故事梗概. 首先贴出一张词云图(以哈利波特小说为例): 在生成词云图之前 ...
echarts词云图形状_使用pyecharts绘制词云图-淘宝商品评论展示
一.什么是词云图? 词云图是一种用来展现高频关键词的可视化表达,通过文字.色彩.图形的搭配,产生有冲击力地视觉效果,而且能够传达有价值的信息. 制作词云图的网站有很多,简单方便,适合小批量操作. BI ...
echarts词云图形状_怎么用Python画出好看的词云图？
相信很多人在第一眼看到下面这些图时,都会被其牛逼的视觉效应所吸引,这篇文章就教大家怎么用Python画出这种图. 前期准备上面的这种图叫做词云图,主要用途是将文本数据中出现频率较高的关键词以可视化的 ...
echarts词云图形状_词云图在自然语言中的应用，可以如此炫酷！
词云图,也叫文字云,是对文本中出现频率较高的"关键词"予以视觉化的展现,词云图过滤掉大量的低频低质的文本信息,使得浏览者只要一眼扫过文本就可领略文本的主旨. 一.在线生成词云图 1 ...
echarts词云图形状_用Python 3.8绘制词云图就这么20行代码
艾莎为了寻找父母遇难的真相,以及自己魔力的来源,她与安娜.克斯托夫.驯鹿斯特与雪宝一行远走阿伦戴尔王国,去北方寻找这两个问题的答案,途中发生了一些冒险故事-- 电影<冰雪奇缘2>无论是美轮 ...
Echarts词云图
水果店词云图 <!DOCTYPE html> <html> <head><meta charset="utf-8"><titl ...
echarts词云图实现
先看效果先装所需的依赖 npm i echarts npm i echarts-wordcloud 这里我写成了一个组件,在项目多个地方使用 <template> <div> ...
python词云自定义形状_如何在Python中生成任何形状的词云
作者 | Julia Kho 编辑| 代码医生团队在本文中,我们将探讨如何在python中以您想要的任何形状生成文字云.我们将通过一个示例来说明如何在房屋的自定义形状中创建简单的文字云,如上图所示. ...

关于Echarts词云图自定义形状如何实现