努力终有回报

介绍

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

👀 预览

🎯 任务

在本项目中，你将学习：

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

🏆 成果

完成本项目后，你将能够：

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

设置项目结构

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

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

├── 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：处理数据并更新选项对象
});

3. 在 .then() 回调函数内部，处理来自 data.json 文件的数据，并相应地更新 option 对象。
   • 创建一个对象 dataObj 来存储每种作物类型的数据。
   • 创建一个数组 sourceTip 来存储数据的标签。
   • 遍历数据并填充 dataObj 和 sourceTip 数组。
   • 创建一个新的 newSource 数组，并用来自 dataObj 和 sourceTip 的数据填充它。
   • 使用 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);
});

4. 保存 index.html 文件并刷新页面。现在你应该能看到更新后的折线图和饼图，其中显示了正确的数据。

总结

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