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

news2024/11/26 14:48:30

介绍

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

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

相关文章

深度学习记录--梯度检验

数值逼近 为了对梯度进行检验&#xff0c;需要计算近似误差值来接近梯度 对于单边误差和双边误差公式&#xff0c;其中双边误差与真实梯度相差更小&#xff0c;故一般采用双边误差公式 双边误差 公式&#xff1a; 梯度检验(gradient checking) 对于成本函数&#xff0c;求出…

Python 邮件发送

首先需要有一个邮箱&#xff0c;没有就注册一个&#xff0c;最好是163邮箱。 本文将使用163邮箱讲解python发送邮件。 目录 开启邮箱smtp服务 打开SMTP设置 开启SMTP服务 记录授权密码和服务端配置 脚本发送邮件 引入所需的库 发送配置 邮箱登录发送邮件 查看收到邮件…

如何做标准化?| 京东云技术团队

在现代信息化的市场环境和社会中&#xff0c;标准化已经成为了各种行业的一个重要的标志。标准化不仅可以提升生产效率&#xff0c;减轻质量问题&#xff0c;还可以增加产品的可靠性和互通性。在这篇文章中&#xff0c;我们将探讨如何做标准化&#xff0c;为您提供详细的指导和…

一个小程序跳转到另一个小程序中如何实现

小程序 保证两个小程序是一样的主体才可以跳转。怎么知道是不是同样的主体呢&#xff1f; 小程序的后台管理-设置-基本设置-基本信息。查看主体信息。 跳转 <button clicktoOtherMini()>跳转到另一个小程序</button> function toOtherMini(){wx.navigateToMini…

chromedriver+Selenium+springboot+Java实现后端截图

chromedriver这种方法实现截图&#xff0c;依赖服务器端的谷歌浏览器软件&#xff0c;需要在服务器端下载谷歌浏览器。 Windows服务器说明 1.下载谷歌浏览器 2.根据第一步下载的谷歌浏览器版本&#xff0c;下载chromedriver&#xff0c;可以在这个页面找到和版本相近的版本去下…

开源进程/任务管理服务Meproc使用之HTTP API

本文讲述如何使用开源进程/任务管理服务Meproc的HTTP API管理整个服务。 Meproc所提供的全部 API 的 URL 都是相同的。 http://ip:port/proc例如 http://127.0.0.1:8606/proc在下面的小节中&#xff0c;我们使用curl命令向您展示 API 的方法、参数和请求正文。 启动任务 …

嵌入式-Stm32-江科大基于标准库的GPIO4个小实验

文章目录 一 、硬件介绍二 、实验&#xff1a;LED闪烁、LED流水灯、蜂鸣器提示2.1 需求1&#xff1a;面包板上的LED以1s为周期进行闪烁。亮0.5s,灭0.5s.....2.2 需求2: 8个LED实现流水灯 三、硬件介绍-按键开关、光敏电阻四、 实验 按键控制LED、光敏传感器控制蜂鸣器4.1 需求1…

CNAS中兴新支点——软件测试7条原则

软件测试报告 最需要注意的就是测试思考&#xff0c;而非测试执行。而对软件测试菜鸟来说&#xff0c;初入行&#xff0c;首先要知道软件测试的7条原则&#xff0c;了解这些可以让你事倍功半。 软件测试的7条原则 1&#xff09;测试的不可穷尽原则 是的&#xff01;任何产品…

【K8S 云原生】K8S的对外服务—ingress

目录 一、K8S的Service 1、Service的作用 2、Service类型&#xff1a; 二、ingress 1、ingress的组成&#xff1a; 2、ingress资源的定义项&#xff1a; 3、ingress暴露服务端的方式 3.1、DeploymentLoadBalancer模式&#xff1a; 1、工作流程图&#xff1a; 3.2、Dae…

Eclipse闪退 打开eclipse闪退 打开eclipse图标一闪而过 eclipse闪退 eclipse打不开

Eclipse闪退 打开eclipse闪退 打开eclipse图标一闪而过 eclipse闪退 eclipse打不开 问题描述切换为命令行启动 查看异常日志 问题描述 双击图标&#xff0c;窗口一闪而过&#xff0c;马上关闭了 切换为命令行启动 查看异常日志 进入Eclipse安装目录&#xff0c;运行终端启动…

Tektronix/泰克MSO5204B混合信号示波器

181/2461/8938产品概述&#xff1a; 带宽:2 GHz通道:4个模拟通道和16个数字通道采样速率:10 GS/s记录长度:50分钟FastAcq采集的最大波形捕获速率超过250&#xff0c;000 wfms/sFastFrame分段内存采集模式&#xff0c;每秒可采集多达290&#xff0c;000个分段和超过310&#xff…

Blender——将模型及其所有纹理与材质导入unity

前期准备 参考视频&#xff1a;7分钟教会你如何将Blender的模型材质导入unity_哔哩哔哩_bilibili 实验模型官网下载地址&#xff1a;Hoi An Ancient House Model free VR / AR / low-poly 3D model CSDN下载链接&#xff1a; 【免费】Blender三维模型-古代房屋模型&#xff…

逆向使用webpack打包的网站

webpack webpack 是 JavaScript 应用程序的模块打包器,可以把开发中的所有资源&#xff08;图片、js文件、css文件等&#xff09;都看成模块&#xff0c;通过loader&#xff08;加载器&#xff09;和 plugins &#xff08;插件&#xff09;对资源进行处理&#xff0c;打包成符…

【银行测试】银行项目,信贷/贷款业务测试+常问面试(二)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行测试-信贷&am…

1358. 素数环-深度优先搜索-DFS

代码&#xff1a; #include <bits/stdc.h> using namespace std; int n, a[19], c 0; bool f[19]; bool prime(int n){if(n 1)return false;for ( int i 2 ; i * i < n ; i )if(n % i 0)return false;return true; } void print(){c;cout << c << &q…

Kafka-消费者-KafkaConsumer分析-ConsumerNetworkClient

前面介绍过NetworkClient的实现&#xff0c;它依赖于KSelector、InFlightRequests、Metadata等组件&#xff0c;负责管理客户端与Kafka集群中各个Node节点之间的连接&#xff0c;通过KSelector法实现了发送请求的功能&#xff0c;并通过一系列handle*方法处理请求响应、超时请求…

el-table里面存在固定列获取video的ref的时候无法获取原始DOM

el-table里面存在固定列获取video的ref的时候无法获取原始DOM 问题复现 这是通过ref获取的dom实例&#xff0c;却变成了fixed固定出现了表格里面的video的实例 我现在的需求是修改里面的currentTime&#xff0c;但是获取的是固定列的video的ref&#xff0c;修改了&#xff0c…

Redis 笔记一

概览 1.Redis核心数据存储结构 2.Redis底层String编码int&embstr&raw 3.Redis底层压缩列表&跳表&哈希表 4.Redis底层Zset实现压缩列表和跳表如何选择 5.基于Redis实现微博&抢红包&12306核心业务 辅助学习&#xff1a;Redis 教程 | 菜鸟教程 1.Redis为什…

虚拟架桥:SD-WAN企业组网网络的智慧构筑

云桥通SD-WAN企业组网&#xff08;软件定义广域网&#xff09;代表着一项通过软件定义和虚拟化技术&#xff0c;将企业分支机构、数据中心和云服务等多种网络连接有机整合的创新解决方案。其核心框架涵盖了以下关键构成&#xff1a; 边缘设备&#xff1a; 在云桥通SD-WAN企业组…

小程序中使用上传图片,显示、删除、预览

一、功能介绍 需要哦用户点击加号上传图片&#xff0c;并展示所上传图片和能够删除和预览 二、功能实现 采用的uniapp&#xff0c;创建了一个view容器包裹加号图标和展示的图片。 内部展示图片超过9张时候&#xff0c;加号图片隐藏 <view class"img-list">/…