ECharts数据可视化项目实践05水果布局讲义教学课件.pptx

E C h a r t s 数 据 可 视 化 项 目 实 践邵辉可视化项目二 水果销售管理系统项目目录数据说明项目分析开发环境项目目标项目背景后端开发前端开发项目总结对接岗位前端开发柒数据可视化制作可视化大屏布局展示图形数据可视化制作可视化大屏布局数据可视化 2.1 制作可视化大屏布局准备好所有的目录和文件之后，在Vscode里形成的目录结构如图2-16所示。图2-16 前端初始目录结构数据可视化布局如图2-17所示。图2-17 可视化大屏布局本项目的大屏布局分为两个部分：样式和结构。数据可视化 2.1.1 2.1.1 完成HTMLHTML代码代码如下：数据可视化数据可视化页面左上角下拉框如图2-18所示。图2-18 下拉框 该下拉框代码如下：数据可视化marketdata.js代码如下：代码如下：数据可视化页面下面左边的三个容器代码如下：数据可视化页面下面中间两个容器代码如下：数据可视化数据可视化 2.1.2 完成样式代码全局和字体的样式设置代码如下：数据可视化body样式设置代码如下：数据可视化数据可视化页面上面部分代码如下：数据可视化数据可视化数据可视化页面下面部分的主体样式设置代码如下：数据可视化图形所在的容器样式代码如下：数据可视化数据可视化显示关键数据文字样式代码如下：数据可视化数据可视化数据可视化地图所在容器样式代码如下：数据可视化感谢您的观看可化视