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,一经查实,立即删除!

相关文章

【数据结构】平衡树

实现功能&#xff1a; 插入数值删除数值查询某排名的数字查询某数值的排名查询前驱后继 const int N 100010, INF 1e8;int n; struct Node {int l, r; // 左右子结点编号int key, val; // key:结点本身的值 val:为了使二叉树平衡的随机数int cnt, size; // cnt:当前结点的数…

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…

python/c++ Leetcode题解——2744. 最大字符串配对数目

方法一:两重循环枚举 思路与算法 我们可以直接使用二重循环,枚举给定的数组 words 中的 words[i] 和 words[j] 是否可以匹配。 由于题目规定了数组 words 中包含的字符串互不相同,因此在枚举时,只要保证 i<j,那么每个字符串最多匹配一次。 代码 C++: class Solut…

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;扩展 可自定义配置语言 ⭐效果⭐总…

嵌入式培训机构四个月实训课程笔记(完整版)-C++和QT编程第一天-C++概述和基础(物联技术666)

网盘链接:https://pan.baidu.com/s/1TKdHdeuDI8XPaakepvSLZQ?pwd=1688 提取码:1688 上午:C++概述 下午:C++基础 教学内容: 1、面向对象:程序=(对象+对象+…) 对象=(算法+数据结构) 2、类与对象: 对象是现实世界中的一个实体,其特征是: • 每一个对象必须…

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

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

高效实践,JavaScript全屏和退出全屏操作示例

背景 在项目中出现了一个需求&#xff0c;需要实现将页面投屏到屏幕上&#xff0c;并能够进行开启全屏和退出全屏的操作。 尽管网上有许多第三方开源库可供使用&#xff0c;但由于后续业务场景的不确定性&#xff0c;修改源代码可能带来较大的成本和风险。鉴于全屏功能的实现…

机器学习之伯努利分布及二项分布

伯努利分布:又称两点分布或0-1分布,其样本空间只有两个点,一般取{0,1},不同的伯努利分布只是取到这两个值的概率不一样。伯努利分布只有一个参数p(用描述取1的概率),记作 B e r n o u l l ( p ) Bernoull(p) Bernoull(p)或 X X X~ B ( p ) B(p) B(p)读作X服从参数为p的…

valgrind being installed on Arm platform

valgrind安装: tar -jxvf valgrind-3.12.0.tar.bz2 cd valgrind-3.12.0 ./configure make sudo make install2.在ARM的板子上运行valgrind, 程序出现valgrind Fatal error at startup: a function redirection的错误提示。查找了下&#xff0c;发现是因为libc或ld.so库进行过s…

.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;所以只能安装此版本…

python list.sort方法和内置函数sorted

list.sort 方法会就地排序列表&#xff0c;也就是说不会把原列表复制一份。这也是这个方法的返回值是 None 的原因&#xff0c;提醒你本方法不会新建一个列表。在这种情况下返回 None 其实是Python 的一个惯例&#xff1a;如果一个函数或者方法对对象进行的是就地改动&#xff…

Nginx 如何实现负载均衡?

Nginx 是一个高性能的 HTTP 和反向代理服务器&#xff0c;也是一个 IMAP/POP3/SMTP 代理服务器。由于其具有丰富的功能和出色的性能&#xff0c;Nginx 广泛应用于 Web 开发、负载均衡、反向代理等场景。在负载均衡方面&#xff0c;Nginx 可以实现基于轮询、IP_HASH、URL_HASH 和…

Kubernetes网络模型概述

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

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

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

ubuntu禁用/启用图形界面

当安装了带图形界的ubuntu的时候&#xff0c;如果觉得图形界面占资源&#xff0c;就需要将图形界面关闭&#xff0c;关闭的方法如下&#xff1a; 1、 打开 /etc/default/grub&#xff0c;修改或增加如下参数&#xff1a; GRUB_CMDLINE_LINUX_DEFAULT"text" GRUB_TE…

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;里…