echarts绘制词云图
<!DOCUMENT html>
<html>
<head>
<meta charset="utf-8">
<title>词云</title>
<script src="echarts.js"></script>
<script src="echarts-wordcloud.js"></script>
</head>
<body>
<center>
<div id="main" style="width:1000px;height:700px;"></div>
</center>
<script type="text/javascript">
var Mychart = echarts.init(document.getElementById("main"));
var data1 = [
{name:'Java',value:200},
{name:'Python',value:200},
{name:'HTML',value:150},
{name:'JavaSript',value:150},
{name:'Java Web',value:180},
{name:'MySQL',value:160},
{name:'CentOS',value:170},
{name:'Android',value:100},
{name:'Hadoop',value:210},
{name:'HDFS',value:190},
{name:'YARN',value:190},
{name:'MapReduce',value:190},
{name:'Flume',value:180},
{name:'Sqoop',value:170},
{name:'Hive',value:180},
{name:'Azkaban',value:175},
{name:'Zookpeer',value:155},
{name:'爬虫',value:210},
{name:'Spark',value:195},
{name:'大数据',value:500},
{name:'Hbase',value:229},
{name:'其他',value:60},
{name:'Ajax',value:320},
{name:'IDE',value:167},
{name:'echarts',value:99},
{name:'wordCloud',value:111},
{name:'数据采集',value:68},
{name:'数据分析',value:123},
{name:'数据清洗',value:135},
{name:'数据存储',value:135},
{name:'数据可视化',value:165},
{name:'apache',value:215},
{name:'Scalar',value:220},
{name:'人工智能',value:320},
]
var option = {
title:{
text:'词云',
textStyle:{
color:'#ffffff'
}
},
backgroundColor:'#000',
series:[{
type:'wordCloud',
//网格尺寸,尺寸越大，字体之间的间隔越大
grideSize:2,
//字体的最大与最小字号
sizeRange:[12,35],
//字体旋转的范围
rotationRange:[45,90,135,-90],
//词云形状 circle:圆形,pentagon:五边形
//cardioid:苹果形或心形,star:星形,diamond:钻石,
//triangle-forward:三角形,triangle:三角形,smooth:平滑
shape:'pentagon',
textStyle:{
normal:{
//字体随机颜色
color:function(){
return 'rgb('+[
Math.round(Math.random()*255),
Math.round(Math.random()*255),
Math.round(Math.random()*255)
].join(',')+')';
}
},
emphasis:{
//阴影距离
shadowBlur:1,
//阴影颜色
shadowColor:'#111'
}
},
data:data1
}]
};
Mychart.setOption(option);
</script>
</body>
</html>
效果图
