效果图如下:
相较而然,还是下面的黑白的图片绘制的比较好一些,所以图片最好是类似黑白图的图片。
点击查看具体效果(jquery插件库)
以下是实现代码
插件准备:(1)jquery-1.8.3.min.js
(2)echarts.min.js
(3)echarts-wordcloud.min.js
图片准备: 两色图片即可
(1)html代码
<div class="content">
<div class="main left" >
<div id="main" style="width:640px;height:500px;"></div>
<div id="choose"></div>
</div>
<div class="sftg-yourinfo left">
<div class="sftglong-input">
<a><input type="file" /></a>
</div>
<div id="lee"></div>
</div>
</div>
(2)css
#choose span{
margin-right:10px;
}
#choose{
position: absolute;
width:640px;
height:500px;
background:rgba(0,0,0,0.7);
text-align: center;
line-height: 500px;
font-size:50px;
top:0;
left:0;
display: none;
color:#fff;
font-weight: bold;
}
.main{
position: relative;
margin-right:60px;
}
.left{
float:left;
}
.sftg-yourinfo{
margin-top:60px;
}
(3)jQuery代码
$(function(){
function xmTanUploadImg(obj) {
var file = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var img = '<img src='+ e.target.result +'>';
srcword = e.target.result;
img = '<div class="item">'+img+'<i class="iconfont icon-guanbi1"></i></div>';
$('#lee').html(img);
}
reader.readAsDataURL(file);
}
//上传文件
$('.sftg-yourinfo').on('change','.sftglong-input a input',function(event){
event.stopPropagation();
event.preventDefault();
var val = $(this).val();
var dataval=[];
val = val.split('\\')[2];
$(this).parent().parent().find('span').html(val);
$('#lee').css({'height':'180px','margin-top':'36px'});
xmTanUploadImg(this);
setTimeout(add,500);
});
//绘制词云
function add(){
var myChart = echarts.init(document.getElementById('main'));
var presents = ['圣诞树', '贺卡', '圣诞礼盒', '围巾', '袜子', '苹果', '手链', '巧克力', '玫瑰', '香水', '乐高', '芭比', '项链', '抱枕', '变形金刚', '摆件', '魔方', '文具', '棒棒糖', '蓝牙耳帽', '超级飞侠', '暖手宝', '夜灯', '堆袜', '耳钉', '公仔', '手机壳', '八音盒', '剃须刀', '打火机', '手表', '巴克球', '模型', '音响', '蒙奇奇', '保温杯','公仔', '手机壳', '八音盒', '剃须刀', '打火机', '手表', '巴克球', '模型', '音响', '蒙奇奇', '保温杯','圣诞树', '贺卡', '圣诞礼盒', '围巾', '袜子', '苹果', '手链', '巧克力', '玫瑰', '香水', '乐高', '芭比', '项链', '抱枕', '变形金刚', '摆件', '魔方', '文具', '棒棒糖', '蓝牙耳帽', '超级飞侠', '暖手宝', '夜灯', '堆袜', '耳钉', '公仔', '手机壳', '八音盒', '剃须刀', '打火机', '手表', '巴克球', '模型', '音响', '蒙奇奇', '保温杯','公仔', '手机壳', '八音盒', '剃须刀', '打火机', '手表', '巴克球', '模型', '音响', '蒙奇奇', '保温杯']
var chooseurl = $('#lee').find('img').attr('src');
var data = [];
for (var i = 0; i < presents.length; ++i) {
data.push({
name: presents[i],
value: (presents.length - i) * 2
});
}
for (var i = 10; i < presents.length; ++i) {
var cnt = Math.floor(Math.random() * 10);
for (var j = 0; j < cnt; ++j) {
data.push({
name: presents[i],
value: Math.random() * 100
});
}
}
var maskImage = new Image();
maskImage.onload = function() {
myChart.setOption({
tooltip: {
show: false
},
series: [{
type: 'wordCloud',
gridSize: 1,
sizeRange: [6, 20],
rotationRange: [0, 180],
rotationStep: 90,
maskImage: maskImage,
textStyle: {
normal: {
color: function(v) {
if (v.value > 190) {
return 'rgb(110, 206, 7)';
} else if (v.value > 170) {
return 'rgb(7, 49, 206)';
} else if (v.value > 150) {
return 'rgb(105, 7, 206)';
} else if (v.value > 130) {
return 'rgb(185, 45, 225)';
} else if (v.value > 110) {
return 'rgb(247, 65, 193)';
} else if (v.value > 90) {
return 'rgb(223, 31, 126)';
} else if (v.value > 70) {
return 'rgb(66, 152, 177)';
} else if (v.value > 50) {
return 'rgb(229, 208, 66)';
} else if (v.value > 30) {
return 'rgb(189, 117, 82)';
} else {
return 'rgb(20, 186, 167)';
}
}
},
},
width: 500,
top: 40,
data: data
}]
});
};
maskImage.src = chooseurl;
}
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {
$('#choose').show();
$('#choose').html(params.name);
});
$('#choose').on('click',function(){
$('#choose').hide();
});
});
上传图片可以绘制出相应的词云,点击词云中的文字可以进行放大显示。