使用 Echarts 的实时销售仪表盘

JavaScriptJavaScriptIntermediate
立即练习

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

简介

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

👀 预览

实时销售仪表盘预览

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("`DOM Traversal`") javascript/NetworkingGroup -.-> javascript/json("`JSON`") subgraph Lab Skills javascript/obj_manip -.-> lab-445642{{"`使用 Echarts 的实时销售仪表盘`"}} javascript/async_prog -.-> lab-445642{{"`使用 Echarts 的实时销售仪表盘`"}} javascript/dom_select -.-> lab-445642{{"`使用 Echarts 的实时销售仪表盘`"}} javascript/dom_manip -.-> lab-445642{{"`使用 Echarts 的实时销售仪表盘`"}} javascript/dom_traverse -.-> lab-445642{{"`使用 Echarts 的实时销售仪表盘`"}} javascript/json -.-> lab-445642{{"`使用 Echarts 的实时销售仪表盘`"}} end

设置项目结构

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

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

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

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

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

完成 y 轴设置

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

  1. 打开 index.js 文件。

  2. option 对象中找到 yAxis 配置。

  3. 更新 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 函数。

  1. 打开 index.js 文件。
  2. 找到 renderChart 函数。
  3. 完成 renderChart 函数中的代码,以便将 saleObjcountObj 中的值正确分配到 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 中练习更多实验来提升你的技能。

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