词云图 柱状图 折线图 表格的显示
<!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>
<table style=" 1200px;height: 700px;">
<tr>
<td><div id="box" style=" 500px;height: 500px;"></div></td>
<td><div style="background: #00CCFF;height:500px;500px;"><table id="abc" border=""style="font-size:30px;height:500px;500px;font-family:'宋体';text-align:center;color:#CCFFCC" ></table></div></td>
</tr>
</table>
<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 : $('#num').serializeArray(),
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: {//提示框组件
show:true,
trigger: 'item',
formatter:function(params,ticket, callback){//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
return params.name;
}//数据格式化
},
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 = {
tooltip: {//提示框组件
show:true,
trigger: 'item',
formatter:function(params,ticket, callback){//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
return params.name;
}//数据格式化
},
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>
<script>
function reslist(mydata){
var tab=document.getElementById("abc");
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>