Echartsscatter⽓泡图-获取某时间段数据（⽓泡⼤⼩半径做了
控制）
<script type="text/javascript" src="<%=basePath%>js/echarts/esl.js"></script>
<script type="text/javascript">
var today=new Date();
var currentDateStart = FullYear()+"-"+ (Month()+1) +"-"+Date()+' 00:00:00';
var currentDateEnd = FullYear()+"-"+ (Month()+1) +"-"+Date()+' 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 (st(start) && st(end)) {
/
/ 后执⾏
getScaterData(start,end);
} else {
$.messager.alert('提⽰','时间格式中有⾮法字符，请重新选择！','info');
}
}
//清空查询条件
function clearForm(){
$('#dtStart').datetimebox('setValue',currentDateStart);
// 使⽤echart start
var myScatter;
/
/ 路径配置
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.ElementById('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）
und(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 = Option();
//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;
}
});
}
</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  >
eval是做什么的<form id="queryForm" >
<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="⽓泡图"  ></div> </div>
</div>
以上是JSP中代码，⽓泡图的数据这⾥是从java后台获取json格式如下：
data->  {"kpis":[{"object_desc":"携号转⽹","success":"90","total_count":"1000","timeout":"0.99"}]}
界⾯如图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。