努力终有回报

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本项目中,你将学习如何使用 ECharts 创建一个城市过去五年农作物产量的统计图。该项目旨在展示如何通过对直接影响民生的农作物产量进行统计分析实际问题。

👀 预览

图片描述

🎯 任务

在本项目中,你将学习:

  • 如何设置项目环境并了解提供的文件
  • 如何从 JSON 文件中获取数据并对其进行处理以更新 ECharts 可视化效果
  • 如何自定义折线图和饼图的外观和布局

🏆 成果

完成本项目后,你将能够:

  • 使用 Axios 库从 JSON 文件中获取数据
  • 操作 ECharts 选项对象以更新可视化效果
  • 通过调整标题、布局和其他属性来自定义图表

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") javascript/NetworkingGroup -.-> javascript/json("`JSON`") subgraph Lab Skills javascript/async_prog -.-> lab-445640{{"`努力终有回报`"}} javascript/dom_manip -.-> lab-445640{{"`努力终有回报`"}} javascript/http_req -.-> lab-445640{{"`努力终有回报`"}} javascript/json -.-> lab-445640{{"`努力终有回报`"}} end

设置项目结构

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

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

├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── echarts.min.js

其中:

  • index.html 是主页。
  • js/echarts.min.js 是 ECharts 文件。
  • js/axios.min.js 是 axios 文件。
  • data.json 是对应年份的粮食产量数据(单位:吨)。

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

接下来,打开虚拟机顶部的 “Web 8080”,并手动刷新页面,在你的浏览器中查看以下效果:

图片描述

获取数据

在这一步中,你将完成数据请求,并在折线图和饼图中正确显示农作物产量数据。

  1. index.html 文件中,找到 // TODO 部分。
  2. 使用 axios.get() 方法从 data.json 文件中获取数据。
axios.get("./data.json").then((res) => {
  let data = res.data.data;
  // TODO:处理数据并更新选项对象
});
  1. .then() 回调函数内部,处理来自 data.json 文件的数据,并相应地更新 option 对象。

    • 创建一个对象 dataObj 来存储每种作物类型的数据。
    • 创建一个数组 sourceTip 来存储数据的标签。
    • 遍历数据并填充 dataObjsourceTip 数组。
    • 创建一个新的 newSource 数组,并用来自 dataObjsourceTip 的数据填充它。
    • 使用 newSource 数组更新 option.dataset.source
    • 调用 myChart.setOption(option) 用新数据更新图表。
// TODO
let dataObj = {
  wheat: ["小麦"],
  soybean: ["大豆"],
  potato: ["土豆"],
  corn: ["玉米"]
};
let sourceTip = ["全部"];

axios.get("./data.json").then((res) => {
  let data = res.data.data;

  for (const key1 in data) {
    sourceTip.push(key1);
    for (const key2 in data[key1]) {
      dataObj[key2].push(data[key1][key2]);
    }
  }

  let newSource = [];
  newSource.push(sourceTip);
  for (const key in dataObj) {
    newSource.push(dataObj[key]);
  }

  option.dataset.source = newSource;
  myChart.setOption(option);
});
  1. 保存 index.html 文件并刷新页面。现在你应该能看到更新后的折线图和饼图,其中显示了正确的数据。
图片描述
✨ 查看解决方案并练习

总结

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

您可能感兴趣的其他 JavaScript 教程