使用 ECharts 创建交互式柱状图

简介

在这个项目中，你将学习如何使用 ECharts JavaScript 库创建柱状图来展示学生成绩统计信息。ECharts 是一个强大的数据可视化工具，它可以帮助你创建交互式且视觉效果吸引人的图表来呈现数据。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何修复初始代码中的错误以正确显示图表
• 如何修改 x 轴和 y 轴设置以确保图表按正确方向显示
• 如何调整系列中的数据以匹配 x 轴标签的顺序

🏆 成果

完成这个项目后，你将能够：

• 初始化一个 ECharts 实例并配置图表选项
• 定义 x 轴和 y 轴属性以控制图表外观
• 更新系列中的数据以匹配所需的可视化效果

设置项目结构

在这一步中，你将设置项目结构并准备必要的文件和文件夹。

在你的代码编辑器中打开项目文件夹。目录结构如下：

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

其中：

• index.html 是主页。
• js/echarts.js 是 ECharts 文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，打开虚拟机顶部的“Web 8080”，手动刷新页面，你会发现页面是空白的，此时请打开控制台，你会看到以下错误信息：

修复错误

在这一步中，你将学习如何修复项目中的错误，以便能够显示图表。

1. 在提供的项目中打开 index.html 文件。
2. 发现脚本标签中的代码存在未定义的 x 轴。在 ECharts 图表中，无论是否有数据，x 轴和 y 轴都必须定义。因此，我们对 var option = {...}; 下 TODO 中的代码做了如下更改：

// TODO
// x 轴
xAxis: {
  data: ["Tom", "Tony", "Lucas", "Lucy", "Anna", "Kevin"]
},
// y 轴
yAxis: {},
series: [
  {
    name: "成绩",
    type: "bar",
    data: [55, 90, 65, 70, 80, 63]
  }
]

这将修复错误并使图表能够显示。

4. 保存更改并重新加载页面以查看图表。

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。