- 核心思想:ajax请求数据,渲染图表。
- 具体实现:根据不同图表需要显示数据的种类和个数,在springmvc的后台构建相应的数据封装后以json串的形式进行返回,ajax解析数据后渲染到图表的不同位置上进行显示。
一、首先,看一下在不加ajax时候,静态图表的显示:
- Echarts的使用和介绍请点击官网:官网
详细使用步骤:
- 下载echarts图表的核心依赖库:echart.min.js
- 直接上jsp界面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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=ISO-8859-1">
<!-- 导入echart图表的核心依赖库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min.js"></script>
<title>饼状图表</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
/* 基于准备好的dom,初始化echarts实例 */
var myChart = echarts.init(document.getElementById('main'));
/* 核心显示设置 */
var option = {
/* 标题设置 */
title : {
text: '饼状图表',
subtext: '静态数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
/* 颜色和选项的对应关系 */
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
},
/* 内容显示 */
series : [
{
name: '访问来源', //鼠标移至不同扇形区提示信息的标题
type: 'pie', //指定数据生成的图表类型
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
/* 阴影区域设置 */
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
/* 使用刚指定的配置项和数据显示图表 */
myChart.setOption(option);
</script>
</html>
- 结果
二、然后,我们加入ajax,看动态图表如何生成:
- 下载jquery和echarts的核心依赖库
- jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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=ISO-8859-1">
<!-- 导入jquery的核心依赖库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/javascript/jquery.min.js"></script>
<!-- 导入echarts的核心依赖库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/echarts.min.js"></script>
<title>饼状图表</title>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
/* 基于准备好的dom,初始化echarts实例 */
var myChart = echarts.init(document.getElementById('main'));
/* 核心显示设置 */
var option = {
/* 标题设置 */
title : {
text: '报表统计',
subtext: '数据虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
/* 颜色和选项的对应关系 */
legend: {
orient: 'vertical',
left: 'left',
data: [] //待填充数据项1
},
/* 内容显示 */
series : [
{
name: '班级', //鼠标移至不同扇形区提示信息的标题
type: 'pie', //指定数据生成的图表类型
radius : '55%',
center: ['50%', '60%'],
data:[], //待填充数据项2
/* 阴影区域设置 */
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
/* 发送ajax请求 */
var data = {};
//发送key-value类型的请求数据
//例如:data.xxx = 1;
$.ajax({
type: "POST",
//当发送json数据时添加:
/* contentType: "application/json; charset=utf-8", */
url: "card/getChart.mvc",
data: data,
error: function (data) {
alert("出错了!" );
},
success: function (data) {
//对echarts模板进行数据填充
option.legend.data = data.title;
option.series[0].data = data.number;
//重新加载图表显示
myChart.setOption(option);
}
});
</script>
</html>
- pojo
package com.cyn.ssm.po.po;
import java.util.HashMap;
import java.util.List;
/*
* 将返回的数据项封装为pojo对象的属性
*/
public class Item {
private List<String> title;
private List<HashMap<String, Object>> number;
public List<String> getTitle() {
return title;
}
public void setTitle(List<String> title) {
this.title = title;
}
public List<HashMap<String, Object>> getNumber() {
return number;
}
public void setNumber(List<HashMap<String, Object>> number) {
this.number = number;
}
}
- springmvc
/*
* 模拟数据返回json
*/
@RequestMapping("getChart")
@ResponseBody
public item getChart(){
//构建返回的数据项,实际开发中应该从数据库中读出
List<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
List<String> names = new ArrayList<String>();
names.add("接送比列");
names.add("请假比列");
names.add("滞留比列");
//模拟数据
for (String name : names) {
HashMap<String, Object> vals = new HashMap<String, Object>();
vals.put("name", name);
vals.put("value", Math.round(Math.random() * 100));
list.add(vals);
}
//封装成pojo对象
Item item = new Item ();
item.setNumber(list);
item.setTitle(names);
return item;
}
- 结果
备注:其他图表生成方式和此图类似,可以参考https://blog.csdn.net/yungpheng/article/details/54177917