关于Echarts词云图自定义形状如何实现
关于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.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',
right: null,
bottom: null,
data: data.value
}]
})
}
}
</script>
</body>
</html>
（这里学习了这位博主的代码，特此感谢地址）
运行效果如图（对比）：
效果还是很好的，这样就大功告成了！0.0