echarts异步数据加载使用总结

最新推荐文章于 2024-06-08 06:52:44 发布

原创最新推荐文章于 2024-06-08 06:52:44 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

界面js之类的东西同时被 2 个专栏收录

8 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍如何使用ECharts结合Spring MVC实现异步加载数据，并展示具体代码实现过程，包括Controller设置、数据传递及前端页面配置。

Controler

@RequestMapping(value="/toEchart",method=RequestMethod.POST,produces={"application/json;charset=UTF-8"})
@ResponseBody
public String toEchart(){
List<Product> list = new ArrayList<Product>();
//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合
list.add(new Product("衬衣", 10));
list.add(new Product("短袖", 20));
list.add(new Product("大衣", 30));
return JSONArray.toJSONString(list);
}
@RequestMapping(value="/toEchartPage")
public String toEchartPage(){
return "user/toEchart";
}

jsp页面关键代码：

<%@ 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>My JSP 'toEchart.jsp' starting page</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="<%=basePath%>statics/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>statics/echart/echarts.js"></script></head>

<body>
<input type="hidden" name="path" id="path" value="<%=basePath%>"/>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
myChart.setOption({
title: {
text: '异步数据加载'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
myChart.showLoading();//数据加载完之前先显示一段简单的loading动画
var names=[]; //类别数组（实际用来盛放X轴坐标值）
var nums=[]; //销量数组（实际用来盛放Y坐标值）
var path=$("#path").val();
$.ajax({
type:"post",
async:true,//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行
url:path+"user/toEchart",
data:{},
dataType:"json",//返回数据形式为json
success:function(result){
for(var i=0;i<result.length;i++){
names.push(result[i].name);
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨个取出销量并填入销量数组
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
});
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</body>
</html>