最近有个项目需要做出云图来,一开始还不知道云图是什么鬼,直到需求在网上找了个图我才恍然大悟,但是大悟完就开始一脸懵逼了,这玩意怎么做?因为当时项目紧,项目经理就先叫我用photoshop画了一个云图给贴上了~~最近听同事说echart也可以实现的,就又去烦了好大一会儿,才发现echarts3的例子中并没有云图的例子,只有echarts2中有,然后试着把2中的代码弄到3下面,果然不出所料的报错了,于是就上网找方法,网上给出的解释是得引入一个worldcloud.js文件。下面就不废话直接上代码了~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/worldcloud.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script>
$(function(){
echartsCloud();//初始化echarts图
})
function echartsCloud(){
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: 'echarts3云图展示'
},
tooltip: {},
series: [{
type : 'wordCloud', //类型为字符云
shape:'smooth', //平滑
gridSize : 2, //网格尺寸
size : ['80%','80%'],
//sizeRange : [ 50, 100 ],
rotationRange : [ 46, 80 ], //旋转范围
textStyle : {
normal : {
fontFamily:'sans-serif',
color : function() {
return 'rgb('
+ [ Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160) ]
.join(',') + ')';
}
},
emphasis : {
shadowBlur : 5, //阴影距离
shadowColor : '#333' //阴影颜色
}
},
data:[],
}]
});
// 异步加载数据
$.get('./cloud.json').done(function (data) {
// 填入数据
myChart.setOption({
series: [{
data: data.dataCloud
}]
});
});
}
</script>
</body>
</html>
上面有详细的注释,我也不多废话了,主要要注意的还是json数据的格式,今天写的时候老是请求不成功,网上看了各种方法都试了还是不行,最后去百度搜json找在线解析的网站上校验才发现我的json格式写错了,多加了一个逗号,浪费我了一个多小时的时间,哎~~看着落日又想起了我在夕阳下的奔跑,那是我失去的青春~~哈哈,下面是我写的json文件,各位要引以为戒呀。
{
"dataCloud":[
{"name": "云图","value": "200"},
{"name": "是个啥","value": "156"},
{"name": "他啥都不是","value": "122"},
{"name": "就是他呆子","value": "119"},
{"name": "傻子和疯子","value": "108"},
{"name": "营养快线","value": "101"},
{"name": "哈哈哈到家","value": "96"},
{"name": "瑞士军刀","value": "84"},
{"name": "DW情侣对表","value": "58"},
{"name": "清风抽纸","value": "55"},
{"name": "OPPO R9S","value": "46"},
{"name": "这一刻更清晰","value": "28"},
{"name": "呵呵旧宫style","value": "27"},
{"name": "债券评级","value": "26"},]
}
各位看官看到这可别急着复制粘贴,因为这个json是错误的!!知道错误在哪么?就是因为债券评级花括号后面、中括号前面的逗号~~最后一个逗号一定要去掉,否则ajax会获取不到json文件中的数据哟。。。而且这里还有一个要注意的就是value值一定要按照从大到小的顺序来写,否则你会发现你的name和value会不对照~~
刚刚又发现个问题就是要注意我上面引入js文件的引入顺序,一定要吧worldcloud.js放在echarts后面引入,否则会报错。
最后把演示地址给你们贴上:http://webmq.cn/echartsCloud/2-1.html下载地址是:http://webmq.cn/echartscloudzip.zip