使用 ECharts 创建数据可视化

介绍

在这个项目中，你将学习如何使用 ECharts 库创建一个数据可视化图表。该项目旨在帮助在线学习平台用户露西更好地可视化她的日常学习时间。

👀 预览

ECharts 柱状图预览

🎯 任务

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

如何从 JSON 文件中获取数据并对其进行处理以提取必要的信息。
如何使用 ECharts 库创建一个显示每周和每月学习时长统计信息的柱状图。
如何实现交互性，以便用户在每周和每月视图之间切换。
如何在窗口大小调整时动态调整图表大小。

🏆 成果

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

从 JSON 文件中获取数据并对其进行操作以进行可视化。
配置和自定义 ECharts 柱状图以显示学习时长统计信息。
为图表添加交互性并处理用户交互。
确保图表保持响应式并适应窗口大小调整。

设置项目结构

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

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

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

在此结构中：

index.html 是主页。
js/echarts.min.js 是 ECharts 文件。
js/axios.min.js 是 axios 文件。
css/style.css 是样式文件。
data.json 是学习时长的数据文件。

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

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

获取数据

在这一步中，你将学习如何从 data.json 文件中获取数据并将其存储在必要的数据结构中。

在代码编辑器中打开 index.html 文件。
在 JavaScript 代码中找到 // TODO 部分。
创建两个对象来存储每周和每月的数据：

// TODO
let weekData = {
  x: [],
  y: []
};

let monthData = {
  x: [],
  y: []
};

实现 mySetOption() 函数，以便根据传递给它的数据更新图表的选项。

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  myChart.setOption(option);
}

使用 axios.get() 方法从 data.json 文件中获取数据。API 调用的响应将在 res.data.data 属性中包含数据。

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

  // 在这里处理数据
});

在 then() 方法的回调函数内部，遍历 data 对象并处理每天的学习时长数据。计算每周和每月的总学习时长，并分别将结果存储在 weekData 和 monthData 对象中。

for (const key in data) {
  let weekCount = (monthCount = 0),
    weekNum = 1;

  for (let i = 0; i < data[key].length; i++) {
    weekCount += data[key][i];
    monthCount += data[key][i];

    if (
      (i + 1) % 7 === 0 ||
      (data[key].length - i <= 7 && i === data[key].length - 1)
    ) {
      weekData.x.push(`Week ${weekNum++} (${key})`);
      weekData.y.push(weekCount);
      weekCount = 0;
    }
  }
  monthData.x.push(key);
  monthData.y.push(monthCount);
}

处理完数据后，调用 mySetOption() 函数并传递 weekData 对象，以默认显示每周的统计信息。

mySetOption(weekData);

此步骤处理后的代码效果如下：

// TODO
let weekData = {
    x: [],
    y: []
  },
  monthData = {
    x: [],
    y: []
  };

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // 重置
  myChart.setOption(option);
}

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

  for (const key in data) {
    let weekCount = (monthCount = 0),
      weekNum = 1;

    for (let i = 0; i < data[key].length; i++) {
      weekCount += data[key][i];
      monthCount += data[key][i];

      if (
        (i + 1) % 7 === 0 ||
        (data[key].length - i <= 7 && i === data[key].length - 1)
      ) {
        weekData.x.push(`Week ${weekNum++} (${key})`);
        weekData.y.push(weekCount);
        weekCount = 0;
      }
    }
    monthData.x.push(key);
    monthData.y.push(monthCount);
  }
  mySetOption(weekData);
});

显示图表

在这一步中，你将学习如何使用 ECharts 库切换图表的显示。

在代码编辑器中打开 index.html 文件。
在 JavaScript 代码中找到 mySetOption 部分。
在 mySetOption 函数之后，为标签（每周和每月）添加事件监听器，以便在用户点击时更新图表。

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // 重置
  myChart.setOption(option);
}

document.querySelector(".tabs").addEventListener("click", function (e) {
  if (e.target.id === "week") {
    mySetOption(weekData);
  } else if (e.target.id === "month") {
    mySetOption(monthData);
  }
});

通过这些步骤，你已经完成了项目。图表现在将根据从 data.json 文件中获取的数据显示每周和每月的学习时长统计信息。最终页面效果如下：

图片描述

总结

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

学习的无垠海洋

介绍