这个是是使用用maven +ssm 组成的 如果要运行 需要参考前面两个博客搭建 maven环境
代码 放到码云 上:
1. 效果
2. 代码
官方 demo:
http://echarts.baidu.com/echarts2/doc/example.html
2.1 前端
<%@ 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=UTF-8">
<title>ECharts<</title>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
$(function(){
setInterval(function(){setChartBar()}, 5*1000); // 间歇执行 setChartBar是被调用的方法名称
});
//设置ajax访问后台填充柱图 http://localhost:8080/mavenssm20180519/index2.jsp
function setChartBar(url){
var Chart=echarts.init(document.getElementById("main"));//初始化
//用户等待
Chart.showLoading(
{text: 'Loding...' }
);
//自定义变量
var categories=[];
var values=[];
//发送Ajax请求
$.ajax({
url : "${pageContext.request.contextPath }/getData.action",
dataType:"json",
type:'post',
success:function(json){
categories = json.categories; //拿到后台的数据
values = json.values; //拿到后台的数据
//--------------------------官方的 开始--http://echarts.baidu.com/echarts2/doc/example/bar1.html-
//将上面照片中demo代码替换 记得
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : categories //替换变量
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",// 图像类型
"data":values //替换变量
}
]
};
//--------------------------官方的 结束----------------------------------------
Chart.hideLoading();
Chart.setOption(option);
}
});
}
</script>
</body>
</html>
2.2 后台代码
后台 需要的json数据格式
{"values":[80,50,75,100],"categories":["鞋","衬衫","外套","牛仔裤"]}
代码:
//http://localhost:8080/mavenssm20180519/echartspie.jsp
@RequestMapping(value="/getPieData.action")
public void getPieData(HttpServletRequest request, HttpServletResponse response) throws IOException{
response.setContentType("text/html; charset=utf-8");
String[] label = {"搜索引擎","直接访问","邮件营销","联盟广告","视频广告"};
String[] value = {"700","300","500","300","200"};
Map<String, Object> json = new HashMap<String, Object>();
json.put("label", label);
json.put("value", value);
String jsonStri = JSONObject.toJSONString(json);//阿里 fastjson 转换json数据
PrintWriter out=response.getWriter();
out.println(jsonStri);
out.flush();
out.close();
}
3. 改进版本
3.1 html
<%@ page language="java" contentType="text/html; charset=UTF-8" <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script><!-- 下面的是3.0版本的--> --> <!-- 下面的是2.0版本的--> // 为echarts对象加载数据 |
3.2 后台模拟数据
需要的数据格式:
/** * 2. 学习多条 数据图应该封装的json格式 * getPieData * @param response * @throws IOException */ @RequestMapping(value="/getPieData") public void getPieData(HttpServletResponse response) throws IOException{ //设置响应编码格式 response.setContentType("text/html; charset=utf-8"); String[] label = {"周一","周二","周三","周四","周五","周六","周日"};//数组 String[] categories = {"最高气温","最低气温"};//数组 int[] values = {80, 50, 75, 100,1,36,59}; int[] values2 = {60, 70, 45, 80, 50, 75, 100}; List<Weacher> list = new ArrayList<Weacher>(); Weacher w1 = new Weacher(); w1.setName("最高气温"); w1.setType("line"); int[] data=values; w1.setData(data); w1.setSmooth(true); Weacher w2 = new Weacher(); w2.setName("最低气温"); w2.setType("line"); int[] data2=values2; w2.setData(data2); w2.setSmooth(true); list.add(w1); list.add(w2); Map<String, Object> json = new HashMap<String, Object>(); json.put("label", label); json.put("categories", categories); json.put("data", list); String jsonStri = JSONObject.toJSONString(json); System.out.println(jsonStri); //将结果以流的形式输出到请求位置 PrintWriter out=response.getWriter(); out.println(jsonStri); out.flush(); out.close(); } |
4. 版本3 完全动态
4.1 效果
4.2 实现过程
4.2.1 前端
<%@ page language="java" contentType="text/html; charset=UTF-8" // 为echarts对象加载数据 |
4.2.2 后台
4.2.2.1 controller层
4.2.2.2 业务层
接口:
(****)实现类:
/** * 3. 根据数据库动态显示 折线图数量 * @throws IOException * */ public String queryJsonDataToShowLine(HttpServletResponse response) throws IOException { //3.1 返回日期 List<String> listTime = testMavenSSMMapper.queryTime(); //3.2 返回数组名称 List<String> listCategories = testMavenSSMMapper.queryType(); List<Object> listAllData = new ArrayList<Object>();//存放map数据对象 // 3.3 根据类型去查询 数据 for (int i = 0; i < listCategories.size(); i++) { String type = listCategories.get(i);//根据类别去查询 List<Integer> listData = testMavenSSMMapper.getListDataByType (type); Map<String, Object> map = new HashMap<String, Object>(); map.put("data", listData); map.put("name", type); map.put("smooth", true); map.put("type", "line"); listAllData.add(map);//将每次的结果封装到map,再将map放到list } Map<String, Object> json = new HashMap<String, Object>(); json.put("label", listTime); json.put("categories", listCategories); json.put("data", listAllData); String jsonStri = JSONObject.toJSONString(json); return jsonStri; } |
4.2.3 mapper
数据库表结构及内容
内容:
接口:
映射文件
2018-08-16