<script type="text/javascript">
$(function(){
$("#product0").myScroll({
visible:7,
scroll:7,
speed:1000
});
})
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
require.config({
paths:{
echarts:'JS/echarts',
'echarts/chart/bar' : 'JS/echarts-map',
'echarts/chart/line': 'JS/echarts-map',
'echarts/chart/map' : 'JS/echarts-map'
}
});
var constMaxRadius = 15;
var constMinRadius = 1;
function getNLs(option1,option2,option3,option4){
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function(ec) {
//加载溯源数据
$.post("getResultTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
//--- 加载动态数据 ---
var myChart = ec.init(document.getElementById('middle'));
$.each(data.list,function(i,v){
if(v.pid==null||v.pid==''||v.pid==0){
option1.series[0].nodes.push({name:v.name,value:15,id:v.id,depth:0,category:1});
}else{
option1.series[0].nodes.push({name:v.name,value:15,id:v.id,depth:1,category:0});
option1.series[0].links.push({source:v.parentIndex,target:v.sinaIndex,weight:1});
}
});
/**
$.each(data.list,function(i,v){
if(v.pid != null && v.pid != 0 ){
option1.series[0].links.push({source:v.parentIndex,target:v.sinaIndex,weight:1});
}
});
*/
myChart.setOption(option1);
},"json");
//加载转发量时间分布数据
$.post("getTimeCountTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
//--- 加载动态数据 ---
var timeChart = ec.init(document.getElementById('time_right'));
$.each(data.list,function(i,v){
option2.xAxis[0].data.push(v.count_date);
option2.series[0].data.push(v.count);
});
timeChart.setOption(option2);
},"json");
//加载转发的详细信息(男女,大V,直接转发(未评论),单次转发(同一个原创只转发一次))
$.post("getPieCountTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
var detailChart = ec.init(document.getElementById('detail'));
var male = Math.round((data.maleNum/data.allNum)*100);
var vip = Math.round((data.vipNum/data.allNum)*100);
var direct = Math.round((data.directNum/data.allNum)*100);
var single = Math.round((data.singleNum/data.allNum)*100);
option3.series[0].data.push( {name:'男士', value:male, itemStyle : labelBottom}, {name:'女士比例', value:100-male,itemStyle : labelTop});
option3.series[1].data.push( {name:'其他', value:100-vip, itemStyle : labelBottom}, {name:'V', value:vip,itemStyle : labelTop});
option3.series[2].data.push( {name:'其他', value:100-direct, itemStyle : labelBottom}, {name:'直接转发', value:direct,itemStyle : labelTop});
option3.series[3].data.push( {name:'其他', value:100-single, itemStyle : labelBottom}, {name:'单次转发', value:single,itemStyle : labelTop});
detailChart.setOption(option3);
},"json");
//加载转发量地域分布
$.post("getProvinceReportsCountTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
var chainMapChart = ec.init(document.getElementById('china_map'));
$.each(data.list,function(i,v){
option4.series[0].data.push({name: v.provinceName,value: v.repostsCount});
});
option4.dataRange.max=data.max;
chainMapChart.setOption(option4);
},"json");
});
}
//溯源转发图
var traceOption = {
title : {
text: '溯源',
subtext: '数据来自新浪微博',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : false,
restore : true,
saveAsImage : true
}
},
legend: {
x: 'left',
data:['源作者','作者']
},
series : [
{
type:'force',
name : "Force tree",
categories : [
{
name: '作者',
itemStyle: {
normal: {
color : '#ff7f50'
}
}
},
{
name: '源作者',
itemStyle: {
normal: {
color : '#46B024'
}
}
}
],
itemStyle: {
normal: {
label: {
show: false,
position:'outer',
textStyle: {
color: '#502000',
fontSize:12
}
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.6)',
lineWidth : 1
}
},
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
nodeStyle : {
r: 20
},
linkStyle : {}
}
},
minRadius : constMinRadius,
maxRadius : constMaxRadius,
density : 5,
attractiveness: 1.2,
nodes : [],
links : []
}
]
};
//时间分布
var timeOption = {
title : {
text: '转发量时间走势',
subtext: '数据来自新浪微博'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['转发量']
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : []
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: ''
},
splitArea : {show : true}
}
],
series : [
{
name:'转发量',
type:'line',
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[]
}
]
};
// 详细数据
var labelTop = {
normal : {
label : {
show : true,
position : 'center',
textStyle: {
baseline : 'bottom'
}
},
labelLine : {
show : false
}
}
};
var labelBottom = {
normal : {
color: '#ccc',
label : {
show : true,
position : 'center',
formatter : function(a,b,c){return 100 - c + '%'},
textStyle: {
baseline : 'top'
}
},
labelLine : {
show : false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
};
var radius = [70, 90];
detailOption = {
legend: {
x : 'center',
y : 'center',
data:[
'女士比例','V','直接转发','单次转发'
]
},
title : {
text: '转发详细信息',
subtext: '数据来自新浪微博',
x: 'center'
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
dataView : {readOnly: false},
mark : true,
restore : true,
saveAsImage : true
}
},
series : [
{
type : 'pie',
center : ['25%', '30%'],
radius : radius,
data : []
},
{
type : 'pie',
center : ['75%', '30%'],
radius : radius,
data : []
},
{
type : 'pie',
center : ['25%', '75%'],
radius : radius,
data : []
},
{
type : 'pie',
center : ['75%', '75%'],
radius : radius,
data : []
}
]
};
provinceOption = {
title : {
text: '转发分布',
subtext: '数据来自新浪微博',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['转发量']
},
dataRange: {
min: 0,
max: 2500,
text:['高','低'], // 文本,默认为数值文本
color:['#0D93FC','#B2DEFF'],
calculable : true,
textStyle: {
color: 'black'
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : true,
dataView : {readOnly: false},
restore : true,
saveAsImage : true
}
},
series : [
{
name: '转发量',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},// for legend
emphasis:{label:{show:true}}
},
data:[ ]
}
]
};
//调用接口
getNLs(traceOption,timeOption,detailOption,provinceOption);
</script>
</head>
<body>
<div class="main">
<div class="top">
<div class="top_left">
<div class="author_src">
<img class="header_image" src="${rootContent.sinaUser.profileImageUrl}" title="作者" />
<p><a href="${rootContent.blogUrl}"><img class="sina_enter" src="<%=basePath%>pages/blogtrace/images/sinapic.png" /></a></p>
<div class="author_info">
<div class="root_name">
<a href="http://weibo.com/u/${rootContent.sinaUser.id}">${rootContent.sinaUser.screenName}<c:if test="${rootContent.sinaUser.verified}"><img src="<%=basePath%>pages/blogtrace/images/icon_v.png"/></c:if></a>
</div>
<div> <c:if test="${rootContent.sinaUser.gender=='m'}"><img src="<%=basePath%>pages/blogtrace/images/icon_man.png"/></c:if>
<c:if test="${rootContent.sinaUser.gender=='f'}"><img src="<%=basePath%>pages/blogtrace/images/icon_woman.png"/></c:if> ${rootContent.sinaUser.location}</div>
<div>关注:${rootContent.sinaUser.friendsCount} 粉丝:${rootContent.sinaUser.followersCount} 微博:${rootContent.sinaUser.statusesCount}</div>
<div class="root_description">简介:<br />${rootContent.sinaUser.description}</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="top_right">
<span class="img_right"><img style="vertical-align:middle;" title="look" border="1px" width="120px" src="<c:if test="${rootContent.original_pic==null}"><%=basePath%>pages/blogtrace/images/logo.png</c:if>${rootContent.original_pic}" title="look" /></span>
<div class="text" >${rootContent.text}</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="middle" id="middle">
</div>
<div class="key_user" style="text-align:center;">
<div class="myScroll" id="product0">
<!-- <p class="myPrevBtn">前进</p>
<p class="myNextBtn">后退</p> -->
<a id="userListPrev" class="myPrevBtn" href="javascript:void(0);"></a>
<div class="myBlock">
<ul id="ulUserList">
<c:forEach items="${keyUsers}" var="key">
<li>
<div class="ulist_licontent">
<div class="ullist_img"><a href="javascript:void(0)"><img src="${key.sinaUser.profileImageUrl}" alt="${key.sinaUser.screenName}"/></a></div>
<div class="ulist_title"><a href="http://weibo.com/u/${key.sinaUser.id}">${key.sinaUser.screenName}<c:if test="${key.sinaUser.verified}"><img src="<%=basePath%>pages/blogtrace/images/icon_v.png"/></c:if></a></div>
<div class="ullist_count">被转发:${key.reposts_count}次</div>
</div>
</li>
</c:forEach>
</ul>
</div>
<a id="userListNext" class="myNextBtn" href="javascript:void(0);"></a>
<div style="clear:both;"></div>
</div>
</div>
<div id="time_count" class="time_count">
<div class='time_left'></div>
<div class="time_right" id="time_right"></div>
</div>
<div class="detail" id = "detail">
</div>
<div class="china_map" id="china_map">
</div>
<div class="tc" style="display: none;" id="box10">
</div>
</div>
</body>
</html>
$(function(){
$("#product0").myScroll({
visible:7,
scroll:7,
speed:1000
});
})
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
require.config({
paths:{
echarts:'JS/echarts',
'echarts/chart/bar' : 'JS/echarts-map',
'echarts/chart/line': 'JS/echarts-map',
'echarts/chart/map' : 'JS/echarts-map'
}
});
var constMaxRadius = 15;
var constMinRadius = 1;
function getNLs(option1,option2,option3,option4){
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function(ec) {
//加载溯源数据
$.post("getResultTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
//--- 加载动态数据 ---
var myChart = ec.init(document.getElementById('middle'));
$.each(data.list,function(i,v){
if(v.pid==null||v.pid==''||v.pid==0){
option1.series[0].nodes.push({name:v.name,value:15,id:v.id,depth:0,category:1});
}else{
option1.series[0].nodes.push({name:v.name,value:15,id:v.id,depth:1,category:0});
option1.series[0].links.push({source:v.parentIndex,target:v.sinaIndex,weight:1});
}
});
/**
$.each(data.list,function(i,v){
if(v.pid != null && v.pid != 0 ){
option1.series[0].links.push({source:v.parentIndex,target:v.sinaIndex,weight:1});
}
});
*/
myChart.setOption(option1);
},"json");
//加载转发量时间分布数据
$.post("getTimeCountTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
//--- 加载动态数据 ---
var timeChart = ec.init(document.getElementById('time_right'));
$.each(data.list,function(i,v){
option2.xAxis[0].data.push(v.count_date);
option2.series[0].data.push(v.count);
});
timeChart.setOption(option2);
},"json");
//加载转发的详细信息(男女,大V,直接转发(未评论),单次转发(同一个原创只转发一次))
$.post("getPieCountTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
var detailChart = ec.init(document.getElementById('detail'));
var male = Math.round((data.maleNum/data.allNum)*100);
var vip = Math.round((data.vipNum/data.allNum)*100);
var direct = Math.round((data.directNum/data.allNum)*100);
var single = Math.round((data.singleNum/data.allNum)*100);
option3.series[0].data.push( {name:'男士', value:male, itemStyle : labelBottom}, {name:'女士比例', value:100-male,itemStyle : labelTop});
option3.series[1].data.push( {name:'其他', value:100-vip, itemStyle : labelBottom}, {name:'V', value:vip,itemStyle : labelTop});
option3.series[2].data.push( {name:'其他', value:100-direct, itemStyle : labelBottom}, {name:'直接转发', value:direct,itemStyle : labelTop});
option3.series[3].data.push( {name:'其他', value:100-single, itemStyle : labelBottom}, {name:'单次转发', value:single,itemStyle : labelTop});
detailChart.setOption(option3);
},"json");
//加载转发量地域分布
$.post("getProvinceReportsCountTrace",{time:Math.random(),sinaTaskId:'${sinaTaskId}'},function(data){
var chainMapChart = ec.init(document.getElementById('china_map'));
$.each(data.list,function(i,v){
option4.series[0].data.push({name: v.provinceName,value: v.repostsCount});
});
option4.dataRange.max=data.max;
chainMapChart.setOption(option4);
},"json");
});
}
//溯源转发图
var traceOption = {
title : {
text: '溯源',
subtext: '数据来自新浪微博',
x:'right',
y:'bottom'
},
tooltip : {
trigger: 'item',
formatter: '{a} : {b}'
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : false,
restore : true,
saveAsImage : true
}
},
legend: {
x: 'left',
data:['源作者','作者']
},
series : [
{
type:'force',
name : "Force tree",
categories : [
{
name: '作者',
itemStyle: {
normal: {
color : '#ff7f50'
}
}
},
{
name: '源作者',
itemStyle: {
normal: {
color : '#46B024'
}
}
}
],
itemStyle: {
normal: {
label: {
show: false,
position:'outer',
textStyle: {
color: '#502000',
fontSize:12
}
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.6)',
lineWidth : 1
}
},
emphasis: {
label: {
show: false
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
},
nodeStyle : {
r: 20
},
linkStyle : {}
}
},
minRadius : constMinRadius,
maxRadius : constMaxRadius,
density : 5,
attractiveness: 1.2,
nodes : [],
links : []
}
]
};
//时间分布
var timeOption = {
title : {
text: '转发量时间走势',
subtext: '数据来自新浪微博'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['转发量']
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true,
saveAsImage : true
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : []
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: ''
},
splitArea : {show : true}
}
],
series : [
{
name:'转发量',
type:'line',
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[]
}
]
};
// 详细数据
var labelTop = {
normal : {
label : {
show : true,
position : 'center',
textStyle: {
baseline : 'bottom'
}
},
labelLine : {
show : false
}
}
};
var labelBottom = {
normal : {
color: '#ccc',
label : {
show : true,
position : 'center',
formatter : function(a,b,c){return 100 - c + '%'},
textStyle: {
baseline : 'top'
}
},
labelLine : {
show : false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
};
var radius = [70, 90];
detailOption = {
legend: {
x : 'center',
y : 'center',
data:[
'女士比例','V','直接转发','单次转发'
]
},
title : {
text: '转发详细信息',
subtext: '数据来自新浪微博',
x: 'center'
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
dataView : {readOnly: false},
mark : true,
restore : true,
saveAsImage : true
}
},
series : [
{
type : 'pie',
center : ['25%', '30%'],
radius : radius,
data : []
},
{
type : 'pie',
center : ['75%', '30%'],
radius : radius,
data : []
},
{
type : 'pie',
center : ['25%', '75%'],
radius : radius,
data : []
},
{
type : 'pie',
center : ['75%', '75%'],
radius : radius,
data : []
}
]
};
provinceOption = {
title : {
text: '转发分布',
subtext: '数据来自新浪微博',
x:'center'
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
x:'left',
data:['转发量']
},
dataRange: {
min: 0,
max: 2500,
text:['高','低'], // 文本,默认为数值文本
color:['#0D93FC','#B2DEFF'],
calculable : true,
textStyle: {
color: 'black'
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : true,
dataView : {readOnly: false},
restore : true,
saveAsImage : true
}
},
series : [
{
name: '转发量',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},// for legend
emphasis:{label:{show:true}}
},
data:[ ]
}
]
};
//调用接口
getNLs(traceOption,timeOption,detailOption,provinceOption);
</script>
</head>
<body>
<div class="main">
<div class="top">
<div class="top_left">
<div class="author_src">
<img class="header_image" src="${rootContent.sinaUser.profileImageUrl}" title="作者" />
<p><a href="${rootContent.blogUrl}"><img class="sina_enter" src="<%=basePath%>pages/blogtrace/images/sinapic.png" /></a></p>
<div class="author_info">
<div class="root_name">
<a href="http://weibo.com/u/${rootContent.sinaUser.id}">${rootContent.sinaUser.screenName}<c:if test="${rootContent.sinaUser.verified}"><img src="<%=basePath%>pages/blogtrace/images/icon_v.png"/></c:if></a>
</div>
<div> <c:if test="${rootContent.sinaUser.gender=='m'}"><img src="<%=basePath%>pages/blogtrace/images/icon_man.png"/></c:if>
<c:if test="${rootContent.sinaUser.gender=='f'}"><img src="<%=basePath%>pages/blogtrace/images/icon_woman.png"/></c:if> ${rootContent.sinaUser.location}</div>
<div>关注:${rootContent.sinaUser.friendsCount} 粉丝:${rootContent.sinaUser.followersCount} 微博:${rootContent.sinaUser.statusesCount}</div>
<div class="root_description">简介:<br />${rootContent.sinaUser.description}</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="top_right">
<span class="img_right"><img style="vertical-align:middle;" title="look" border="1px" width="120px" src="<c:if test="${rootContent.original_pic==null}"><%=basePath%>pages/blogtrace/images/logo.png</c:if>${rootContent.original_pic}" title="look" /></span>
<div class="text" >${rootContent.text}</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="middle" id="middle">
</div>
<div class="key_user" style="text-align:center;">
<div class="myScroll" id="product0">
<!-- <p class="myPrevBtn">前进</p>
<p class="myNextBtn">后退</p> -->
<a id="userListPrev" class="myPrevBtn" href="javascript:void(0);"></a>
<div class="myBlock">
<ul id="ulUserList">
<c:forEach items="${keyUsers}" var="key">
<li>
<div class="ulist_licontent">
<div class="ullist_img"><a href="javascript:void(0)"><img src="${key.sinaUser.profileImageUrl}" alt="${key.sinaUser.screenName}"/></a></div>
<div class="ulist_title"><a href="http://weibo.com/u/${key.sinaUser.id}">${key.sinaUser.screenName}<c:if test="${key.sinaUser.verified}"><img src="<%=basePath%>pages/blogtrace/images/icon_v.png"/></c:if></a></div>
<div class="ullist_count">被转发:${key.reposts_count}次</div>
</div>
</li>
</c:forEach>
</ul>
</div>
<a id="userListNext" class="myNextBtn" href="javascript:void(0);"></a>
<div style="clear:both;"></div>
</div>
</div>
<div id="time_count" class="time_count">
<div class='time_left'></div>
<div class="time_right" id="time_right"></div>
</div>
<div class="detail" id = "detail">
</div>
<div class="china_map" id="china_map">
</div>
<div class="tc" style="display: none;" id="box10">
</div>
</div>
</body>
</html>