<div class="col-xxl-6 col-lg-6 col-md-6" style="margin-bottom: -6px">
<div class="panel " style="margin-left: -5px; width: 102%;">
<div class="panel-heading">
<h3 class="panel-title">服务器分布</h3>
</div>
<div class="panel-body ">
<div class="servermap boxheight " id="servermap"></div>
</div>
</div>
</div>
<script type="text/javascript" src="../../static/js/lib/echarts.min.js"></script>
<script type="text/javascript" src="../../static/js/lib/world.js"></script>
$.ajax({
url:'/textsearch/get_third_search_result',
data:{
'id': _id,
'domain_name': domain_name,
},
success:function(dt){
if(dt.success){ //成功
result = dt.result;
var webserver = result.web_server_distribution; //网页服务分布
fnWorldmapserver('servermap',webserver);
}
},error:function(dt){
}
})
function fnWorldmapserver(id,dt){
var data = [];
for(var item in dt){
data.push({
name:dt[item].city,
value:[dt[item].longitude,dt[item].latitude],
total_number:dt[item].total_number
});
var otr = $('<tr></tr>');
otr.html('<td>'+dt[item].country+'</td><td>'+dt[item].city+'</td><td>'+dt[item].total_number+'</td><td>'+dt[item].server_distribution_percent+'</td>')
$('.webserver').append(otr);
}
var series = [];
series.push(
{
name:'网页服务器',
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
period: 4,
brushType: "stroke",
scale: 4
},
symbol: "circle",
itemStyle: {
normal: {
color: '#00bc62',
}
},
zlevel: 1,
data:data
}
);
var myChart = echarts.init(document.getElementById(id));
var option = {
backgroundColor: '#eff3f4',
legend: {
right:20,
bottom:10,
data:['网页服务器']
},
tooltip: {
trigger: "item",
backgroundColor: "#1540a1",
borderColor: "#FFFFCC",
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: "z-index:100",
formatter: function(params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
var total_number = params.data.total_number;
res =
"<span style='color:#fff;'>" +
name +
"</span><br/>话单总数：" +
total_number;
return res;
}
},
geo: {
map: "world",
label: {
emphasis: {
show: false
}
},
roam: true, //是否允许缩放
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "180%",
itemStyle: {
normal: {
color: "#fff", //地图背景色
borderColor: "#08acce" //省市边界线
},
emphasis: {
color: "rgba(37, 43, 61, .1)" //地图块悬浮背景
}
},
},
series: series
};
myChart.setOption(option);
}