Echarts scatter 气泡图-获取某时间段数据（气泡大小半径做了控制）

<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)" onclick="searchData();"
class="easyui-linkbutton" iconCls="icon-search">加载</a>
<a href="javascript:void(0)" onclick="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>

以上是JSP中代码，气泡图的数据这里是从java后台获取json格式如下：

data->   {"kpis":[{"object_desc":"携号转网","success":"90","total_count":"1000","timeout":"0.99"}]}

界面如图：