关于Echarts词云图如何实现自定义形状
前言
因为这段时间一直在弄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
},
最低0.47元/天 解锁文章
6864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
