echarts ------ 基于echarts的词云图，点击词云图，获取自定义属性

最新推荐文章于 2024-05-14 14:56:05 发布

奔跑的程序猿。。。

最新推荐文章于 2024-05-14 14:56:05 发布

阅读量3.6k

点赞数

分类专栏：前端工具插件

本文链接：https://blog.csdn.net/weixin_40393238/article/details/102386244

版权

前端工具插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

词云效果图
在这里插入图片描述

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创建词云图容器

<!DOCTYPE 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>
	<!-- echarts -->
	<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();
            }
		}
	});
}

奔跑的程序猿。。。

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
echarts ------ 基于echarts的词云图，点击词云图，获取自定义属性

词云效果图1.引入资源jquery-1.8.3.min.jsecharts.jsecharts-wordcloud.jsciyun.jsdata.json2.准备数据 — data.json{ "status": "success", "data": [ [ { "tag": "北京", "value": 9, ...
复制链接

扫一扫