<script type="text/javascript" src="<%=basePath%>js/echarts/esl.js"></script>
<script type="text/javascript">
var today=new Date();
var currentDateStart = today.getFullYear()+"-"+ (today.getMonth()+1) +"-"+today.getDate()+' 00:00:00';
var currentDateEnd = today.getFullYear()+"-"+ (today.getMonth()+1) +"-"+today.getDate()+' 23:59:59';
$(document).ready(function(){
// 时间控件
$('#dtStart').datetimebox({
value: currentDateStart,
editable:false,
required: true,
showSeconds:false
});
$('#dtEnd').datetimebox({
value: currentDateEnd,
editable:false,
required: true,
showSeconds:false
});
// 初始给气泡面板赋高度
$('#mainScatter').panel({height:mainTableHeight(),width:mainTableWidth()});
//$('#mainScatter').panel({height:openWindowHeight(0.87),width:openWindowWidth(0.97)});
});
// 执行查询
function searchData(){
// 先校验
var start = $('#dtStart').datetimebox('getValue');
var end = $('#dtEnd').datetimebox('getValue');
//alert(start + "-" +end );
var reg = /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/ ;
if (reg.test(start) && reg.test(end)) {
// 后执行
getScaterData(start,end);
} else {
$.messager.alert('提示','时间格式中有非法字符,请重新选择!','info');
}
}
//清空查询条件
function clearForm(){
$('#dtStart').datetimebox('setValue',currentDateStart);
$('#dtEnd').datetimebox('setValue',currentDateEnd);
//$('#queryForm').form('clear');
}
// 使用echart start
var myScatter;
// 路径配置
require.config({
paths:{echarts:'./js/echarts/echarts',
'echarts/chart/scatter' : './js/echarts/echarts',
'echarts/chart/bar' : './js/echarts/echarts',
'echarts/chart/line': './js/echarts/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/scatter',//
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
myScatter = ec.init(document.getElementById('mainScatter'));
// 标准气泡图 三个值
var optionScatter2 = {
title : {
text: '',
subtext: '',
x:'left',
y:'top'
},
/*tooltip : {
trigger: 'axis',
showDelay : 0,
axisPointer:{
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},*/
tooltip : {
trigger: 'item',//axis item
formatter : function (value) {
return value[0] +' (' + '名称:' + value[2][3] + ')<br/>'
+ '成功率:' + value[2][0] + '(%)<br/> '
+ '交易时长:' +parseFloat( value[2][1]) + '(秒)<br/>'
+ '交易量:' + value[2][2] + '(笔)<br/>' ;
}
},
legend: {
data:['业务1']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
name : '成功率(%)',
type : 'value',
power: 1,//整数精度
//splitNumber: 4,//分割段数 默认5
scale: true,//脱离0值比例,放大聚焦到最终_min,_max区间
max:100,
//min:90,
axisLabel : {
formatter: '{value} %'
}
}
],
yAxis : [
{
name : '交易时长(s)',
type : 'value',
precision: 1,//小数精度
power: 1,
//max:2,
splitNumber: 5,
scale: true,
axisLabel : {
formatter: '{value} s'
}
}
],
series : [
{
name:'业务1',
type:'scatter',
symbolSize: function (value){
// 根据最大的交易量值 来控制气泡半径 (最小 3 最大 40)
return Math.round(3 + value[2] * 40 / maxTotalCount);
},
data: [[0,0,0,'操作a']]//设置一个初始化值,设值为0气泡无大小不会显示,就可以
//itemStyle : { normal: {label : {show: true, position: 'top'}}}
}
]
};
// 为echarts对象加载数据
myScatter.setOption(optionScatter2);
myScatter.hideLoading();
}
);
// 记录最大 的 交易量 值 初始设置为1 不要为 0
var maxTotalCount = 1;
// 执行获取气泡图数据,并给图赋值
function getScaterData(date1,date2) {
//获得图表的options对象
var options = myScatter.getOption();
//var url = getKpiSerivceUrl()+'/service2/scatter.json?dt1='+date1+'&dt2='+date2;
//var url = getKpiSerivceUrl()+'/service2/scatter.json?dt1=2014-06-24 00:00:00&dt2=2014-06-24 23:59:00';
var url = '<%=basePath%>logMonitor/echarts.do?dt1='+date1+'&dt2='+date2;
$.ajax({
type: 'get',
url : url,
beforeSend : function() {
$("body").mask("正在处理中...");
},
success : function(data) {
//alert(data);
$("body").unmask();
var data = $.parseJSON(data);//eval('(' + data + ')');// json 转对象
var objs = data.kpis;
/**/
var arr = [];//格式如:[[20,2,306,'气泡a'],[1,1,54,'气泡b'],[71,5,3200,'气泡c']];
for ( var i = 0; i < objs.length; i++) {
var success = objs[i].success;
var timeout = objs[i].timeout;
var totalcount = objs[i].total_count;
var objdesc = objs[i].object_desc;
// [成功率,时延,交易量,操作描述]
arr.push([ success,timeout,totalcount,objdesc]);
// 获取到最大的交易量值 来控制气泡半径
if (parseInt(totalcount) >= maxTotalCount) {
maxTotalCount = parseInt(totalcount);
}
}
//options.legend.data[0] = "我是操作";//图例赋值
//options.series[0].name = "我是操作";//图例赋值
options.series[0].data = arr;//arr;
myScatter.hideLoading();
myScatter.setOption(options,false);//每次数据不合并,保证数据刷新
}
});
}
</script>
</head>
<style type="text/css">
html, body{
margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
}
</style>
<body class="easyui-layout" >
<div region="center" >
<div style="padding: 20px;">
<form id="queryForm" style="margin: 10;">
<table id="t1">
<tr>
<td>
开始时间:
<input id="dtStart" type="text"></input>
结束时间:
<input id="dtEnd" type="text"></input>
<a href="javascript:void(0)" οnclick="searchData();"
class="easyui-linkbutton" iconCls="icon-search">加载</a>
<a href="javascript:void(0)" οnclick="clearForm();"
class="easyui-linkbutton" iconCls="icon-cancel">重置</a>
</td>
</tr>
</table>
</form>
<br/>
<!-- 为ECharts准备一个具备大小(宽高)的Dom height:400px;-->
<div id="mainScatter" class="easyui-panel" title="气泡图" style="padding: 10; float: center;"></div>
</div>
</div>
data-> {"kpis":[{"object_desc":"携号转网","success":"90","total_count":"1000","timeout":"0.99"}]}
界面如图: