ECharts数据可视化项目实践02天虎布局讲义教学课件.pptx

E C h a r t s 数 据 可 视 化 项 目 实 践邵辉可视化项目一 天虎网上超市销售管理系统项目目录数据说明项目分析开发环境项目目标项目背景后端开发前端开发项目总结对接岗位前端开发柒数据可视化大屏布局展示图形数据可视化大屏布局数据可视化图1-17 前端初始目录结构数据可视化本项目布局分为上下两个部分：上面为标题和时间显示；下面为三行三列的九个容器。如图1-18所示。图1-18 可视化大屏布局 本项目的大屏布局分为两个部分：样式和结构，也就是CSS样式代码和HTML代码。这种做法能让HTML代码和CSS代码语义清晰，增强易读性和维护性。数据可视化 1.1.1 1.1.1 完成HTMLHTML代码 在index.html文件的头部，需要引入相关的JS文件和CSS文件，同时在js目录里放入echarts.min.js文件，虽然在布局阶段用不到，但在绘制Echarts图形时要用，所以这里提前引入。代码如下：数据可视化 在布局的上面部分，要完成标题和时间显示，则需要设置h1标签和放置JS插件的div标签。代码如下：time.js文件完成时间显示的JS插件。数据可视化数据可视化建立左边三容器，其它类似。代码如下：数据可视化 1.1.2 完成样式代码body和字体的样式设置，代码如下：全局和html标签样式设置，代码如下：数据可视化头部样式设置，代码如下：数据可视化主体样式设置，代码如下：左中右三个放置column容器，代码如下：数据可视化 所有放置图形的容器外都放置panel容器，代码如下：所有放置图形容器的样式，代码如下：数据可视化四半角修饰，代码如下：数据可视化左上角的半角框修饰。如图1-19所示。图1-19 左上半角框数据可视化右上角框。代码如下：数据可视化panel-footer容器作用就是为了能形成左下角半角框和右下角半角框，代码如下：数据可视化左下角、右下角代码如下：数据可视化 在Vscode里打开index.html文件后，选择菜单“运行”，然后选择“启动调试”，可以看到图1-18所示的布局已经成功显示。感谢您的观看可化视