使用手机的时间

介绍

在这个项目中，你将学习如何使用 ECharts 库创建折线图。该图表将显示用户在一周中每天花在手机上的小时数。

👀 预览

🎯 任务

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

• 如何设置项目并打开必要的文件
• 如何修复 ECharts 配置中的错误
• 如何理解折线图的配置
• 如何通过修改配置来自定义图表

🏆 成果

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

• 使用 ECharts 库创建折线图
• 配置图表的标题、坐标轴和数据系列
• 通过修改配置来自定义图表

设置项目

在这一步中，你将设置项目并在编辑器中打开文件。

1. 打开右侧的编辑器。你应该会看到两个文件 —— index.html 和 echarts.js。
2. 点击 WebIDE 右下角的 Go Live 按钮来运行项目。
3. 在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

修复 index.html 文件中的错误

在这一步中，你将修复 index.html 文件中的错误。

1. 在 index.html 文件中找到 var option = {} 部分。
2. 配置项中存在一个错误，导致坐标轴显示不正确。
3. 将 option 对象更新为以下内容：

var option = {
  title: {
    text: "Hours spent using mobile phones"
  },
  xAxis: {
    type: "category",
    data: [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
      type: "line"
    }
  ]
};

4. 理解上述代码：

• title 属性设置折线图的标题。
• xAxis 属性配置 x 轴，设置为“category”类型并显示一周中的日期。
• yAxis 属性配置 y 轴，设置为“value”类型。
• series 属性是数据系列，其中 data 是一周中每天使用手机的时间数据，type 是图表类型，为折线图。

5. 保存文件并重新加载页面以查看更新后的图表。最终结果如下：

总结

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