使用 Echarts 和 JSON 进行数据可视化

介绍

在这个项目中，你将学习如何从 JSON 文件中获取数据，呈现不同食物的蛋白质含量，并创建一个 Echarts 饼图来可视化数据。本项目旨在为你提供使用 JavaScript 进行数据操作和数据可视化的实践经验。

👀 预览

🎯 任务

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

• 如何使用 Fetch API 从 JSON 文件中获取数据
• 如何在网页上呈现不同食物的蛋白质含量
• 如何创建一个 Echarts 饼图来可视化蛋白质含量数据

🏆 成果

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

• 从 JSON 文件中获取数据并处理数据
• 根据获取的数据动态呈现 HTML 元素
• 使用 Echarts 库创建交互式饼图
• 将数据可视化集成到 Web 应用程序中

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
├── index.html
├── lib
└── mock
    └── data.json

其中：

• index.html 是主页。
• css 是存储项目样式的文件夹。
• lib 是存储项目依赖项的文件夹。
• mock/data.json 是项目请求中使用的 JSON 数据。

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

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

获取数据并呈现蛋白质含量

在这一步中，你将学习如何从提供的 JSON 文件中获取数据，并呈现不同食物的蛋白质含量。

1. 打开项目目录中的 index.html 文件。
2. 在 index.html 文件中找到 <script> 标签内的 TODO 注释。
3. 在 fetchData 函数内部，添加以下代码以从 MockURL 获取数据并呈现蛋白质含量：

let dataList = ref([]);
async function fetchData() {
  // TODO: 待添加的代码
  let data = await fetch(MockURL).then((res) => res.json());
  data.unshift({
    name: "header",
    icon: "none"
  });
  echartsInit(data);
  dataList.value = data.slice(1);
}

return {
  echartsInit,
  fetchData
};

4. 在 onMounted 钩子函数中，调用 fetchData 函数来获取数据并呈现蛋白质含量。最后，在 return 中返回。

onMounted(() => {
  fetchData();
});
return {
  echartsInit,
  fetchData,
  dataList
};

5. 在 HTML 中 TODO: 待添加的代码以呈现获取到的数据 下方添加以下代码以显示数据。

<div class="protein-item" v-for="data in dataList" :key="data.name">
  {{data.name}} {{data.value}}
</div>

6. 保存 index.html 文件并刷新页面。现在你应该会在 .protein-container 元素中看到不同食物的蛋白质含量显示出来。

完成后的效果如下：

恭喜！你已经完成了“食物蛋白质揭秘”项目。你已经学会了如何从 JSON 文件中获取数据、呈现蛋白质含量，并创建一个 Echarts 饼图来可视化数据。

总结

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