Echart可视化学习（一）

文档的源代码地址，需要的下载就可以了（访问密码：7567）

https://url56.ctfile.com/f/34653256-527823386-04154f

正文：

创建需要的目录结构及文件

目录：css、font、images、js

文件：index.html

在css目录下创建一个css文件

Index.html文件中编写基本代码

初始化css

我们查看下引入的文件是否正确，在body中检测一下

双击运行下

准备js文件flexible.js

引入js文件

确认js文件引入是否正确，打开开发者工具，在审查元素的部分可以看到这个部分的代码，并且扩大缩小屏幕数据会发生变化（屏幕适配）

更改适配方案

打开flexible.js，我们设置下面的参数为24

原因是设计稿是1920px，除以24的话就是80，不会太大

检测一下

编辑index.html

再编辑index.css

点击运行一下（随浏览器屏幕大小变化而变化）

准备一些图片在images目录下

body 设置背景图 ，缩放为 100% ， 行高1.15

效果

编写头部的盒子

高度为100px

背景图，在容器内显示

缩放比例为 100%

在index.html中添加盒子

运行查看

Index.html放标题文本

标题添加样式

h1 标题部分 白色 38像素 居中显示 行高为 80像素

查看效果

Index.html添加时间模块

时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素

Index.css添加样式

Header中添加一个位置样式

再编写时间模块

时间应该是动态的，所以编写一个js

查看效果