学海无涯
发表于:2024-12-10
字数统计:1339 字
预计阅读5分钟
介绍
小蓝最近一直在云课平台学习，为了更好的督促自己，于是将每天的学习时间都记录了下来，但是如何更加直观的显示学习时间让小蓝很是苦恼。本题需要你使用 ECharts 帮助小蓝实现统计学习时间图表。
准备
本题已经内置了初始代码，打开实验环境，目录结构如下：
txt
├── css
│ └── style.css
├── data.json
├── index.html
└── js
├── axios.min.js
└── echarts.min.js其中：
index.html是主页面。js/echarts.min.js是 ECharts 文件。js/axios.min.js是 axios 文件。css/style.css是样式文件。data.json是学习时长数据。
选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：
目标
请完成 index.html 文件中的 TODO 部分。
- 完成数据请求（数据来源
./data.json），data.json中存放的数据为对应月份中小蓝每天的学习时长，单位为分钟（在项目目录下已经提供了axios，考生可自行选择是否使用）。 - 页面加载完成后，默认显示周统计数据。点击周和月，x 轴对应显示正确的周数(格式为:"x 月 x 周")和月份，Y 轴显示小蓝对应周和对应月学习的总时长。
完成后，最终页面效果如下：
规定
- 请勿修改
js/echarts.min.js文件中的任何内容。 - 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。
判分标准
- 完成数据请求，得 5 分。
- 初始化数据显示正确，得 5 分。
- 点击周和月切换后，数据显示正确，得 5 分。
总通过次数: 902 | 总提交次数: 1069 | 通过率: 84.4%
难度: 中等 标签: 2022, 省模拟赛, Web 前端, ECharts
题解
js
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>学海无涯</title>
<!-- <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> -->
<script src="./js/echarts.min.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<script src="./js/axios.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<!-- tab 栏 -->
<div class="container">
<div class="tabs">
<input type="radio" id="week" name="tabs" checked />
<label class="tab" for="week">周</label>
<input type="radio" id="month" name="tabs" />
<label class="tab" for="month">月</label>
<span class="glider"></span>
</div>
</div>
<div
id="container"
style="width: 80%; height: 80%; margin: 40px auto 0"
></div>
<script type="text/javascript">
let objData
let weekaXais = []
let weekData = []
let monthXais = []
let monthData = []
let xAxisData = []
let seriesData = []
// TODO:待补充代码
fetch('./data.json', {method: 'get'}).then(res => res.json()).then(data => {
objData = data.data
for(let key in objData) {
let count = 1
let len = objData[key].length % 7 === 0 ? objData[key].length / 7 : Math.floor(objData[key].length / 7) + 1
let weekDataChunk = []
let weekAxaisChunk = []
weekDataChunk.length = len
weekDataChunk = new Array(len).fill(0)
for(let i = 0; i < objData[key].length; i++) {
weekDataChunk[Math.floor(i / 7)] += objData[key][i]
}
weekData.push(...weekDataChunk)
for(let i = 0; i < len; i++) weekAxaisChunk.push(`${key}第${i + 1}周`)
weekaXais.push(...weekAxaisChunk)
monthXais.push(key)
monthData.push(objData[key].reduce((a,b) => a + b))
}
console.log(weekData);
console.log(weekaXais);
console.log(monthXais);
console.log(monthData);
xAxisData = weekaXais
seriesData = weekData
var dom = document.getElementById("container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false,
});
var option;
option = {
title: {
text: "学习时长统计图",
},
legend: {},
xAxis: {
// x 轴数据
type: "category",
data: xAxisData,
},
yAxis: {
type: "value",
name: "分钟",
axisLabel: {
formatter: "{value}",
},
},
series: [
// y 轴数据
{
data: seriesData,
type: "bar",
},
],
};
if (option && typeof option === "object") {
// 设置图表
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
})
const weekBtn = document.getElementById('week')
const monthBtn = document.getElementById('month')
weekBtn.addEventListener('click', () => {
console.log('1');
if (weekBtn.checked) {
xAxisData = weekaXais
seriesData = weekData
var dom = document.getElementById("container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false,
});
var option;
option = {
title: {
text: "学习时长统计图",
},
legend: {},
xAxis: {
// x 轴数据
type: "category",
data: xAxisData,
},
yAxis: {
type: "value",
name: "分钟",
axisLabel: {
formatter: "{value}",
},
},
series: [
// y 轴数据
{
data: seriesData,
type: "bar",
},
],
};
if (option && typeof option === "object") {
// 设置图表
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
}
})
monthBtn.addEventListener('click', () => {
console.log('2');
if (monthBtn.checked) {
xAxisData = monthXais
seriesData = monthData
var dom = document.getElementById("container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false,
});
var option;
option = {
title: {
text: "学习时长统计图",
},
legend: {},
xAxis: {
// x 轴数据
type: "category",
data: xAxisData,
},
yAxis: {
type: "value",
name: "分钟",
axisLabel: {
formatter: "{value}",
},
},
series: [
// y 轴数据
{
data: seriesData,
type: "bar",
},
],
};
if (option && typeof option === "object") {
// 设置图表
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
}
})
</script>
</body>
</html>