前端 繪製世界地圖
<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);
}