使用 Echarts 创建实时销售仪表盘

介绍

在这个项目中，你将学习如何使用 Echarts 库创建一个实时销售仪表盘。该仪表盘将以视觉上吸引人且易于理解的格式显示销售和销量数据。

👀 预览

实时销售仪表盘预览

🎯 任务

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

如何设置项目并获取必要的文件
如何在 index.js 文件中完成“y 轴”设置
如何在 renderChart 函数中将后端数据的值正确分配给适当的图表选项

🏆 成果

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

使用 Echarts 库将数据渲染到图表中
为数据可视化项目构建和组织代码
处理异步数据检索并实时更新图表

设置项目结构

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

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

├── echarts.js
├── index.css
├── index.html
└── index.js

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

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

完成 y 轴设置

在这一步中，你将学习如何在 index.js 文件中完成“y 轴”设置。

打开 index.js 文件。
在 option 对象中找到 yAxis 配置。
更新 yAxis 配置以满足以下要求：
- 第一项的 name 应为“sales”，且 position 在图表左侧。
- 第二项的 name 应为“volume”，且 position 在图表右侧。

你更新后的 yAxis 配置应如下所示：

yAxis: [
  {
    type: "value",
    name: "sales",
    position: "left"
  },
  {
    type: "value",
    name: "volum",
    position: "right"
  }
],

完成 renderChart 函数

在这一步中，你将学习如何在 index.js 文件中完成 renderChart 函数。

打开 index.js 文件。
找到 renderChart 函数。
完成 renderChart 函数中的代码，以便将 saleObj 和 countObj 中的值正确分配到 X 轴的时间以及 Y 轴的销售和销量上。

你更新后的 renderChart 函数应如下所示：

async function renderChart() {
  const result = await Ajax();
  document.querySelector("#result").innerText = JSON.stringify(result);
  const myChart = echarts.init(document.getElementById("main"));

  // 将 `saleObj` 和 `countObj` 中的值分配到适当的选项中
  option.xAxis.data = Object.keys(result.data.saleObj);
  option.series[0].data = Object.values(result.data.saleObj);
  option.series[1].data = Object.values(result.data.countObj);

  myChart.setOption(option, true);
  document.querySelector("#data").innerText = JSON.stringify(charData);
}

完成这些步骤后，你的销售仪表盘项目应该可以正常运行，并正确显示实时销售和销量数据。最终页面效果如下：

图像描述

总结

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

使用 Echarts 的实时销售仪表盘

介绍