Echarts制作标签云图

最新推荐文章于 2025-07-10 23:23:24 发布

LI_AINY

最新推荐文章于 2025-07-10 23:23:24 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： --------前端---- # Echarts 文章标签： Echarts 制作标签云图

本文链接：https://blog.youkuaiyun.com/LI_AINY/article/details/87800248

--------前端---- 同时被 2 个专栏收录

13 篇文章

订阅专栏

Echarts

2 篇文章

订阅专栏

本文分享了使用Echarts绘制词云图的实战经验，包括HTML、CSS和JavaScript代码示例，以及如何从后端获取数据并动态更新词云图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用echarts写个词云图，除了好几次问题，所以记录下来，下次好直接。。恩。
效果：
代码，有用的没用的我都留下了，测试数据也没删，为什么，懒

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>所有有用户评论</title>

<!-- CSS -->
<link rel="stylesheet"
	th:href="@{/http://fonts.googleapis.com/css?family=Roboto:400,100,300,500}">
<link rel="stylesheet"
	th:href="@{/static/assets/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet"
	th:href="@{/assets/font-awesome/css/font-awesome.min.css}">
<link rel="stylesheet" th:href="@{/assets/css/form-elements.css}">
<link rel="stylesheet" th:href="@{/assets/css/style.css}">
<!-- jqCloud -->
<script type="text/javascript"
	th:src="@{/jQCloud-1.0.3/jQCloud-1.0.3/jqcloud/jqcloud-1.0.3.js}"></script>
<link rel="stylesheet" th:href="@{/jQCloud-1.0.3/jQCloud-1.0.3/jqcloud/jqcloud.css}">
<!--Echarts  -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>
	

<link rel="shortcut icon" href="static/assets/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	th:href="@{/assets/ico/apple-touch-icon-144-precomposed.png}">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	th:href="@{/assets/ico/apple-touch-icon-114-precomposed.png}">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	th:href="@{/assets/ico/apple-touch-icon-72-precomposed.png}">
<link rel="apple-touch-icon-precomposed"
	th:href="@{/assets/ico/apple-touch-icon-57-precomposed.png}">

</head>

<body>

	<!-- Top content -->
	<div class="top-content">

		<div class="inner-bg">
			<div class="container">
				<div class="row">
					<div class="col-sm-8 col-sm-offset-2 text">
						<h1>评论关键词云图</h1>
						<input type="hidden" name="ss" id="hi" class="hi"/>
						<div class="description"></div>
					</div>
				</div>
				
				<div class="row">
					<div class="col-sm-6 col-sm-offset-3 form-box">	
						<div id="cloud" class="form-bottom" style="height: 600px;background-color: white">					
						
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>


	<!-- Javascript -->
	<script th:src="@{/assets/js/jquery-1.11.1.min.js}"></script>
	<script th:src="@{/assets/bootstrap/js/bootstrap.min.js}"></script>
	<script th:src="@{/assets/js/jquery.backstretch.min.js}"></script>
	<script th:src="@{/assets/js/scripts.js}"></script>
	<script th:src="@{public/media/js/jquery-1.8.3.min.js}"></script>

	<!--[if lt IE 10]>
            <script src="static/assets/js/placeholder.js"></script>
        <![endif]-->
</body>

<script th:inline="javascript">
/* var word_array = [
    {text: "Lorem", weight: 15},
    {text: "Ipsum", weight: 9, link: "http://jquery.com/"},
    {text: "Dolor", weight: 6, html: {title: "I can haz any html attribute"}},
    {text: "Sit", weight: 7},
    {text: "Amet", weight: 5}
    // ...as many words as you want
]; */
var returndata=null;
jQuery(function($) {  
	/* alert(ss);
    $(".form-bottom").jQCloud(word_array); */
    $.ajax({
	    url:"/getTextCloudJson",
	    type:'GET', //GET
	   // async:true,    //或false,是否异步异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
	    data:{}, 
	    /* data:{jsonObj:"222"}, */
	    timeout:5000,    //超时时间
	    dataType:'text',    //返回的数据格式：json/xml/html/script/jsonp/text
	    success:function(data){		 
	    	returndata=data;
	    	$("#hi").val(data);
	    	option.series[0].data=data;
	    },
	    error:function(){
	    }
	})
});
require.config({
    paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
    }
});

// 使用Echarts
require(
    [
        'echarts',
        'echarts/chart/wordCloud',    //字符云
    ],
    function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('cloud')); 
        function createRandomItemStyle() {
            return {
                normal: {
                    color: 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')'
                }
            };
        }
        option = {
            title: {
                text: 'YTC Trends',
                link: 'http://www.google.com/trends/hottrends'
            },
            tooltip: {
                show: true
            },
            series: [{
                name: 'YTC Trends',
                type: 'wordCloud',
                size: ['100%', '100%'],
                //设置方向
                textRotation : [0, 45, 90, -45],
                textPadding: 0,
                autoSize: {
                    enable: true,
                    minSize: 14
                },
                itemStyle: createRandomItemStyle() ,

              /*  data: [
                    {
                        name: "Macys",
                        value: 6181,
                       itemStyle: createRandomItemStyle()
                    },
                    {
                        name: "Amy Schumer",
                        value: "222",
                       itemStyle: "createRandomItemStyle()"
                    },
                    {
                        name: "Point Break",
                        value: 222,
                   //     itemStyle: createRandomItemStyle()
                    }
                ]       */
            }]
        };
       // option.series[0].data = JSON.parse(returndata);
       // option.series[0].data= [{"name":"I love my Mother's Brushes","itemStyle":"createRandomItemStyle()","value":5},{"name":"To big a head","itemStyle":"createRandomItemStyle()","value":6},{"name":"Eh","itemStyle":"createRandomItemStyle()","value":7},{"name":"gets the job done","itemStyle":"createRandomItemStyle()","value":8},{"name":"mini firefighter's hose","itemStyle":"createRandomItemStyle()","value":9},{"name":"great car wash","itemStyle":"createRandomItemStyle()","value":10},{"name":"Works well","itemStyle":"createRandomItemStyle()","value":11},{"name":"Real value","itemStyle":"createRandomItemStyle()","value":12},{"name":"Makes my RV happy","itemStyle":"createRandomItemStyle()","value":13},{"name":"Best Chamois- Money can buy","itemStyle":"createRandomItemStyle()","value":14},{"name":"Look for something else","itemStyle":"createRandomItemStyle()","value":15},{"name":"Mothers detail brushes work well enough, but will probably require frequent replacement...","itemStyle":"createRandomItemStyle()","value":16},{"name":"Never again","itemStyle":"createRandomItemStyle()","value":17},{"name":"Work Good","itemStyle":"createRandomItemStyle()","value":18},{"name":"Hi Quality Curt Steel Receiver","itemStyle":"createRandomItemStyle()","value":19},{"name":"Used these on my wheels","itemStyle":"createRandomItemStyle()","value":20},{"name":"It works","itemStyle":"createRandomItemStyle()","value":21},{"name":"Works Great","itemStyle":"createRandomItemStyle()","value":22},{"name":"Mothers Contoured Tire Brush","itemStyle":"createRandomItemStyle()","value":23},{"name":"Love it","itemStyle":"createRandomItemStyle()","value":24},{"name":"Good product and well worth the price.","itemStyle":"createRandomItemStyle()","value":25}];
       // option.series[0].data.push(dd)  ;
       var jj=JSON.parse(returndata);
       for(var j = 0;j<jj.length;j++){
    	   /* alert(jj[j].id);
    	   alert(jj[j].name); */
    	   jj[j].itemStyle=createRandomItemStyle()
    	  }
       var sb= [ {name: "Macys", value: 6181, itemStyle: createRandomItemStyle() }];
       console.log(sb);
       console.log(jj);
      var sb= [ {name: "Macys", value: 6181, itemStyle: createRandomItemStyle() }];
      console.log(sb);
     option.series[0].data = jj;
        // 为echarts对象加载数据 
        myChart.setOption(option); 
    }
);
/* {
    name: "Sam S Club",
    value: 10000,
    itemStyle: {
        normal: {
            color: 'white'
        }
    }
}, */
</script>

</html>

后台返回的数据格式
[{“name”:“I love my Mother’s Brushes”,“value”:5},{“name”:“To big a head”,“value”:6},{“name”:“Eh”,“value”:7},{“name”:“gets the job done”,“value”:8},{“name”:“mini firefighter’s hose”,“value”:9},{“name”:“great car wash”,“value”:10},{“name”:“Works well”,“value”:11},{“name”:“Real value”,“value”:12},{“name”:“Makes my RV happy”,“value”:13}]