热刺爬取——词云
今天完成了词云数据的完善，对每一个词都爬取了其相关的点赞数和分享数，另外在网上找了一些词云的可视化展示，在网上找了相关的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,iVBORw0KGgoAAAANSUhEUgAAAV4AAAFeCAYAAADNK3caAAAKCklEQVR4nO3d73GbSACH4V8JlKASVAIluARKcAnqwCVQgkugBJVACSrh7gNS4svFtqw/LAvPM/POzWRymWQRG7IsKAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWK0myT7Jy7kuyWuSQ5K3c/25t/OPH84/rzv/P22S3Vy/YYAafJxcXzNNosckpyT/PLjh/OsfMk3M7bP/cABL0GSa8A553gT7097Pv5/2SX9mgNm1mSa2IcuYaE3EwCrt8/uqtvREek9jpvXj3SMHB+BRmkxrp7VPtp81ZFqHBiiuzXTTqoZlhEf1nukvGYBZtVnv1e21HWMCBmbQxoRrAgZm0caEawIGZtHGhHvLBLy/YayBjWsybaXa0k2zR/f241EHNqvNtIe19MS1hk6x/AB8YZ9pq1TpyWqNHeNBDOAPXSwrzJGHMIBfa7mlJ6Qt1V91ZIBV2seOhVLZ+QAb1MXSwhKy9AAbYGlhefVfHjGgak2mk7z0RKP/N3xx3IBKNbFVbOkdPz16QHVMuvV0PB8voGL7eAqttk6x4wGqZdKtN5MvVGgXk27tneIxY6hGk+kueemJQ/c3xpovLJ4baevLbgdYMJPuehsCLFKf8hOETL6wGa8pPzHo+Xm3AyzEPl54s6VsM4PCmni149Y6xU4HKKpP+YlA8zcEKMK67raz3gszs66rf2K9F2Y1pPxJr/KNAWZhiUEfs+QAT9bEEoP+m5fpwJP1KX+ia3m9B3iKNuVPcC23lwAP5UEJfdcpwEO5oaZrOgR4iCa+TULX5aoXHsTVrn6S7WVwJ1e7+mmueuFOXcqfyKqvLsDN7GTQLbnqhRu9pPwJrHrrAvzYkPInr+rNVS/80D7lT1zV3y7A1Q4pf9Kq/voAVxtT/qRV/VlugCu5qaZH1gX4Vp/yJ6vWUx/gS150rkfn6+DhG5YZ9Iy6AJ/qU/4k1fryDRXwhTHlT1KtL7sb4BMemtAz2wX4ny7lT06tN+/phb94T/mTU+vNOi/8xZjyJ6fWm3Ve+IP1Xc3RLsAvXcqflFp/1nnhA19oqTl6C/CLG2uaIzfY4IMx5U9KrT832OCD0iektpMX5kDsaNC87QOkTfmTUdupC2BHg2btEMAXW2rW+gDewatZs6UMYuLVvJl4IR6e0LwNAUy8mrVjgAwpfzJqO40BPC6sWfPYMFVpMj3102b6GvaXTJvRXzNtCXs7//dw/rHuXHtu98mvO6b8yajtZOJlkfaZJtXXTJPpkMdOjmOmdd3LRP3IX1v6LhMvi7DPNMn2mT6UpU8M6ZmZeCmiyXRF22e6w1v6RJDmbAzMpMm0ztrHVa223Rh4sjbTWuqY8h94aQmd8vum7y7wIJerW8sI0nWNmW4iv2e64dsGrmTClR7bZffNS3xzBX9oMv3TyYQrPbf3TDuATMIb18b6rVSiy7LELmzGPl4uIy2l91gXXrUm05qTLWHS8hriO91Wp41lBamWDqFql6vc0h8kST9rjCvgKu3jfbVS7R1jAq5GG2u50poaYhfEYllakNbda1iUJraJSVvoGFe/i9DEeq60tVz9FrSPrWLSVhvC7Ey6ko6Z5gJmsI+dC5KmTvHo8dOZdCX9Leu+T2LSlfRVb+GhmljTlfR9Q3gIW8Yk/aQh3MXDEZJuaQg38xiwpFsbwo91KX/gJNVdH662ix0Mkh5TF77lZpqkR9eGL1nXlfToTvF48adeUv4ASVpnp0z/ouaDJtNLL0ofHEnrbQj/cUj5gyJp/b2EJHYxSJqvU3yTRRJPp0mat2M2zg01SSXa7Ksk3VCTVLJdNqhL+YGXtN3eszGudiUtoU3tcuhSfsAlacyGuNqVtJS6bICdDJKW1CkbMKT8QEvSx1a9vWyf8gMsSX+26qveQ8oPsCT9rS4r5GvaJS25MSvkppqkpbe6fb1ehiNp6a3qabYmXv0oqY52WYnXlB9MSbqm1Wwts8wgqZaGrMSY8oMpSde2S+U8NCGptqpfbrC+K6m2xlTO+q6kGmtSsTHlB1CSflqbSlnflVRrh1SqS/nBk6RbqvaNZW6sSaq5Ktd53ViTVHNtKjSk/MBJ0q1VuZ93TPmBk6Rbq+5tZbuUHzRJuqchlWlTftAk6Z6q29ngGyckraGqdjZ0KT9gknRv+1TEHl5Ja6hLRUy8ktZQVVvKDik/YJJ0b1VNvG8pP2CSdG+HVKRP+QGTpHt7S0X6lB8wSbq3PhWx1CBpDVX12PAh5QdMku7NxCtJM9enIvbxSlpDfSrSpfyASdK9VbWrwUtyJK2hQyrSpvyASdK9VfXkWpPyAyZJ99alMqeUHzRJuqeXVOaY8oMmSffUpjJ9yg+aJN3TLpXx2LCkmhtTIVvKJNXckArtU37gJOnW+lTKzgZJtVbVU2sfDSk/eJJ0S9VtJbs4pPzgSdIt7VIpT7BJqrFjKmedV1JtVbu+e9Gn/CBK0k+qdn33wkvRJdXWLpWzziuppqpf3714T/nBlKRrOmQlupQfTEm6pl1WwnKDpBoasjJ9yg+qJH3VISvjbWWSltwpK1pm+GhM+cGVpL/1npXqUn5wJelvVf/QxFfGlB9gSfrYavbufqZL+UGWpI91WbkmrnolLacx07y0eoeUH2xJ+icr3EL2mSZeFympfKds5Gr3okv5QZe07Q7ZoGPKD7ykbTZmY1e7F7uUH3xJ22zV+3a/06f8AZC0rVb7lNq1bC+TNGenJPvgBTqSZusQfvEtFZKe3TEbvaH2GUsOkp6ZJYZP7FP+4EhaZ6/hU13KHyBJ66oP37LeK+lRjbGue5UmnmqTdH+nJG24mpttku7plI0/nXarXbzFTNJtuZl2BzsdJP20t3C3NuUPpKQ66uNm2sO0KX9AJS2795h0H65N+QMraZn1Mek+jTVfSX/2FpPu0+1jt4OkKTfSZrSLhyykrWfSLaCJx4ulLXbK9F4XCjqk/AdB0jwd4/WOi7GPR4yltTfETbTFsfQgrbNTPAK8eK8p/0GR9JiGWFqoRhNfHS/V3OUq19JChaz9SvU1ZNoySuUsP0jL7xhruavTxNYzaYlZVtgIV8BS+Uy4G2UCluZviAmXTN/NZA+w9LxOsTWML7zGC3ikR3XMdG9lF7jCPtMHZkj5D69US5cr20Nc3fIAL5k+TK6Gpd+dMp0T75neGGbdlqd6ybQs8Zbpb/gx5U8C6Zl9nGRfM13RmmhZhDbT3/xdpg/n4Vx/7l1acH2mi4nXc21+T7AmWQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4rn8BMx27OvTYQ/cAAAAASUVORK5CYII=" } 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>
今天完成了简单的展示，明天将完成信息的列表展示，以及做一些补充。
今天的效果图。（词云形状可以更改）。
