热刺爬取——词云

　　今天完成了词云数据的完善，对每一个词都爬取了其相关的点赞数和分享数，另外在网上找了一些词云的可视化展示，在网上找了相关的echarts的js代码以及相关你的内容。
参考了网上的一些博客。找了一些资料最终完成了相关词云的可视化展示，但是还是有一些细节没做好。
源代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./layui/css/layui.css"  >    
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
<style>
.span {
    font-size: 20px;
    font-family: FangSong; 仿宋;
    top: 5px;
}
</style>
</head>
<body>
    <%
        String data = (String) request.getAttribute("ciyundata");
    %>
          
    <div id="conditionarea" align="center">
    <div class="layui-form-item">
     <div class="layui-inline">
     <label class="layui-form-inline">分类规则</label>
      <select style="width:120px;height:36px;"  name="interest" id="interest" lay-filter="aihao">
        <option value="desc_likecount" selected="">点赞次数</option>
        <option value="desc_share">分享次数</option>
      </select>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">范围</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" id="price_min" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" id="price_max" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
    </div>
    <button type="button" class="layui-btn layui-btn-normal" style="top:-2px;" onclick="Show()">展示</button>
  </div>

    </div>
    <div id="main" style="width: 800px; height: 500px"></div>
    <script>
    function Show(){
        var interest=document.getElementById("interest").value;
        var price_min=document.getElementById("price_min").value;
        var price_max=document.getElementById("price_max").value;
        var sql=price_max-price_min;
        var search="limit "+price_min+","+sql;
        var url="WordServle?method=showword&sql="+search+"&table="+interest;
        if(sql<=0)alert("范围输入错误");
        else window.location.href = url;
    }
        var ciyundata =    <%=data%>
        onload = function() {
            var data = {
                value : ciyundata,
                //词云形状图片base64编码
                image : "data:image/png;base64,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"
            }
            var myChart = echarts.init(document.getElementById('main'));
            //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
            var maskImage = new Image();
            maskImage.src = data.image

            maskImage.onload = function() {
                myChart.setOption({
                    backgroundColor : '#fff',
                    tooltip : {
                        show : false
                    },
                    series : [ {
                        type : 'wordCloud',
                        gridSize : 1,
                        sizeRange : [ 12, 55 ],
                        rotationRange : [ -45, 0, 45, 90 ],
                        maskImage : maskImage,
                        textStyle : {
                            normal : {
                                color : function() {
                                    return 'rgb('
                                            + Math.round(Math.random() * 255)
                                            + ', '
                                            + Math.round(Math.random() * 255)
                                            + ', '
                                            + Math.round(Math.random() * 255)
                                            + ')'
                                }
                            }
                        },
                        left : 'center',
                        top : 'center',
                        // width: '96%',
                        // height: '100%',
                        right : null,
                        bottom : null,
                        // width: 300,
                        // height: 200,
                        // top: 20,
                        data : data.value
                    } ]
                })
            }

        }
    </script>
</body>
</html>
View Code
今天完成了简单的展示，明天将完成信息的列表展示，以及做一些补充。
今天的效果图。（词云形状可以更改）。
posted @ 2020-02-15 20:41 九离阅读(300) 评论(0) 收藏举报
刷新页面返回顶部
九离

热刺爬取——词云

公告
