【Html.js——Bug修复】和手机相处的时光（蓝桥杯真题-2450）【合集】-CSDN博客

本文链接：https://blog.csdn.net/lowkeyyh/article/details/145483940

目录😋

背景介绍

现在都提倡健康使用手机，那么统计一下在一周中每天使用手机的情况吧！本题使用 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.zip
在浏览器中预览 index.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