蓝桥杯练习04学生成绩统计

学生成绩统计

介绍

随着大数据的发展,数据统计在很多应用中显得不可或缺,echarts作为一款基于JavaScript的数据可视化图表库,也成为了前端开发的必备技能,下面我们一起来用echarts开发一个学生数据统计的柱形图。

准备

开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:

其中:
·echarts.js是echarts图表的js文件。
·index.html是图表页面。
在浏览器中打开index.html页面,打开控制台,我们会发下如下报错:

在echars图标中,x轴和y轴无论存不存在数据都必须要定义。这个报错主要是因为没有定义x轴引起的。

目标

1.在需要修改的地方,有详细的注释,请仔细阅读。
2.修复项目中的报错,并让让统计图表按照正确的方向显示(提示:x轴的写法请参照y轴)。修改index.html中的is部分,效果如下:

代码

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>学生成绩统计</title><script src="./echarts.js"></script>
</head><body><div id="main" style="width: 600px; height: 400px"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById("main"));// 指定图表的配置项和数据var option = {title: {text: "学生成绩统计",},tooltip: {},legend: {data: ["成绩"],},// TODO:待补充修改代码,定义x轴数据,并让数据正确显示// y轴yAxis: {},series: [{name: "成绩",type: "bar",data: [55, 90, 65, 70, 80, 63],}, ],};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body></html>

答案

xAxis: {data: ["张三", "李四", "王五", "贺八", "杨七", "陈九"],},

小结:本体考验的是学习模仿能力,给了y轴的写法,需要写x轴。当然学习过echarts更好

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

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

相关文章

Vmware使用ubuntu报错空间不够

Vmware使用ubuntu报错空间不够 1.vmware修改2.进入镜像进行修改2.1需要下载GParted软件 1.vmware修改 这个需要把硬盘的大小进行扩展 2.进入镜像进行修改 2.1需要下载GParted软件

C++_回文串

目录 回文子串 最长回文子串 分割回文串 IV 分割回文串 II 最长回文子序列 让字符串成为回文串的最少插入次数 回文子串 647. 回文子串 思路&#xff0c;i j表示改范围内是否为回文串&#xff0c; ②倒着遍历是为了取出dp[i 1][j - 1] ③i j 只有一对&#xff0c;不会重复…

harmonyOS简介及背景

harmonyOS的场景模式18n: 1&#xff08;入口手机&#xff09;8&#xff08;电脑、VR、手环、iPad、智慧屏、&#xff09;–wifi—n(车载、智能家居等所有)harmonyOS不需要考虑软硬件的差异&#xff0c;是一个兼容N种的超级终端harmonyOS干了两件事&#xff1a; &#xff08;1&a…

施工升降机AI数人数识别摄像机

施工现场作为一个复杂的工作环境&#xff0c;在施工过程中通常会有大量的人员出入&#xff0c;为了确保施工安全和管理效率&#xff0c;近年来施工升降机AI数人数识别摄像机应运而生。 这种摄像机依靠先进的人工智能技术和摄像头设备&#xff0c;能够实时监测和识别施工升降机内…

AIGC——ComfyUI工作流搭建、导入与常用工作流下载

工作流 ComfyUI工作流是一个基于图形节点编辑器的工作流程&#xff0c;通过拖拽各种节点到画布上&#xff0c;连接节点之间的关系&#xff0c;构建从加载模型到生成图像的流程。每个节点代表一个与Stable Diffusion相关的模型或功能&#xff0c;节点之间通过连线传递图片信息。…

2390.从字符串中移除星号

题目&#xff1a;给你一个包含若干星号 * 的字符串 s 。 在一步操作中&#xff0c;你可以&#xff1a; 选中 s 中的一个星号。移除星号 左侧 最近的那个 非星号 字符&#xff0c;并移除该星号自身。 返回移除 所有 星号之后的字符串。 注意&#xff1a; 生成的输入保证总是…

如何对静态IP进行测试?静态IP有什么优点?

随着互联网的普及&#xff0c;越来越多的人开始使用动态IP进行上网。但是在某些情况下&#xff0c;我们可能需要使用静态IP进行测试或特定的网络设置。本文将介绍如何获取静态IP进行测试以及静态IP的优点。 一、如何获取静态IP进行测试&#xff1f; 1.联系ISP&#xff08;Int…

【JS】数组查重

码 /*** 数组查重* param {Array} arr 查重的数组* returns Array 返回不重复的数组 */ const noReArr arr > [...new Set(arr)]const a [12,12,3,4] console.log( noReArr(a) );效果图

031—pandas 读取解析实验室数据至DataFrame

前言 某个科研实验室在进行一项物理实现&#xff0c;实验仪器会输出一个 txt 文本的数据&#xff0c;研究人员需要从这个文本中将数据结构化才能进行进行统计分析。 在为个解析和分析过程中&#xff0c;他们选择了 Python 的 pandas 库来完成这些操作。我们今天来完成这这个 t…

使用AOP拦截全局请求并校验请求参数

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

【数据结构】猛猛干11道链表OJ(未完待续ing)

前言知识点 链表的调试技巧 int main() {struct ListNode* n1(struct ListNode*)malloc(sizeof(struct ListNode));assert(n1);struct ListNode* n2(struct ListNode*)malloc(sizeof(struct ListNode));assert(n2);struct ListNode* n3(struct ListNode*)malloc(sizeof(struc…

蓝桥杯 2023 省B 飞机降落

首先&#xff0c;这题要求的数据量比较少&#xff0c;我们可以考虑考虑暴力解法。 这题可能难在很多情况的考虑&#xff0c;比如说&#xff1a; 现在时间是10&#xff0c;有个飞机20才到&#xff0c;我们是可以干等10分钟。 #include <iostream> #include <…

对话奇酷网络董事长吴渔夫: 迟到的游戏公司会被AI浪潮卷入海底

“ 迟到的游戏公司会被无形的 AI 浪潮卷入海底。” 整理 | 梦婕 编辑 | 云舒 出品&#xff5c;极新 2024年3月4日&#xff0c;在极新与吴渔夫的对话中&#xff0c;吴渔夫多次呼吁“全力拥抱AI”。在这场AI浪潮中&#xff0c;作为中国网游的先锋&#xff0c;他带着 25 年“中…

【web前端】<meta>标签

meta元素可以提供有关页面的元信息&#xff08;meta-information&#xff09; meta标签位于文档的头部&#xff0c;是空元素 meta元素的属性 属性值描述http-equiv expires refresh X-UA-compatible 定义HTTP协议的头部元信息名称。其中&#xff0c;expires设置网页在缓存区的…

记录一下目前为止的算法成长

每日笔记 复习曲线 间隔1天、3天、7天、15天、30天&#xff0c;然后以一个月为周期复习 2023. 12. 24 一定要每天早中晚都要复习一下 早中午每段一两道, 而且一定要是同一个类型, 不然刷起来都没有意义 11.29 开始向着面试刷题跟进! 每天刷4题左右 ,一周之内一定要是统一类…

笔记本8代i5和台式机12代i5的性能比较

一、 台式机12代i5 二、笔记本8代i5 在多核性能上差不多是2.4倍&#xff0c;所以跑大一点的Matlab或者别的程序&#xff0c;用台式机&#xff0c;后边实验室能用上超多核服务器另说。

uniapp,导航栏(切换项)有多项,溢出采取左滑右滑的形式展示

一、实现效果 当有多项的导航&#xff0c;或者说切换项&#xff0c;超出页面的宽度&#xff0c;我们采取可滑动的方式比较好一些&#xff01;并且在页面右边加个遮罩&#xff0c;模拟最右边有渐变效果&#xff01; 二、实现代码 html代码&#xff1a; <!-- 头部导航栏 --…

鸿蒙Harmony应用开发—ArkTS-转场动画(共享元素转场)

当路由进行切换时&#xff0c;可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 属性 名称参数参数描述…

F. Microcycle(dfs 搜寻路径 + 并查集)

解析&#xff1a; 本题的意思是&#xff0c;求一个环的最小的那条边。 并且输出其这个环的点。 我们可以利用并查集&#xff0c;进行确定其是否有环路。在将所用的边从大到小排序。 利用 vector容器&#xff0c;pop_back() 和 push的特性。 起点为 u终点为 v寻找路径。 代…

投简历没回复?9位DBA公众号集结,快上车!

&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&#x1f61c;&#x1f61c; 中国DBA联盟(ACD…