当前位置: 首页 > news >正文

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>

相关文章:

  • 2.【Linux】(进程的状态||深入理解fork||底层剖析||task_struct||进程优先级||并行和并发||详解环境变量)
  • k8s学习-Deployment
  • javaweb学习day01(HTML)
  • 前端关于学习方式,解决问题的面试题(本人真实面试题)
  • Windows系统还原打印机系统教程
  • kafka简单介绍和代码示例
  • 【深度学习入门】深度学习基础概念与原理
  • 一款优秀的双链笔记Blossom 安装教程 私有部署的云端双链笔记软件Blossom
  • UI设计中插画赏析和产品色彩分析
  • 昇思MindSpore技术公开课——第三课:GPT
  • GO基础进阶篇 (十四)、Http编程
  • 现阶段Python和Java哪个更吃香?
  • 代码随想录算法训练营第二十三天| 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树
  • 网络安全(黑客)—2024秩序
  • 实验二 体系结构
  • bearychat的java client
  • gitlab-ci配置详解(一)
  • iOS 系统授权开发
  • java中的hashCode
  • Mysql数据库的条件查询语句
  • React中的“虫洞”——Context
  • Redux系列x:源码分析
  • Spring声明式事务管理之一:五大属性分析
  • 解决jsp引用其他项目时出现的 cannot be resolved to a type错误
  • 猫头鹰的深夜翻译:Java 2D Graphics, 简单的仿射变换
  • 前端路由实现-history
  • 我的业余项目总结
  • 小程序01:wepy框架整合iview webapp UI
  • gunicorn工作原理
  • Java数据解析之JSON
  • ​Python 3 新特性:类型注解
  • ​决定德拉瓦州地区版图的关键历史事件
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • (1) caustics\
  • (3)nginx 配置(nginx.conf)
  • (poj1.2.1)1970(筛选法模拟)
  • (二)Linux——Linux常用指令
  • (附源码)springboot 基于HTML5的个人网页的网站设计与实现 毕业设计 031623
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (一)eclipse Dynamic web project 工程目录以及文件路径问题
  • (转)大型网站架构演变和知识体系
  • (转)视频码率,帧率和分辨率的联系与区别
  • (最完美)小米手机6X的Usb调试模式在哪里打开的流程
  • .NET单元测试
  • .net快速开发框架源码分享
  • .NET轻量级ORM组件Dapper葵花宝典
  • .NET文档生成工具ADB使用图文教程
  • .skip() 和 .only() 的使用
  • ??myeclipse+tomcat
  • [.net] 如何在mail的加入正文显示图片
  • [20190401]关于semtimedop函数调用.txt
  • [Android]创建TabBar
  • [APIO2015]巴厘岛的雕塑
  • [Avalon] Avalon中的Conditional Formatting.