简介 在这个项目中,你将学习如何使用 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 轴” 设置。 打开 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); } 完成这些步骤后,你的销售仪表盘项目应该可以正常运行,并正确显示实时销售和销量数据。最终页面效果如下: