<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"}]}
界面如圖：
