目录
一.效果图
二.准备工作
要想用自己的形状首先要有base64图像的码源，图片只能是矢量图，且尽量黑色，以下提供两个网站
阿里巴巴矢量图
https://www.iconfont.cn/?spm=a313x.search_index.i3.2.7d543a81Bywc8E
base64图片转换工具https://tool.chinaz.com/tools/imgtobase/
三.代码实现
首先写一个词云图代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
<script src="js/echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
var myChar=echarts.init(document.getElementById("main"));
// function createRandomItemStyle(){//随机颜色
// return{
// normal:{
// color:'rgb('+[
// Math.round(Math.random()*255),
// Math.round(Math.random()*255),
// Math.round(Math.random()*255),
// ].join(',')+')'
// }
// };
// }
option = {
title:{
text:"词云图",
link:'http://www.baidu,com/',
},
tooltip:{
show:true,
},
series:[{
type: 'wordCloud',
sizeRange:[6,78], //数据大小范围
size:['95%',90],//显示词云图的大小
textRotation:[0,45,90,135,-45,-90],//文字倾斜角度
textPadding:4,//文字之间的间距
autoSize:{
enable:true,
minSize:2,//最小的文字大小
},
data:[
//数据
{
"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": 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
}]
}
]
}
myChar.setOption(option)
</script>
</body>
</html>
第二步
将base64码源复制上去
在将图形写入数据表中
在用表导入图形中即可
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
<script src="js/echarts-wordcloud.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
var myChar=echarts.init(document.getElementById("main"));
// function createRandomItemStyle(){//随机颜色
// return{
// normal:{
// color:'rgb('+[
// Math.round(Math.random()*255),
// Math.round(Math.random()*255),
// Math.round(Math.random()*255),
// ].join(',')+')'
// }
// };
// }
mage11 = "data:image/png;base64,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";
var maskResource = new Image();
maskResource.src=mage11;
option = {
title:{
text:"词云图",
link:'http://www.baidu,com/',
},
tooltip:{
show:true,
},
series:[{
maskImage:maskResource,
type: 'wordCloud',
sizeRange:[6,78], //数据大小范围
size:['95%',90],//显示词云图的大小
textRotation:[0,45,90,135,-45,-90],//文字倾斜角度
textPadding:4,//文字之间的间距
autoSize:{
enable:true,
minSize:2,//最小的文字大小
},
data:[
//数据
{
"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": 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
}]
}
]
}
maskResource.onload = function(){
myChar.setOption(option)
};
</script>
</body>
</html>
1707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
