view.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>可视化图</title> <link href="favicon.ico" rel="shortcut icon"> <script src="../static/js/jquery.min.js"></script> <script src="../static/js/echarts.min.js"></script> <script src="../static/js/echart3.js"></script> <script src="../static/js/echarts-wordcloud.js"></script> <style> #main{ 100%; height: 1500px; border:1px solid #ddd; float:center; } </style> </head> <div align="center"><a target='_blank' href="/">论文查询</a></div> <body> <div id="main" align="center" style="height:300%;"> </div> <div id="zhuzhuang" style="height:500%;"> </div> <div id="box" style=" 600px;height: 600px;"></div> <script type="text/javascript"> var dt; var hzb=new Array(0); var zzb=new Array(0); var mydata = new Array(0); $.ajax({ url : "/c2", async : true, type : "POST", data : { }, dataType : "json", success : function(data) { dt = data; for (var i = 0; i < 10; i++) { var d = {}; d["name"] = dt['keyword'][i]; d["value"] = dt['value'][i]; mydata.push(d); reslist(mydata); hzb.push(dt['keyword'][i]); zzb.push(dt['value'][i]); } var myChart = echarts3.init(document.getElementById('main')); //设置点击效果 myChart.setOption({ title: { text: '' }, tooltip: {}, series: [{ type : 'wordCloud', //类型为字符云 shape:'smooth', //平滑 gridSize : 8, //网格尺寸 size : ['50%','50%'], //sizeRange : [ 50, 100 ], rotationRange : [-45, 0, 45, 90,60,16], //旋转范围 textStyle : { normal : { fontFamily:'微软雅黑', color: function() { return 'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')' } }, emphasis : { shadowBlur : 5, //阴影距离 shadowColor : '#333' //阴影颜色 } }, left: 'center', top: 'center', right: null, bottom: null, '100%', height:'100%', data:mydata }] }); var zhudiv=echarts3.init(document.getElementById('zhuzhuang')); option = { xAxis: { type: 'category', data: hzb }, yAxis: { type: 'value' }, series: [{ data: zzb, itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: 'black' } } }, }, type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } }] }; option && zhudiv.setOption(option); //初始化ehcharts实例 var myline=echarts.init(document.getElementById("box")); //指定图表的配置项和数据 var option2={ //标题 title:{ text:'热词统计' }, //工具箱 //保存图片 toolbox:{ show:true, feature:{ saveAsImage:{ show:true } } }, //图例-每一条数据的名字叫销量 legend:{ data:['销量'] }, //x轴 xAxis:{ data:hzb }, //y轴没有显式设置，根据值自动生成y轴 yAxis:{}, //数据-data是最终要显示的数据 series:[{ name:'销量', type:'line', itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: 'black' } } }, }, data:zzb }] }; //使用刚刚指定的配置项和数据项显示图表 myline.setOption(option2); }, error : function() { alert("请求失败"); }, }); </script> <table id="restable" border="1" style="height:50%;50%;" > </table> <script> function reslist(mydata){ var tab=document.getElementById("restable"); var str="<tr><td width='50%'>关键词</td><td width='50%'>次数</td></tr>"; var i=0; for(n in mydata){ str=str+"<tr><td>"+mydata[i]['name']+"</td><td>"+mydata[i]['value']+"</td></tr>"; i++; } tab.innerHTML = str; } </script> </body> </html>