【Html.js——echarts 柱形图】学生信息统计（蓝桥杯真题-1843）【合集】

Rossy Yan

发布于 2025-01-24 11:22:21

10600

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

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

准备步骤

在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

wget https://labfile.oss.aliyuncs.com/courses/7835/echarts.zip && unzip echarts.zip && rm echarts.zip

下载完成之后的目录结构如下：

├── echarts.js
└── index.html

你可以参考下图中的步骤访问项目：

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
打开环境右侧的【Web 服务】。

打开控制台，我们会发下如下报错：

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

目标要求

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

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

通关代码✔️

<!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>echarts 柱形图</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: ['成绩']
            },
            // x 轴
            xAxis: {
                data: ['张三', '李四', '王五', '贺八', '杨七', '陈九']
            },
            // y 轴
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '成绩',
                    type: 'bar',
                    data: [55, 90, 65, 70, 80, 63]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

代码解析📑

一、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>echarts 柱形图</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轴
			xAxis: {
				data: ['张三', '李四', '王五', '贺八', '杨七', '陈九']

			},
			// y轴
			yAxis:{
				type:'value'
			},
			series: [
				{
					name: '成绩',
					type: 'bar',
					data: [55, 90, 65, 70, 80, 63]
				},

			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>


</body>

</html>

详细解释：

<!DOCTYPE html>：这是 HTML5 的文档类型声明，告诉浏览器使用 HTML5 标准来解析页面。
<html lang="en">：表示文档使用的语言是英语（en）。
<head> 部分：
- <meta charset="UTF-8">：设置页面的字符编码为 UTF-8，以支持多种语言和特殊字符。
- <meta http-equiv="X-UA-Compatible" content="IE=edge">：用于设置 Internet Explorer 浏览器的兼容性模式，确保使用最新的渲染引擎。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置视口的宽度和初始缩放比例，主要用于响应式设计，使页面在不同设备上有更好的显示效果。
- <title>echarts 柱形图</title>：定义页面的标题，会显示在浏览器的标题栏中。
- <script src="./echarts.js"></script>：引入 Echarts 库的 JavaScript 文件，文件名为 echarts.js，通过相对路径 ./echarts.js 引入，该文件包含了 Echarts 的核心功能。
<body> 部分：
- <div id="main" style="width: 600px;height:400px;"></div>：创建一个 id 为 main 的 div 元素，作为 Echarts 图表的容器，通过内联样式设置其宽度为 600px，高度为 400px。
- <script type="text/javascript">：在页面中嵌入 JavaScript 代码。
  - var myChart = echarts.init(document.getElementById('main'));：使用 Echarts 的 init 方法，将 id 为 main 的 div 元素作为容器，初始化一个 Echarts 实例。
  - var option = {...};：创建一个名为 option 的对象，包含了 Echarts 图表的各种配置信息。
    - title：定义图表的标题，这里的 text 属性设置为 '学生成绩统计'，将在图表上方显示该标题。
    - tooltip：设置鼠标悬停在图表元素上时显示的提示信息，这里使用默认设置，未添加具体的提示内容。
    - legend：设置图例，data 属性中的 ['成绩'] 表示图表中使用的系列名称，这里只有一个系列，即学生成绩。
    - xAxis：设置 x 轴的信息。
      - data: ['张三', '李四', '王五', '贺八', '杨七', '陈九']：将 x 轴的数据设置为学生的姓名列表，这些姓名将显示在 x 轴上。
    - yAxis：设置 y 轴的信息。
      - type: 'value'：将 y 轴的类型设置为数值轴，用于显示学生的成绩值，因为成绩是数值类型的数据。
    - series：定义图表的数据系列。
      - name: '成绩'：系列的名称，与 legend 中的数据项相对应。
      - type: 'bar'：指定图表的类型为柱状图。
      - data: [55, 90, 65, 70, 80, 63]：包含了每个学生对应的成绩数据，这些数据将根据 x 轴上的学生姓名显示为相应的柱形高度。
  - myChart.setOption(option);：将 option 对象中的配置信息应用到 Echarts 实例 myChart 上，从而显示出 Echarts 柱形图。

二、JavaScript 部分（echarts.js）

1. 简介

echarts.js 是百度开发的一款开源的、功能强大的数据可视化库，它能够以直观、美观的方式展示数据，帮助用户更好地理解和分析数据。无论是简单的统计图表，还是复杂的商业数据展示，都可以使用 echarts.js 来实现。

2. 功能特点

2.1 丰富的图表类型

柱状图（Bar Chart）：
- 用于比较不同类别数据的大小。例如，在销售数据统计中，可以用柱状图展示不同产品的月销售额，通过柱子的高低直观地对比各产品的销售情况。
- 支持堆叠柱状图，可用于显示多组数据在同一类别上的累加效果，如不同年份的各类产品销售额的总和对比。
- 可以设置柱状图的各种样式，如柱子的宽度、颜色、边框、透明度等，使图表更具表现力。
折线图（Line Chart）：
- 适合展示数据随时间或其他连续变量的变化趋势。例如，展示股票价格在一个月内的波动情况，能清晰地看到价格的涨跌趋势。
- 可添加标记点和标记线，突出重要的数据点或标记特殊的日期、事件等。
- 支持多条折线同时显示，用于对比不同数据序列的趋势，如不同产品的价格走势对比。
饼图（Pie Chart）：
- 主要用于展示各部分数据在总体中所占的比例。例如，在市场份额分析中，用饼图表示不同公司的市场占有率。
- 可以设置扇区的分离效果，突出显示某个或某些部分的数据。
- 可以自定义饼图的半径、起始角度，添加标签显示数据的百分比或实际值。
散点图（Scatter Chart）：
- 用于显示两个变量之间的关系，通过散点的分布观察数据的相关性。例如，分析身高和体重之间的关系，每个散点代表一个人的身高和体重数据。
- 可以设置散点的大小、颜色和形状，根据数据的不同属性进行区分。
- 支持大规模数据的展示，通过可视化的方式找出数据的聚集或离散区域。
雷达图（Radar Chart）：
- 用于多维度数据的对比和评估。比如在游戏角色能力评估中，从多个维度（如攻击力、防御力、生命值、魔法值等）展示角色的综合能力。
- 可以设置多边形的样式，包括边数、线条粗细、填充颜色等。
- 方便观察数据在多个维度上的平衡和分布情况。
地图（Map）：
- 支持多种地图投影方式，可展示不同区域的数据分布。例如，展示不同省份或国家的人口分布、GDP 分布等。
- 可以根据数据对地图区域进行颜色填充和边界样式设置，显示不同地区的差异。
- 可添加地图标记，标记重要的地点或数据点。
其他图表类型：
- 还包括漏斗图（用于展示流程的各个阶段的数据转换情况，如销售漏斗展示从潜在客户到最终成交的转化比例）、仪表盘（模拟仪表盘显示数据，如汽车的速度表）、箱线图（显示数据的分布情况，包括中位数、四分位数等）、热力图（通过颜色深浅表示数据的密度，常用于分析空间数据的分布，如网站用户的点击热区）等。

2.2 强大的交互功能

数据提示（Tooltip）：
- 当鼠标悬停在图表元素上时，会显示详细的数据信息。
- 可以自定义提示框的内容、样式、位置和触发方式，例如可以显示数据的精确值、百分比，甚至添加一些说明文字。
- 可根据不同的图表类型和数据进行个性化定制，使提示信息更加丰富和有用。
数据缩放（Data Zoom）：
- 支持对数据进行缩放操作，通过鼠标滚轮或双指操作可以放大或缩小数据的显示范围。
- 可用于查看数据的细节或整体趋势，在大数据集的情况下非常实用。
- 可以是区域缩放，也可以是滑块缩放，还可以对不同的坐标轴进行单独的缩放操作。
数据区域选择（Brush）：
- 允许用户通过鼠标拖动或绘制选区来选择部分数据区域。
- 可以根据选择的区域进行数据筛选、数据处理或进一步分析。
- 可以设置不同的选区样式和触发方式，为用户提供灵活的数据操作体验。
图例交互（Legend）：
- 点击图例可以控制数据系列的显示或隐藏，方便用户对多个数据系列进行筛选和对比。
- 可以设置图例的位置、布局和样式，使图例与图表整体风格协调一致。

2.3 高度可定制化

坐标轴（Axis）：
- 可以对坐标轴的各种属性进行定制，包括刻度线、刻度标签、轴线的样式和位置。
- 支持对数轴、时间轴、类目轴等不同类型的坐标轴。例如，在展示时间序列数据时使用时间轴，能自动根据时间间隔调整刻度。
- 可设置坐标轴的名称、名称位置和字体样式，使坐标轴的信息更清晰。
数据系列（Series）：
- 对不同的数据系列可以进行详细的样式定制，如颜色、标记、线条、填充、阴影等。
- 可以设置数据系列的堆叠顺序，在多系列图表中控制显示层次。
- 可根据数据值的大小或类别为系列添加不同的视觉效果，如渐变颜色、纹理等。
视觉映射（VisualMap）：
- 将数据映射到不同的视觉元素，如颜色、大小、透明度等。例如，根据数据的大小将数据点的颜色从浅到深进行渐变，或者将数据值映射到不同的形状大小。
- 可以设置视觉映射的范围、颜色范围和分段，使数据的分布和差异更加直观。

3. 内部工作原理

3.1 数据处理

echarts.js 首先会对用户提供的数据进行处理和解析，将其转换为内部数据结构。对于不同类型的图表，会根据配置对数据进行不同的处理。例如，在柱状图中，会根据 xAxis 和 yAxis 的配置将数据映射到相应的坐标轴上，确定柱子的位置和高度；在饼图中，会计算各部分数据在整体中的比例，确定扇区的角度。
对于大规模数据，会采用一些优化算法，避免性能问题。例如，对于散点图，会根据数据的分布和显示范围，合理选择需要绘制的点，避免绘制过多的点影响性能。

3.2 图形绘制

基于 Canvas 绘制：
- 大部分情况下，echarts.js 使用 HTML5 的 Canvas 元素进行图形绘制。它会在初始化时创建一个 Canvas 元素，并通过 JavaScript 的 Canvas API 进行绘制。
- 在绘制过程中，根据配置和数据，使用 fillRect 绘制柱状图的柱子，moveTo 和 lineTo 绘制折线图的线条，arc 绘制饼图的扇区等。
- 可以利用 Canvas 的分层绘制功能，将不同的图表元素绘制在不同的层上，方便实现交互效果和元素的遮挡关系处理。
基于 SVG 绘制：
- 对于一些需要更好的可编辑性和可访问性的场景，也可以使用 SVG 进行绘制。它会创建一系列的 SVG 元素，如 <rect> 表示矩形、<circle> 表示散点、<path> 表示折线等。
- SVG 元素的属性可以通过 JavaScript 动态修改，方便更新和交互，同时可以利用 SVG 的 CSS 样式进行样式控制。

3.3 交互处理

echarts.js 会监听各种用户事件，如鼠标的点击、移动、滚轮滚动等。当用户触发这些事件时，根据配置和当前状态，执行相应的操作。
对于数据提示，会根据鼠标位置和数据元素的位置，计算并显示相应的提示信息；对于数据缩放，会根据用户的操作重新计算数据的显示范围和图表的比例；对于数据区域选择，会根据用户绘制的区域筛选数据，并更新图表显示。

4. 使用步骤

4.1 引入文件

在 HTML 页面中，通过 <script> 标签引入 echarts.js 文件，例如：

<script src="echarts.js"></script>

4.2 初始化图表

在 JavaScript 代码中，使用 echarts.init 方法将一个 HTML 元素（通常是一个 <div>）初始化为 Echarts 图表容器。例如：

var myChart = echarts.init(document.getElementById('chart-container'));

4.3 配置图表

创建一个配置对象，包含图表的各种信息，如标题、坐标轴、数据系列、交互设置等。例如：

var option = {
    title: {
        text: '示例图表'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'bar',
            data: [10, 20, 30, 40]
        }
    ]
};

4.4 显示图表

使用 setOption 方法将配置对象应用到图表实例上，生成并显示图表：

myChart.setOption(option);

5. 性能优化

对于大数据集，可以使用 large 模式，提高渲染性能。例如：

var myChart = echarts.init(document.getElementById('chart-container'), null, {
    renderer: 'canvas',
    useDirtyRect: true
});

合理设置 dataZoom 范围，避免不必要的数据显示，减少渲染压力。

6. 与其他技术的结合

可以与 Vue.js、React.js 等前端框架结合使用，将 Echarts 封装为组件，方便在复杂的前端项目中使用。
可以与后端技术（如 Node.js）配合，从后端获取数据并动态更新图表，实现动态数据展示。

7. 版本更新与社区支持

echarts.js 会持续更新，带来新的功能和性能优化。使用时需关注官方网站的更新信息，以保证使用最新的功能和修复可能的漏洞。
有活跃的社区，可在官方论坛、GitHub 仓库等地方找到各种问题的解决方案和丰富的示例代码，方便开发者学习和使用。

三、工作流程 ▶️

HTML 部分加载和执行顺序：
- 当浏览器加载这个 HTML 页面时，首先会解析 <!DOCTYPE html>，并识别出这是一个 HTML5 页面。
- 接着处理 <head> 部分，设置字符编码，加载外部的 JavaScript 文件 ./js/index.js。
- 当浏览器解析到 <body> 中的 <script> 部分时，开始执行其中的 JavaScript 代码。
JavaScript 函数调用和执行顺序：
- 调用 getRandomNum(1, 30, 3) 函数，开始生成 1 到 30 之间的 3 个不重复随机数。
  - 创建一个空数组 arr。
  - 进入 while 循环，不断生成随机数，直到数组长度达到 3 个。
  - 在每次循环中，使用 Math.random() 生成一个 0 到 1 的随机浮点数，通过 (max - min + 1) 调整范围，Math.floor() 取整并加上 min 得到最终的随机数。
  - 检查生成的随机数是否已在数组中，不在的话添加到数组。
- 调用 document.write() 输出结果。
- 再次调用 getRandomNum(1, 100, 10) 函数，生成 1 到 100 之间的 10 个不重复随机数，重复上述步骤。

😎小总结： 这段代码结合了 HTML 和 JavaScript 实现了一个简单的随机数生成器。HTML 部分负责页面的结构和调用 JavaScript 函数，JavaScript 部分的 getRandomNum 函数实现了生成指定范围和数量的不重复随机数的功能。通过循环和条件判断确保随机数的不重复性，最终将结果输出到页面上。