学习笔记之数据可视化（一）——项目适配方案

最终效果展示

本项目完整 Demo 访问地址：http://ldmy.3vfree.net/charts-project/index.html （因为是国外免费服务器，加载相当卡慢。）

1. 数据可视化适配方案

1.1 项目需求

• 设计稿大小：1920px；
• PC端适配：宽度在1024~1920之间，页面元素宽高自适应。

1.2 PC端适配方案

• 1、flexible.js ：把默认的屏幕划分份数，由10等分改为 24 等分（这样布局更精细）；
• 2、rem值：自动生成。
• 3、cssrem(VS code插件)：修改cssrem插件基准值为 80px （1920÷24=80，即1rem 单位 = 80px)。

修改插件基准值：
插件-配置按钮—配置扩展设置–Root Font Size 里面，设置基准值。如下图所示：

PC端要把屏幕宽度约束在1024~1920之间，有适配。

1.3 使用到的技术

完成此项目需具备以下知识：

• div + css 布局
• flex 布局
• css3动画
• css3渐变
• css3边框图片
• 原生js + jquery 使用
• rem适配
• echarts基础

ECharts，一个使用 JavaScript 实现的开源可视化库，是js 插件，它可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

echarts使用步骤：

• 下载echarts：https://github.com/apache/incubator-echarts/tree/4.5.0
• 引入echarts：dist/echarts.min.js

官方教程：5 分钟上手 ECharts

2. 数据可视化项目开发

项目准备

1.1 文件准备

• 新建 images文件夹：放置所要用到的图片素材；
• 新建 js文件夹：包括echarts.min.js、flexible.js、jQuery.min.js3个文件；
• 新建 CSS文件夹及css文件：建好文件夹后，放入新建的index.css
• 新建HTML文件：index.html
  HTML结构：

 
  
"viewport">
  	
"column">
                                          
    	

			                                    
    	
 
			                                    
    	
                                           
    
    
"column">
                                          
    	

			                                    
    	
                                          
    
    
"column">
                                          
    	

			                                    
    	
                                  
    	

      	                                    
    		

      	                                    
    		

      
			                                    
    	
                                     
    
                        
  

1.2 引入js和css文件

1.3 CSS样式初始化

打开 index.css文件，在里面写入以下样式代码：

/* 清除元素默认的内外边距 ，设置CSS3 盒模型*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 让所有斜体不倾斜 */

em,
i {
    font-style: normal;
}

/* 去掉列表前面的小点 */

li {
    list-style: none;
}

/* 图片没有边框 去掉图片底侧的空白缝隙 */

img {
    border: 0;
    vertical-align: middle;
}

/* 让button按钮变成小手 */

button {
    cursor: pointer;
}

/* 取消链接下划线 ，鼠标经过变色*/

a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #e33333;
}

/* 页面背景 */

body {
    background: url(../images/bg.jpg) no-repeat;
    /* 背景缩放 全覆盖定位区域*/
    background-size: cover;
}

或者连写方式（0 0 为背景位置定位）：

body {
    background: url(../images/bg.jpg) no-repeat 0 0 / cover;
    /* 背景缩放 全覆盖定位区域*/
    /* background-size: cover; */
}

1.4 VS code 插件安装（任选一款）

插件作用：保存时，自动刷新浏览器。

1.4.1 Live Server

安装完成后，快速打开浏览器的入口如下图：

1.4.2 Preview on Web Server

安装后，在VS code代码编辑器界面，快速打开浏览器。入口如下图：

_{更多内容，请阅读下一章}

下一章：学习笔记之数据可视化（二）—— 页面布局