? 图表制作
○ HighCharts使用
Controller
@Controller
@RequestMapping("/admin/state")
public class StateController {
// 属性注入 service层对象
@Autowired
private VideoService videoService;// 假定已经有了
@RequestMapping("courseavg.do")
// 需要往前端传输 xData = ["Web前端入门小项目","前端开发与Git入门","每天20分钟轻松入门React","UI基础入门","Python编程零基础入门","轻松进击PHP基础"]
// yData = [129,190,........]
public String courseAvg(Model model){
// 使用Video
List<HashMap> list = videoService.queryVideoPlayTimes();
System.out.println("统计结果为： " + list);
// 准备xData 和 yData 的值
// 准备两个list集合 分别取出对应的x轴需要的数据和y轴需要的数据
ArrayList<Object> xList = new ArrayList<>();
ArrayList<Object> yList = new ArrayList<>();
// 遍历HashMap中的值
for (HashMap map : list) {
xList.add(map.get("course_name").toString());
yList.add(Integer.parseInt(map.get("avgTimes").toString()));
}
StringBuffer xData = new StringBuffer();
// 拼装xData数据
// ["Web前端入门小项目","前端开发与Git入门","每天20分钟轻松入门React","UI基础入门","Python编程零基础入门","轻松进击PHP基础"]
// 拼装yData数据
// 拼装yData数据 yData = [129,190,........]
StringBuffer yData = new StringBuffer();
xData.append("[");
yData.append("[");
for (int i = 0; i < xList.size(); i++) {
if (i == 0) {
xData.append("\'" + xList.get(i) + "\'");
yData.append("" + yList.get(i) + "");
} else{
xData.append(",\'" + xList.get(i) + "\'");
yData.append("," + yList.get(i) + "");
}
}
xData.append("]");
yData.append("]");
System.out.println(xData);
System.out.println(yData);
// 传输到页面上 回传数据
model.addAttribute("xData", xData);
model.addAttribute("yData", yData);
System.out.println(list);
// 先设定跳转的页面
return "admin/analysis/show"; // 展示统计的播放次数
}
}
Service接口
public interface VideoService {
//统计个课程的播放次数
List<HashMap> queryVideoPlayTimes();
}
Service实现类
@Service
public class VideoServiceImpl implements VideoService {
@Autowired
private VideoMapper videoMapper;
@Override
public List<HashMap> queryVideoPlayTimes() {
return videoMapper.queryVideoPlayTimes();
}
}
Mapper接口
public interface VideoMapper {
List<HashMap> queryVideoPlayTimes();
}
Mapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--
//xData
//yData
video course
平均播放次数
-->
<!--映射对应的接口文件-->
<mapper namespace="com.zhiyou.video.mapper.VideoMapper">
<select id="queryVideoPlayTimes" resultType="java.util.HashMap">
select v.course_id,c.course_name,round(avg(v.video_play_times)) avgTimes from video v,course c where v.course_id = c.id group by v.course_id,c.course_name
</select>
</mapper>
○ ECharts使用
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>入门案例</title>
<%--第一步 引入echarts文件 使用文件形式引入 也可以使用cdn方式引入进来--%>
<%--引入 echars.js--%>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<%--第二步 在绘图前我们需要为 ECharts 准备一个高宽的DOM容器--%>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(\'main\'));
// 指定图表的配置项和数据
var option = {
title: {
text: \'ECharts 入门示例\'
},
tooltip: {},
legend: {
data:[\'销量\']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: \'销量\',
type: \'bar\',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>