1、创建数据库,创建表(订单表)
具体语句附在项目源码中。
2、创建web项目,搭建ssm环境(最后附上项目下载地址)
需求:生成每种房间类型的订单数量饼状图
效果展示:
具体实现,项目结构如下:
1、引入外部文件,在webapp目录下导入js和charts文件。编写各个表对象的实体类。
2、编写封装了饼状图信息的实体类
package com.scce.pojo;
/**
* @program: IdeaProjects
* @description:
* @author: Lxy
* @create: 2019-06-07 12:13
**/
//封装饼状图所需信息
public class Roomchartwithbill {
//房间类型
private String roomtype;
//订单数量
private Integer billnumber;
public String getRoomtype() {
return roomtype;
}
public void setRoomtype(String roomtype) {
this.roomtype = roomtype;
}
public Integer getBillnumber() {
return billnumber;
}
public void setBillnumber(Integer billnumber) {
this.billnumber = billnumber;
}
@Override
public String toString() {
return "Roomchartwithbill{" +
"roomtype='" + roomtype + '\'' +
", billnumber=" + billnumber +
'}';
}
}
3、编写dao层,BillDao
package com.scce.dao;
import org.apache.ibatis.annotations.Select;
/**
* @program: IdeaProjects
* @description:
* @author: Lxy
* @create: 2019-06-02 21:36
**/
public interface BillDao {
//根据房间类型,查询订单数量
@Select("select count(1) from bill where roomType=#{roomType}")
public Integer getBillNumByRoomType(Integer roomtype);
}
4、Service层,BillService以及实现类
package com.scce.service;
import com.scce.pojo.Roomchartwithbill;
import java.util.List;
/**
* @program: IdeaProjects
* @description:
* @author: Lxy
* @create: 2019-06-03 21:16
**/
public interface BillService {
//根据房间类型,查询订单数量
public List<Roomchartwithbill> getBillNumByRoomType();
}
package com.scce.service.impl;
import com.scce.dao.BillDao;
import com.scce.dao.RoomTypeDao;
import com.scce.pojo.RoomType;
import com.scce.pojo.Roomchartwithbill;
import com.scce.service.BillService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.ArrayList;
import java.util.List;
/**
* @program: IdeaProjects
* @description:
* @author: Lxy
* @create: 2019-06-03 21:17
**/
@Service
@Transactional
public class BillServiceImpl implements BillService {
@Autowired
private BillDao billDao;
@Autowired
private RoomTypeDao roomTypeDao;
@Override
public List<Roomchartwithbill> getBillNumByRoomType() {
List<Roomchartwithbill> list = new ArrayList<Roomchartwithbill>();
List<RoomType> roomTypeList = roomTypeDao.getRoomType();
try {
for (RoomType roomType : roomTypeList) {
Integer num = billDao.getBillNumByRoomType(roomType.getRid());
Roomchartwithbill roomchartwithbill = new Roomchartwithbill();
roomchartwithbill.setBillnumber(num);
roomchartwithbill.setRoomtype(roomType.getType());
System.out.println(roomchartwithbill);
list.add(roomchartwithbill);
}
} catch (Exception e) {
e.printStackTrace();
}
return list;
}
}
5、controller层
package com.scce.controller;
import com.scce.pojo.Roomchartwithbill;
import com.scce.service.BillService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* @program: IdeaProjects
* @description:
* @author: Lxy
* @create: 2019-06-04 00:06
**/
@RestController
@RequestMapping("/bill")
public class BillController {
@Autowired
private BillService billService;
//饼状图 房间类型订单数量图
@RequestMapping("/getBillNumByRoomType")
public List<Roomchartwithbill> getBillNumByRoomType() {
System.out.println("进入getBillNumByRoomType");
List<Roomchartwithbill> list = billService.getBillNumByRoomType();
return list;
}
}
6、页面代码:AmPieChart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼状图</title>
<link rel="stylesheet" href="../charts/style.css" type="text/css"/>
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../charts/amcharts.js"></script>
<script type="text/javascript" src="../charts/pie.js"></script>
<script type="text/javascript" src="../charts/serial.js"></script>
</head>
<script>
//AmPieChart.html
var chart1;
var chartData1;
AmCharts.ready(function () {
$.getJSON("../bill/getBillNumByRoomType", null, function (data) {
console.log(data);
chart1 = new AmCharts.AmPieChart(); // 饼状图
chart1.addTitle("房间类型订单数量图", 16); // 添加标题
chart1.dataProvider = data; //指定数据来源,一般指向一个数组对象
chart1.titleField = "roomtype"; //饼状每一块的标题
chart1.valueField = "billnumber"; //饼状每一块的值
chart1.sequencedAnimation = true; //指定动画应该被排序还是所有对象应该同时出现。
chart1.startEffect = "elastic"; //动画效果。可能的值是:easeoutsin, easeinsin, elastic, bounce
chart1.innerRadius = "30%";
chart1.startDuration = 2; //Duration of the animation, in seconds.
chart1.labelRadius = 15;
chart1.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";//节点显示的文本内容
chart1.depth3D = 10; //设置为3d图像的厚度值
chart1.angle = 15; //角度,当设置图像为3d图时使用该属性,默认为0
chart1.write("chartdiv");
});
});
</script>
<body>
<div id="chartdiv" style="height:600px;width:900px;float: left;"></div>
</body>
</html>