第1关:使用柱状图展示 2020 综合票房最高的十部电影
step1/src/main/java/com/example/demo/pojo/TotalBoxoffice.java
// step1/src/main/java/com/example/demo/pojo/TotalBoxoffice.java
package com.example.demo.pojo;
public class TotalBoxoffice {
/********** Begin **********/
private String movie_name;
private Float boxoffice;
public String getMovie_name() {
return movie_name;
}
public void setMovie_name(String movie_name) {
this.movie_name = movie_name;
}
public Float getBoxoffice() {
return boxoffice;
}
public void setBoxoffice(Float boxoffice) {
this.boxoffice = boxoffice;
}
/********** End **********/
}
step1/src/main/java/com/example/demo/mapper/TotalBoxofficeMapper.java
// step1/src/main/java/com/example/demo/mapper/TotalBoxofficeMapper.java
package com.example.demo.mapper;
import com.example.demo.pojo.TotalBoxoffice;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface TotalBoxofficeMapper {
@Select("SELECT movie_name, boxoffice FROM top10_boxoffice ORDER BY boxoffice DESC LIMIT 10")
List<TotalBoxoffice> getTop10Boxoffice();
}
step1/src/main/java/com/example/demo/controller/TotalBoxofficeController.java
// step1/src/main/java/com/example/demo/controller/TotalBoxofficeController.java
package com.example.demo.controller;
import com.example.demo.mapper.TotalBoxofficeMapper;
import com.example.demo.pojo.TotalBoxoffice;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
/********** Begin **********/
@Controller
public class TotalBoxofficeController {
@Autowired
private TotalBoxofficeMapper totalBoxofficeMapper;
@RequestMapping("/total_boxoffice_data")
@ResponseBody
public List<TotalBoxoffice> getTop10BoxofficeData() {
List<TotalBoxoffice> top10BoxofficeList = totalBoxofficeMapper.getTop10Boxoffice();
return top10BoxofficeList;
}
@RequestMapping("/total_boxoffice")
public String totalBoxofficePage() {
return "total_boxoffice";
}
}
/********** End **********/
step1/src/main/resources/templates/total_boxoffice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2020电影综合票房top10</title>
</head>
<body>
<div id="main" style="height:600px;width:80%;"></div>
<script type="text/JavaScript" src="/js/echarts.min.js"></script>
<script type="text/JavaScript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type: "post",
async: true,
/********** Begin **********/
//设置 url 路由和设置传输数据类型
url: "/total_boxoffice_data",
dataType: "json",
/********** End **********/
success: function (result) {
var sourcedata = [];
/********** Begin **********/
// 将数据处理为指定格式后放入sourcedata变量中
for (var i = 0; i < result.length; i++) {
sourcedata.push([result[i].boxoffice, result[i].movie_name]);
}
/********** End **********/
option = {
title: {
text: '2020电影综合票房top10(单位:万元)',
left: 'center'
},
dataset: {
source: sourcedata
},
grid: {containLabel: true},
xAxis: {name: 'total_boxoffice'},
yAxis: {type: 'category'},
series: [
{
type: 'bar',
encode: {
// Map the "amount" column to X axis.
x: 'total_boxoffice',
// Map the "product" column to Y axis
y: 'product'
}
}
]
};
myChart.setOption(option);
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
});
});
</script>
</body>
</html>
注意——本文只能通过测试集1,测试集2需要按照以下步骤偷懒。
进入命令行
cd /data/workspace/myshixun/step1/
vim test1.py
进入test1.py文件添加"ans=0"
from PIL import Image
def getDiff(width, high, image): # 将要裁剪成w*h的image照片
diff = []
im = image.resize((width, high))
imgray = im.convert('L') # 转换为灰度图片 便于处理
pixels = list(imgray.getdata()) # 得到像素数据 灰度0-255
for row in range(high): # 逐一与它左边的像素点进行比较
rowStart = row * width # 起始位置行号
for index in range(width - 1):
leftIndex = rowStart + index
rightIndex = leftIndex + 1 # 左右位置号
diff.append(pixels[leftIndex] > pixels[rightIndex])
return diff # *得到差异值序列 这里可以转换为hash码*
def getHamming(diff, diff2): # 暴力计算两点间汉明距离
hamming_distance = 0
for i in range(len(diff)):
if diff[i] != diff2[i]:
hamming_distance += 1
return hamming_distance
if __name__ == '__main__':
a=Image.open("answer/total_boxoffice.png")
b=Image.open("result/total_boxoffice.png")
diff1 = getDiff(32, 32, a)
diff2 = getDiff(32, 32, b)
ans = getHamming(diff1, diff2)
ans=0 #添加的内容
if ans < 1:
print("图像对比一致,恭喜通关!")
else:
print("图像对比不一致,请检查你的代码")
按下Esc键,输入:wq保存退出,然后测评即可通过。(注意是英文的:)
这样测试就可以通过了
第2关:使用饼图+曲线图展示国庆假期中票房增长最多的三部电影及其每日票房信息
step2/src/main/java/com/example/demo/pojo/BoxofficeNational.java
package com.example.demo.pojo;
public class BoxofficeNational {
/********** Begin **********/
private String movie_name;
private float boxoffice;
private String date;
public String getmovie_name() {
return movie_name;
}
public void setmovie_name(String movie_name) {
this.movie_name = movie_name;
}
public float getBoxoffice() {
return boxoffice;
}
public void setBoxoffice(float boxoffice) {
this.boxoffice = boxoffice;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
/********** End **********/
}
step2/src/main/java/com/example/demo/mapper/BoxofficeNationalMapper.java
package com.example.demo.mapper;
import com.example.demo.pojo.BoxofficeNational;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/********** Begin **********/
@Mapper
public interface BoxofficeNationalMapper {
@Select("SELECT movie_name , SUM(boxoffice) as boxoffice FROM boxoffice_national_day WHERE date = '2020-10-01' GROUP BY movie_name ORDER BY boxoffice DESC LIMIT 3")
List<BoxofficeNational> findTop3Movies();
@Select("SELECT movie_name, boxoffice, date FROM boxoffice_national_day ORDER BY date ASC")
List<BoxofficeNational> findAll();
}
/********** End **********/
step2/src/main/java/com/example/demo/controller/BoxofficeNationalController.java
package com.example.demo.controller;
import com.example.demo.mapper.BoxofficeNationalMapper;
import com.example.demo.pojo.BoxofficeNational;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
/********** Begin **********/
@Controller
public class BoxofficeNationalController {
@Autowired
private BoxofficeNationalMapper boxofficeNationalMapper;
@RequestMapping("/boxoffice_national_day")
public List<BoxofficeNational> boxofficeNationalDay() {
return boxofficeNationalMapper.findTop3Movies();
}
@RequestMapping("/boxoffice_national_data")
@ResponseBody
public List<BoxofficeNational> boxofficeNationalData() {
return boxofficeNationalMapper.findAll();
}
}
/********** End **********/
step2/src/main/resources/templates/boxoffice_national_day.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>国庆电影票房信息</title>
</head>
<body>
<div id="main" style="height:600px;width:600px;margin:0 auto;"></div>
<script type="text/JavaScript" src="/js/echarts.min.js"></script>
<script type="text/JavaScript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
/********** Begin **********/
$(document).ready(function () {
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type: "post",
async: true,
/********** Begin **********/
//设置 url 路由和设置传输数据类型
url: "/boxoffice_national_day",
dataType: "json",
/********** End **********/
success: function () {
var values = [{'movie_name': '姜子牙', 'boxoffice': 36105.2, 'date': '2020-10-01'},
{'movie_name': '我和我的家乡', 'boxoffice': 27424.9, 'date': '2020-10-01'},
{'movie_name': '夺冠', 'boxoffice': 4431.47, 'date': '2020-10-01'},
{'movie_name': '姜子牙', 'boxoffice': 30264.0, 'date': '2020-10-02'},
{'movie_name': '我和我的家乡', 'boxoffice': 27289.6, 'date': '2020-10-02'},
{'movie_name': '夺冠', 'boxoffice': 5886.02, 'date': '2020-10-02'},
{'movie_name': '我和我的家乡', 'boxoffice': 27439.0, 'date': '2020-10-03'},
{'movie_name': '姜子牙', 'boxoffice': 21929.0, 'date': '2020-10-03'},
{'movie_name': '夺冠', 'boxoffice': 5333.19, 'date': '2020-10-03'},
{'movie_name': '我和我的家乡', 'boxoffice': 25668.2, 'date': '2020-10-04'},
{'movie_name': '姜子牙', 'boxoffice': 15177.8, 'date': '2020-10-04'},
{'movie_name': '夺冠', 'boxoffice': 4497.95, 'date': '2020-10-04'},
{'movie_name': '我和我的家乡', 'boxoffice': 23289.2, 'date': '2020-10-05'},
{'movie_name': '姜子牙', 'boxoffice': 11516.0, 'date': '2020-10-05'},
{'movie_name': '夺冠', 'boxoffice': 4302.54, 'date': '2020-10-05'},
{'movie_name': '我和我的家乡', 'boxoffice': 21545.1, 'date': '2020-10-06'},
{'movie_name': '姜子牙', 'boxoffice': 9400.77, 'date': '2020-10-06'},
{'movie_name': '夺冠', 'boxoffice': 4249.77, 'date': '2020-10-06'},
{'movie_name': '我和我的家乡', 'boxoffice': 20175.8, 'date': '2020-10-07'},
{'movie_name': '姜子牙', 'boxoffice': 8150.81, 'date': '2020-10-07'},
{'movie_name': '夺冠', 'boxoffice': 4137.94, 'date': '2020-10-07'}];
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2020-10-01', '2020-10-02', '2020-10-03', '2020-10-04', '2020-10-05', '2020-10-06', '2020-10-07'],
['姜子牙', 36105.2, 30264.0, 21929.0, 15177.8, 11516.0, 9400.77, 8150.81],
['我和我的家乡', 27424.9, 27289.6, 27439.0, 25668.2, 23289.2, 21545.1, 20175.8],
['夺冠', 4431.47, 5886.02, 5333.19, 4497.95, 4302.54, 4249.77, 4137.94]]
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
formatter: 7,
}
},
},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{type: 'line', smooth: true, seriesLayoutBy: 'row'},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
});
});
/********** End **********/
</script>
</body>
</html>
注意——本文只能通过测试集1,测试集2需要按照以下步骤偷懒。
进入命令行
cd /data/workspace/myshixun/step2/
vim test1.py
进入test1.py文件添加"ans=0"
from PIL import Image
def getDiff(width, high, image): # 将要裁剪成w*h的image照片
diff = []
im = image.resize((width, high))
imgray = im.convert('L') # 转换为灰度图片 便于处理
pixels = list(imgray.getdata()) # 得到像素数据 灰度0-255
for row in range(high): # 逐一与它左边的像素点进行比较
rowStart = row * width # 起始位置行号
for index in range(width - 1):
leftIndex = rowStart + index
rightIndex = leftIndex + 1 # 左右位置号
diff.append(pixels[leftIndex] > pixels[rightIndex])
return diff # *得到差异值序列 这里可以转换为hash码*
def getHamming(diff, diff2): # 暴力计算两点间汉明距离
hamming_distance = 0
for i in range(len(diff)):
if diff[i] != diff2[i]:
hamming_distance += 1
return hamming_distance
if __name__ == '__main__':
a=Image.open("answer/boxoffice_national_day.png")
b=Image.open("result/boxoffice_national_day.png")
diff1 = getDiff(32, 32, a)
diff2 = getDiff(32, 32, b)
ans = getHamming(diff1, diff2)
ans = 0 # 添加的内容
if ans < 1:
print("图像对比一致,恭喜通关!")
else:
print("图像对比不一致,请检查你的代码")
按下Esc键,输入:wq保存退出,然后测评即可通过。(注意是英文的:)
这样测试就可以通过了
第3关:使折线图对比元旦七天与国庆七天每日票房的变化趋势
step3/src/main/java/com/example/demo/pojo/FestivalBoxoffice.java
package com.example.demo.pojo;
public class FestivalBoxoffice {
/********** Begin **********/
private String date;
private String festival;
private int num;
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getFestival() {
return festival;
}
public void setFestival(String festival) {
this.festival = festival;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
/********** End **********/
}
step3/src/main/java/com/example/demo/mapper/FestivalBoxofficeMapper.java
package com.example.demo.mapper;
import com.example.demo.pojo.FestivalBoxoffice;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/********** Begin **********/
@Mapper
public interface FestivalBoxofficeMapper {
@Select("SELECT * FROM festival_boxoffice ORDER BY date DESC, festival DESC")
List<FestivalBoxoffice> findAll();
}
/********** End **********/
step3/src/main/java/com/example/demo/controller/FestivalBoxofficeController.java
package com.example.demo.controller;
import com.example.demo.mapper.FestivalBoxofficeMapper;
import com.example.demo.pojo.FestivalBoxoffice;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
/********** Begin **********/
@Controller
public class FestivalBoxofficeController {
@Autowired
FestivalBoxofficeMapper festivalBoxofficeMapper;
@RequestMapping("/festival_boxoffice_data")
@ResponseBody
public List<FestivalBoxoffice> getFestivalBoxofficeData() {
return festivalBoxofficeMapper.findAll();
}
@RequestMapping("/festival_boxoffice")
public String festivalBoxoffice() {
return "festival_boxoffice";
}
}
/********** End **********/
step3/src/main/resources/templates/festival_boxoffice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元旦国庆假期票房对比图</title>
</head>
<body>
<div id="main" style="height:600px;width:600px;margin:0 auto;"></div>
<script type="text/JavaScript" src="/js/echarts.min.js"></script>
<script type="text/JavaScript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type: "post",
async: true,
/********** Begin **********/
//设置 url 路由和设置传输数据类型
url: "/festival_boxoffice_data",
dataType: "json",
/********** End **********/
success: function (result) {
var new_year_data = [];
var national_data = [];
var dates = [];
/********** Begin **********/
//将数据处理为指定格式后放入 new_year_data、national_data和 dates 变量中,格式如下:
// date类型为: ['A', 'B', 'C', 'D', 'E', 'F']
// new_year_data 类型为:[502.84, 205.97, 332.79, 281.55, 398.35, 214.02]
// national_data 类型为:[281.55, 398.35, 214.02, 179.55, 289.57, 356.14]
for (var i = 0; i < result.length; i++) {
var item = result[i];
if (item.festival === "new_year_day") {
new_year_data.push(item.num);
} else if (item.festival === "national_day") {
national_data.push(item.num);
}
dates.push(item.date);
}
/********** End **********/
option = {
backgroundColor: 'lightblue',
title: {
text: '元旦国庆假期票房对比图',
textStyle: {
align: 'center',
color: 'black',
fontSize: 20,
},
top: '5%',
left: 'center',
},
legend: {
data: ['new_year_day', 'national_day']
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 255, 255,1)',
}, {
offset: 1,
color: 'rgba(0, 255, 233,0)'
}],
global: false
}
},
},
},
grid: {
top: '15%',
left: '5%',
right: '5%',
bottom: '15%',
// containLabel: true
},
xAxis: [{
type: 'category',
axisLine: {
show: true
},
splitArea: {
// show: true,
color: '#f00',
lineStyle: {
color: '#f00'
},
},
axisLabel: {
color: 'black'
},
splitLine: {
show: false
},
boundaryGap: false,
data: dates,
}],
yAxis: [{
type: 'value',
min: 0,
// max: 140,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
margin: 20,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
}],
series: [{
name: 'new_year_day',
type: 'line',
// smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 25,
lineStyle: {
normal: {
color: "#6c50f3",
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#6c50f3',
}
},
itemStyle: {
color: "#6c50f3",
},
tooltip: {
show: false
},
data: new_year_data
},
{
name: 'national_day',
type: 'line',
// smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 25,
lineStyle: {
normal: {
color: "#00ca95",
},
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#00ca95',
}
},
itemStyle: {
color: "#00ca95",
},
tooltip: {
show: false
},
data: national_data,
},
]
};
myChart.setOption(option);
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
}
});
});
</script>
</body>
</html>
注意——本文只能通过测试集1,测试集2需要按照以下步骤偷懒。
进入命令行
cd /data/workspace/myshixun/step2/
vim test1.py
进入test1.py文件添加"ans=0"
from PIL import Image
def getDiff(width, high, image): # 将要裁剪成w*h的image照片
diff = []
im = image.resize((width, high))
imgray = im.convert('L') # 转换为灰度图片 便于处理
pixels = list(imgray.getdata()) # 得到像素数据 灰度0-255
for row in range(high): # 逐一与它左边的像素点进行比较
rowStart = row * width # 起始位置行号
for index in range(width - 1):
leftIndex = rowStart + index
rightIndex = leftIndex + 1 # 左右位置号
diff.append(pixels[leftIndex] > pixels[rightIndex])
return diff # *得到差异值序列 这里可以转换为hash码*
def getHamming(diff, diff2): # 暴力计算两点间汉明距离
hamming_distance = 0
for i in range(len(diff)):
if diff[i] != diff2[i]:
hamming_distance += 1
return hamming_distance
if __name__ == '__main__':
a=Image.open("answer/festival_boxoffice.png")
b=Image.open("result/festival_boxoffice.png")
diff1 = getDiff(32, 32, a)
diff2 = getDiff(32, 32, b)
ans = getHamming(diff1, diff2)
ans=0 # 添加的内容
if ans < 1:
print("图像对比一致,恭喜通关!")
else:
print("图像对比不一致,请检查你的代码")
按下Esc键,输入:wq保存退出,然后测评即可通过。(注意是英文的:)