echarts ajax动态调用数据

最新推荐文章于 2024-08-12 02:46:45 发布

timingyo

最新推荐文章于 2024-08-12 02:46:45 发布

阅读量738

点赞数

CC 4.0 BY-SA版权

分类专栏：图表

本文链接：https://blog.youkuaiyun.com/u012289341/article/details/78642470

图表专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts绘制动态图表，并通过优化Ajax请求减少数据加载次数。通过案例展示了如何配置图表样式、设置数据系列及利用jQuery发起Ajax请求获取动态数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>echarts</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="echarts/common/js/echarts.min.js"></script>
<script type="text/javascript" src="echarts/common/js/jquery-1.7.2.js"></script>

</head>

<body>

<div id="main" style="width: 600px; height: 300px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text : '产品统计图',
subtext : '纯属虚构'
},
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
toolbox: {
show : true,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [ {
type : 'category',
data : (function() {
var arr = [];
$.ajax( {
type : "post",
async : false, //同步执行
url : "servlet/TestEchartsService",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for ( var i = 0; i < result.length; i++) {
console.log(result[i].name);
arr.push(result[i].name);
}
}

},
error : function(errorMsg) {
alert("不好意思，大爷，图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})()
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "销量",
"type" : "bar",
"data" : (function() {
var arr = [];
$.ajax( {
type : "post",
async : false, //同步执行
url : "servlet/TestEchartsService",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for ( var i = 0; i < result.length; i++) {
console.log(result[i].num);
arr.push(result[i].num);
}
}
},
error : function(errorMsg) {
alert("不好意思，大爷，图表请求数据失败啦!");
myChart.hideLoading();
}
})
return arr;
})()

} ]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>

</html>

其实我们如果是x.y 的ajax请求统一url，且返回同一对象，可以将ajax提到外面，这样就只有一次ajax请求了。

如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="echarts/common/js/echarts.min.js"></script>
<script type="text/javascript" src="echarts/common/js/jquery-1.7.2.js"></script>
<title>Insert title here</title>
</head>
<body>
为ECharts准备一个具备大小（宽高）的Dom
<div id="main" style="width: 600px; height: 300px;"></div>

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

var arrListOne = new Array();
var arrListTwo = new Array();
$.ajax( {
type : "post",
async : false, //同步执行
url : "cms/see.action",
dataType : "json", //返回数据形式为json
success : function(result) {
if (result!=null) {
for ( var i = 0; i < result.length; i++) {
arrListOne.push(result[i].timestamp.substring(10));
arrListTwo.push(result[i].average);
}
}
},
error : function(errorMsg) {
alert("不好意思，大爷，图表请求数据失败啦!");
myChart.hideLoading();
}
}) ;
console.log(arrListOne);
console.log(arrListTwo);

var option = {
title : {
text : 'CPU统计图',
subtext : ''
},
tooltip : {
show : true
},
legend : {
data : [ 'CPU占比' ]
},
toolbox: {
show : true,
orient: 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [{
type : 'category',
data : arrListOne

}],

yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "CPU占比",
"type" : "line",
"data" : arrListTwo
} ]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>

此时ajax返回的json对象有可能是含有数组，如果循环数组是没有结果，可以

console.log(result);
console.log("datapoints");
var res = result.datapoints;
re = JSON.parse(res);（要转换后才能循环）
console.log(re);
alert(re.length);
for (var i=0; i<re.length; i++)
{
tt = re[i].timestamp;
console.log(tt);
}