目录😋
背景介绍
准备步骤
目标效果
要求规定
判分标准
通关代码✔️
代码解析📑
一、BUG分析
二、HTML 部分
三、JavaScript 部分
测试结果👍
背景介绍
现在都提倡健康使用手机，那么统计一下在一周中每天使用手机的情况吧！本题使用 ECharts 实现统计手机使用时长的折线图，但是代码中存在 Bug 需要你去修复。
准备步骤
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
├── js │ └── echarts.js └── index.html其中：
js/echarts.js是 ECharts 文件。index.html是主页面。注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
在浏览器中预览cd /home/project wget https://labfile.oss.aliyuncs.com/courses/9791/03.zip && unzip 03.zip && rm 03.zipindex.html页面效果显示如下所示：
目标效果
请修复
index.html文件中的 Bug。让页面呈现如下所示的效果：
具体说明如下：
- 用折线图显示了一周当中，每天使用手机的时长。
index.html文件里var option = {}中的内容是 ECharts 的配置项，该配置中存在 Bug，导致坐标轴显示不正确。- 在配置项中，
title是用于设置折线图的标题。- 在配置项中，
series是系列，其中的data是一周中每天使用手机的时间数据，type是图表的类型为折线图。
要求规定
- 请勿修改
js/echarts.js文件中的任何内容。- 在
index.html文件中，只能修改 ECharts 的配置项，配置项以外的代码不能修改。- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等，以免造成无法判题通过。
判分标准
- 本题完全实现题目目标得满分，否则得 0 分。
通关代码✔️
//index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="./js/echarts.js"></script><title>和手机相处的时光</title></head><style>* {margin: 0;padding: 0;}#main {margin: 20px;background-color: white;}</style><body><div id="main" style="width: 1000px; height: 600px"></div></body><script>var chartDom = document.getElementById("main");var myChart = echarts.init(chartDom);/*TODO：ECharts 的配置中存在错误，请改正*/var option = {title: {text: "一周的手机使用时长",},xAxis: {// 将 xAxis 的类型修改为 'category'type: "category",data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},yAxis: {// 将 yAxis 的类型修改为 'value'type: "value",},series: [{data: [2.5, 2, 2.6, 3.2, 4, 6, 5],type: "line",},],};myChart.setOption(option);</script>
</html>代码解析📑
一、BUG分析
1. 原代码存在的问题
在原 ECharts 配置项中，
xAxis和yAxis的类型设置不符合实际需求。
xAxis的type被设置为'value'：value类型通常用于处理连续的数值数据，而这里xAxis要展示的是一周中的每一天（“周一”“周二” 等），属于离散的类别数据，使用value类型会导致坐标轴无法正确显示这些类别。yAxis的type被设置为'category'：category类型用于展示类别数据，然而yAxis要显示的是每天使用手机的时长（如 2.5、2 等数值），属于连续的数值数据，使用category类型会使时长数据无法正确显示在坐标轴上。2. 修复思路
根据
xAxis和yAxis要展示的数据类型，对它们的type属性进行修正：
- 将
xAxis的type设置为'category'，以正确显示一周中的每一天这些类别数据。- 将
yAxis的type设置为'value'，以正确显示每天使用手机的时长这些数值数据。
二、HTML 部分
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="./js/echarts.js"></script><title>和手机相处的时光</title></head><style>* {margin: 0;padding: 0;}#main {margin: 20px;background-color: white;}</style><body><div id="main" style="width: 1000px; height: 600px"></div></body>
<!DOCTYPE html>：声明文档类型为 HTML5。<meta charset="UTF - 8" />：设置字符编码为 UTF - 8，确保页面能正确显示各种字符。<meta name="viewport" content="width=device - width, initial - scale = 1.0" />：设置视口属性，使页面在不同设备上能自适应显示。<script src="./js/echarts.js"></script>：引入 ECharts 库，用于后续绘制折线图。<title>和手机相处的时光</title>：设置网页标题，显示在浏览器标签栏上。<style>标签内的 CSS 代码：
* { margin: 0; padding: 0; }：将所有元素的外边距和内边距都设置为 0，避免默认样式的影响。#main { margin: 20px; background - color: white; }：为id为main的元素设置外边距为 20px，背景颜色为白色。<div id="main" style="width: 1000px; height: 600px"></div>：创建一个div元素，作为 ECharts 图表的容器，设置其宽度为 1000px，高度为 600px。
三、JavaScript 部分
1. 获取 DOM 元素并初始化 ECharts 实例
var chartDom = document.getElementById("main"); var myChart = echarts.init(chartDom);
document.getElementById("main")：这是 JavaScript 原生的方法，用于从文档中获取具有指定id的元素。在这个 HTML 页面里，id为main的元素是之前创建的<div>容器，它将作为 ECharts 图表的显示区域。通过将该元素赋值给变量chartDom，后续可以基于这个元素来初始化 ECharts 图表。echarts.init(chartDom)：调用 ECharts 库提供的init方法，传入chartDom作为参数，以此初始化一个 ECharts 实例。这个实例myChart就代表了要在chartDom这个<div>容器中绘制的图表。2. 配置 ECharts 选项
var option = {title: {text: "一周的手机使用时长",},xAxis: {type: "category",data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},yAxis: {type: "value",},series: [{data: [2.5, 2, 2.6, 3.2, 4, 6, 5],type: "line",},], };3. 标题配置
title: {text: "一周的手机使用时长", },
title是 ECharts 配置项中的一个属性，用于设置图表的标题。text是title对象下的一个属性，它的值"一周的手机使用时长"就是要显示在图表上方的标题文本。4. x 轴配置
xAxis: {type: "category",data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], },
xAxis用于配置图表的 x 轴。type: "category"：将 x 轴的类型设置为category（类别型），表示 x 轴要显示的是离散的类别数据，适合用于展示一周中的每一天这种分类信息。data：是一个数组，数组中的每个元素代表 x 轴上的一个类别。这里依次列出了一周七天，ECharts 会按照这个顺序在 x 轴上显示相应的标签。5. y 轴配置
yAxis: {type: "value", },
yAxis用于配置图表的 y 轴。type: "value"：将 y 轴的类型设置为value（数值型），意味着 y 轴将用于显示连续的数值数据，这里对应的是每天使用手机的时长。由于没有特别指定data属性，ECharts 会根据series中的数据自动计算并确定 y 轴的刻度范围和标签。6. 系列配置
series: [{data: [2.5, 2, 2.6, 3.2, 4, 6, 5],type: "line",}, ],
series是 ECharts 配置项中用于定义图表系列的属性，一个series数组可以包含多个系列对象，每个系列对象代表一组数据及其对应的图表类型。data：是一个数组，数组中的每个元素对应 x 轴上相应位置的数值。在这里，[2.5, 2, 2.6, 3.2, 4, 6, 5]分别表示周一到周日每天使用手机的时长。type: "line"：指定该系列的图表类型为折线图，ECharts 会根据data数组中的数据和 x 轴的类别信息，绘制出一条反映一周手机使用时长变化的折线。7. 应用配置选项到 ECharts 实例
myChart.setOption(option);
setOption是 ECharts 实例的一个方法，用于将配置选项option应用到之前初始化的 ECharts
测试结果👍
 "js积累四 (读json文件)")
