echarts ------ 基于echarts的词云图，点击词云图，获取自定义属性
词云效果图
1.引入资源
jquery-1.8.3.min.js
echarts.js
echarts-wordcloud.js
ciyun.js
data.json
2.准备数据 — data.json
{
"status": "success",
"data": [
[
{
"tag": "北京",
"value": 9,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "上海",
"value": 9,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "广州",
"value": 5,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "南京",
"value": 5,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "杭州",
"value": 4,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "武汉",
"value": 4,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "天津",
"value": 3,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "香港",
"value": 3,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "澳门",
"value": 2,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "济南",
"value": 2,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "青岛",
"value": 2,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "菏泽",
"value": 2,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "临沂",
"value": 2,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "山东",
"value": 2,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "宁夏",
"value": 2,
"flag": 2,
"uniscid": "1867"
},
{
"tag": "西藏",
"value": 1,
"flag": 2,
"uniscid": "1867"
}
]
]
}
3.编写html创建词云图容器
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<title>词云图title>
<script type="text/javascript" src="jquery-1.8.3.min.js">script>
<script type="text/javascript" src="echarts.js">script>
<script type="text/javascript" src="echarts-wordcloud.js">script>
<script type="text/javascript" src="ciyun.js">script>
head>
<body>
<div id="ciyuntu-echarts" style="position: relative; overflow: hidden; width: 1128px; height: 259px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
div>
body>
html>
<script>
$(function(){
mainFocusTopic();
})
script>
4.词云图实现 — ciyun.js
/**
* 词云图
* @param param
* @returns
*/
function mainFocusTopic() {
var ciyuntu = echarts.init(document.getElementById('ciyuntu-echarts'));
$.get("data.json",{},function(data){
data = JSON.parse(data);
if(data.status=="success"){
var datalist=[];
var dataobj = null;
if(data.data != null){
for(var i = 0 ; i<(data.data.length>1?(data.data.length-1) : data.data.length); i++){
for(var x = 0 ; x<(data.data[i].length>1?(data.data[i].length-1) : data.data[i].length); x++){
dataobj = new Object();
dataobj.name = data.data[i][x].tag;
dataobj.value = data.data[i][x].value;
dataobj.uniscid = data.data[i][x].uniscid;
datalist.push(dataobj);
}
}
}
ciyuntu.setOption(option = {
tooltip : {},
series : [{
type : 'wordCloud',
gridSize : 20,
sizeRange : [ 12, 50 ],
rotationRange : [ 0, 0 ],
shape : 'circle',
textStyle : {
normal : {
color : function() {
return 'rgb('
+ [ Math.round(Math.random() * 320),
Math.round(Math.random() * 320),
Math.round(Math.random() * 320) ]
.join(',') + ')';
}
},
emphasis : {
shadowBlur : 10,
shadowColor : '#333'
}
},
data : datalist
}]
});
/*$("#ciyuntu-echarts").off("click").on("click",function(params){
var topic=$(this).find("div:last").text();
var newtopic=topic.split(" :");
var flag = confirm("确定要查看【"+newtopic[0]+"】吗？")
if(flag){
alert(newtopic[2])
}else{
return false;
}
})*/
//添加点击事件,获取自定义属性
ciyuntu.on('click',function(params){
var name = params.data.name;
var value = params.data.value;
var uniscid = params.data.uniscid;
console.log(name + ":" + value + ":" + uniscid);
});
//图表自适应
window.onresize = function () {
ciyuntu.resize();
}
}
});
}