lines：
[{
coords: [目录坐标, 应用坐标1]
}, {
coords: [目录坐标, 应用坐标2]
}, {
coords: [目录坐标, 应用坐标3]
}, {
coords: [目录坐标, 应用坐标n]
}]
effectScatter:
[{
name: '应用1',
value: geoCoordMap['应用1'].concat(data.应用1),
symbol: 'image:'+weixin
}, {
name: '应用2',
value: geoCoordMap['应用2'].concat(data.应用2),
symbol: 'image:'+weixin
}, {
name: '消费者2',
value: geoCoordMap['消费者2'].concat(data.消费者2),
symbol: 'image://'+weibo
}, {
后台数据封装：
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
<title>服务监控</title>
<meta name="decorator" content="default" />
<style>
.widget-head-color-box{
background-color: #1b1b1b;
}
</style>
<script type="text/javascript" src="${ctxStatic}/echarts-3/echarts.js"></script>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-sm-12">
<div class="widget-head-color-box" style="padding:5px; color:#fff; border:solid 1px #999;">
<div id="serviceChart1" style="height: 1000px;"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" >
var data = null;
var serviceChart1 = null;
// var tabURL = "${ctx}/monitor/businessMonitor/tabData?dirId=${directory.id}";
$(document).ready(function() {
var serviceChart1 = echarts.init(document.getElementById('serviceChart1'));
var uploadedDataURL = "${ctxStatic}/echarts-3/asset/data-1479697763933-ByhDrJlGx.json";
var businessDataURL = "${ctx}/monitor/businessMonitor/businessData?dirId=${directory.id}"
$.get(uploadedDataURL, function(data1) {
echarts.registerMap('wuhan', data1);
var result = $.ajax({url:businessDataURL,async:false});
var datas = {};
var lines = [];
var effectScatter = [];
var pName = "";
if(result.status == 200){
datas = JSON.parse(result.responseText);
if(datas != null && typeof datas != 'undefined'){
lines = datas.lines;
effectScatter = datas.effectScatter;
pName = datas.pName;
}
}
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
option = {
backgroundColor: '#1b1b1b',
title: {
text: pName+"适配器消费关系图",
left: '-2',
top: '10px',
textStyle: {
color: '#ffffff',
fontFamily: '微软雅黑',
fontWeight: 'lighter',
fontSize: 18
}
},
tooltip: {
trigger: 'item',
formatter: function(o) {
return o.name + "</br>成功：" + o.value[2]+"; 失败："+ o.value[3];
},
textStyle: {
color: '#0D6690'
}
},
geo: {
map: 'wuhan',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
color:'rgba(22,22,2,0)',
areaColor:'rgba(22,22,2,0)',
borderColor:'rgba(22,22,2,0)'
},
emphasis: {
color:'rgba(22,22,2,0)',
areaColor:'rgba(22,22,2,0)',
borderColor:'rgba(22,22,2,0)'
}
}
},
series: [{
type: 'lines',
zlevel: 1,
scaleLimit:{min:0.8,max:1.1},
effect: {
show: true,
period: 3,
trailLength: 0.1,
color: '#A6C84C',
symbolSize: 8
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 0,
/* curveness: 0.2 */
}
},
data: lines
}, {
type: 'lines',
zlevel: 2,
scaleLimit:{min:0.8,max:1.1},
effect: {
show: true,
period: 3,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 1,
opacity: 0.4,
/* curveness: 0.2 */
}
},
data: lines
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
scaleLimit:{min:0.8,max:1.1},
rippleEffect: {
period: 4,
scale: 2.5,
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: '22',
itemStyle: {
normal: {
color: '#fff',
}
},
data: effectScatter
}]
};
serviceChart1.setOption(option);
window.οnresize=serviceChart1.resize;
var currentIndex = -1;
var timeTicket = setInterval(function() {
var dataLen = option.series[2].data.length;
currentIndex = (currentIndex + 1) % dataLen;
// 显示 tooltip
serviceChart1.dispatchAction({
type: 'showTip',
seriesIndex: 2,
dataIndex: currentIndex
});
}, 3000);
});
/*
var recordArry = getData(tabURL);
$("#records").empty();
var html = '';
for (i in recordArry) {
html += '<tr>';
html += '<td>' + recordArry[i].appName + '</td>';
html += '<td>' + recordArry[i].applyName + '</td>';
html += '<td>' + recordArry[i].success + '</td>';
html += '<td>' + recordArry[i].failure + '</td>';
html += '</tr>';
}
$("#records").html(html); */
});
</script>
<script type="text/javascript">
/*
function getData(tabUrl) {
var result = $.ajax({url:tabUrl,async:false});
var datas = {};
var dataArry = [];
if(result.status == 200){
datas = JSON.parse(result.responseText);
if(datas != null && typeof datas != 'undefined'){
dataArry = datas.data;
return dataArry;
}
}
} */
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
