web蓝桥杯真题--8、和手机相处的时光

介绍

现在都提倡健康使用手机,那么统计一下在一周中每天使用手机的情况吧!本题使用 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 分。

实现思路

这道题目比较简单,如果还记得之前写的那个web蓝桥杯真题--7、echarts 柱形图-CSDN博客这个就还算比较简单、

type:'value',表示的是数值,例如  data: ['0', '20', '40', '60', '80', '100']

 type: "category",表示的是类别, 例如:data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]

所以对比以后就会发现。其实就是这个标反了,修改即可

整体代码:

<!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: {type: "category",data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},yAxis: {type: "value",},series: [{data: [2.5, 2, 2.6, 3.2, 4, 6, 5],type: "line",},],};myChart.setOption(option);</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/631278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows NT 3.5源代码已编译!

2020年5月&#xff0c;Windows NT 3.5 build 782源代码被泄露。然而&#xff0c;它缺少很多文件&#xff0c;包括编译器、链接器、头文件等。大多数这些工具都可以从 Windows NT 3.5 的 SDK 和 DDK 中应用&#xff08;您也可以临时处理 NT 3.51 的 DDK 文件&#xff0c;但之后根…

【Filament】材质系统

1 前言 本文主要介绍 Filament 的材质系统&#xff0c;官方介绍详见 → Filament Materials Guide。材质系统中会涉及到一些空间和变换的知识点&#xff0c;可以参考&#xff1a;【Unity3D】空间和变换、【Unity3D】Shader常量、变量、结构体、函数、【OpenGL ES】MVP矩阵变换、…

Nsis打包Unity Exe文件(通用)

Nsi 脚本 !include "MUI2.nsh"#使用现代UI Unicode true #使用Unicode !define EXENAME "exeName" #定义常量 exe名称 !define SHORTCUT "快捷方式名称" #定义桌面快捷方式的中文名称Name ${EXENAME} #安装程序的title OutFile "${EXENAME…

react-app框架——使用monaco editor实现online编辑html代码编辑器

文章目录 ⭐前言&#x1f496;react系列文章 ⭐配置monaco-editor&#x1f496;引入react-monaco-editor&#x1f496;引入react-app-rewired&#x1f496;通过config-overrides.js添加monaco插件配置 ⭐编辑代码的react页面配置&#x1f496;扩展 可自定义配置语言 ⭐效果⭐总…

Salesforce生成式AI聊天机器人「Einstein Copilot」,将于2月发布!

Spring 24宣布&#xff0c;期待已久的Einstein Copilot将于2024年2月落地Salesforce。该生成式AI聊天机器人将用于整个Salesforce产品套件&#xff0c;帮助企业做出更明智的决策&#xff0c;从而改善客户体验。 Einstein Copilot应用于CRM应用程序中&#xff0c;智能回应任何用…

.net core 6 使用注解自动注入实例,无需构造注入 autowrite4net

像java使用autowrite一样使用 1、前提先注册到ioc容器当中 builder.Services.AddScoped 2、nuget引入AutoWrite4Net 3、启用 //启用自动注入 app.UseAutoWrite(); 4、在类上使用注解 [StartAutoWrite] public class NacosController : ControllerBase 5、实例上使用注解 …

2.mac 安装 Visual studio code 整合go开发

目录 概述前置下载关键命令整合C#go配置go插件常见的go工具安装测试 结束 概述 mac 安装 Visual studio code 整合go开发 相关前置文章 go安装及相关配置 文章 前置 官网速递 mac 系统高于等于 10.15.x 可以直接最新版本 我的系统是 10.13 &#xff0c;所以只能安装此版本…

Kubernetes网络模型概述

Kubernetes网络模型设计的一个基础原则是&#xff1a;每个Pod都拥有一个独立的IP地址&#xff0c;并假定所有Pod都在一个可以直接连通的、扁平的网络空间中。所以不管这些Pod是否运行在同一个Node中&#xff0c;都要求它们可以直接通过对方的IP进行访问。由于Kubernetes的网络模…

Redis服务端优化(持久化配置、慢查询、命令及安全配置、内存配置)

文章目录 持久化配置慢查询命令及安全配置内存配置 持久化配置 慢查询 命令及安全配置 漏洞&#xff1a;Redis未授权访问配合SSH key文件利用分析-腾讯云开发者社区-腾讯云 (tencent.com) 漏洞出现的核心的原因有以下几点 Redis未设置密码利用了Redis的config set命令动态修…

python数字图像处理基础(五)——Canny边缘检测、图像金字塔、图像分割

目录 Canny边缘检测原理步骤 图像金字塔1.高斯金字塔2.拉普拉斯金字塔 图像分割图像轮廓检测1.检测轮廓2.绘制轮廓3.补充 Canny边缘检测 梯度是什么? 梯度就是变化的最快的那个方向 edge cv2.Canny(image, threshold1, threshold2[, edges[, apertureSize[, L2gradient ]]…

Codeforce s Round 920 (Div. 3) G题 旋转矩阵,斜缀和,平移

Problem - G - Codeforces 目录 题意&#xff1a; 思路&#xff1a; 总思路&#xff1a; 旋转矩阵&#xff1a; 前缀和预处理&#xff1a; 平移的处理&#xff0c;尤其是越界的处理&#xff1a; 核心代码&#xff1a; 题意&#xff1a; 给你个n*m的矩阵&#xff0c;里…

[自动化分布式] Zabbix自动发现与自动注册

abbix 自动发现&#xff08;对于 agent2 是被动模式&#xff09; zabbix server 主动的去发现所有的客户端&#xff0c;然后将客户端的信息登记在服务端上。 缺点是如果定义的网段中的主机数量多&#xff0c;zabbix server 登记耗时较久&#xff0c;且压力会较大 部署 添加zabb…

漏洞扫描的原理是什么,分为几个阶段进行

网络漏洞扫描主要通过扫描已知的网络缺陷、不正确的网络设置和过时的网络应用版本来检测漏洞。漏洞扫描主要分为哪三个阶段&#xff1f;对于企业来说&#xff0c;创建持续监控容器并查找安全漏洞的服务。 漏洞扫描的原理 一、信息收集 漏洞扫描器首先会收集目标系统的相关信息…

javacv和opencv对图文视频编辑-裸眼3D图片制作

通过斗鸡眼&#xff0c;将左右两张相似的图片叠加到一起看&#xff0c;就会有3D效果。 3D图片&#xff0c;3D眼镜&#xff0c;3D视频等原理类似&#xff0c;都是通过两眼视觉差引起脑补产生3D效果。 图片&#xff1a; 图片来源&#xff1a; 一些我拍摄的真*裸眼3D照片 - 哔哩…

1114: 逆序(数组)

题目描述 输入n&#xff08;1<n<10&#xff09;和n个整数&#xff0c;逆序输出这n个整数。 输入 输入n&#xff08;1<n<10&#xff09;&#xff0c;然后输入n个整数。 输出 逆序输出这n个整数&#xff0c;每个整数占4列&#xff0c;右对齐。 样例输入 6 4 5…

Leetcode:128. 最长连续序列

128. 最长连续序列 乍一看感觉很简单&#xff0c;一看要用O(n)??? 因为我觉得题目很难而且题目看起来很简单&#xff0c;感觉以后会用到&#x1f606;&#xff0c;做个记录 1.朴素做法 思路 答:任何一段连续的数都有一个左端点&#xff1a;比如&#xff08;1&#xff0c;…

Android车载系统Car模块架构链路分析

一、模块主要成员 CarServiceHelperService SystemServer 中专门为 AAOS 设立的系统服务&#xff0c;用来管理车机的核心服务 CarService。该系统服务的具体实现在 CarServiceHelperServiceUpdatableImpl CarService Car模块核心服务APP&#xff0c;Android 13版本开始分为…

Qt纯代码实现UI界面

1.相关信息 设置编辑框内容的字体样式&#xff0c;包括加粗、下划线、斜体、蓝色、红色、黑色 2.界面展示 3.相关代码 #include "dialog.h" #include <QHBoxLayout> #include <QVBoxLayout> #include <QCheckBox> #include <QRadioButton> …

commvault学习(5):在linux上安装cv客户端

我的环境&#xff1a; 服务器&#xff08;同时装有CS、MA&#xff09;&#xff1a;windows server2008r2 客户端&#xff1a;两台centos7 1.为两台centos7配置静态ip 使得2者可以与服务器ping通 2.在两台centos7上预留出足够大的磁盘空间以存放安装文件 我是在/mnt下创建了…

软件测试|使用matplotlib绘制箱型图

简介 绘制箱型图&#xff08;Box Plot&#xff09;是一种常用于可视化数据分布的方法&#xff0c;它可以显示数据的中位数、四分位数、异常值等统计信息。Matplotlib 是一个强大的 Python 数据可视化库&#xff0c;可以轻松绘制箱型图。在本文中&#xff0c;我们将介绍如何使用…