最终效果展示
1. 数据可视化适配方案
- 1.1 项目需求
- 1.2 PC端适配方案
- 1.3 使用到的技术
2. 数据可视化项目开发
- 项目准备
- 1.1 文件准备
- 1.2 引入js和css文件
- 1.3 CSS样式初始化
- 1.4 VS code 插件安装（任选一款）
- - 1.4.1 Live Server
  - 1.4.2 Preview on Web Server
**~更多内容，请阅读下一章~**

最终效果展示

本项目完整 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结构：

 <body><div class="viewport"><div class="column"><!--概览-->                                    <div></div><!--监控-->                                    <div></div> <!--点位-->                                    <div></div>                                           </div><div class="column"><!--地图-->                                    <div></div><!--用户-->                                    <div></div>                                          </div><div class="column"><!--订单-->                                    <div></div><!--销售-->                                    <div></div>                                  <div><!--渠道-->                                    <div></div><!--季度-->                                    <div></div></div><!--排行-->                                    <div></div>                                     </div>                        </div>
</body>

1.2 引入js和css文件

 <script src="js/echarts.min.js"></script><script src="js/flexible.js"></script><script src="js/jquery.min.js"></script>

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代码编辑器界面，快速打开浏览器。入口如下图：

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

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

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

学习笔记之数据可视化（二）—— 页面布局（下）
续上一章 2.7 地图区域(.map) 2.7.1 实现步骤: 2.8 用户统计模块 2.8.1 布局: 2.8.2 柱状图 2.9 订单模块 2.9.1 订单区域布局 2.9.2 订单区域(orde ...
学习笔记之数据可视化（二）——页面布局（上）
~续上一章 2. 项目页面布局 2.1 基础布局 2.1.1 PC端屏幕宽度适配设置 2.1.2 主体容器viewport背景图片 2.1.3 HTML结构 2.1.4 css样式代码 2.2 边框图 ...
学习笔记之数据可视化（二）——页面布局（中）
续上一章 2.6 监控区域布局 2.6.1 布局结构解析: 2.6.2 样式描述: 2.6.3 HTML结构及CSS样式代码 2.6.3 ### 监控区域-效果 2.6.7 点位区域(point) 2 ...
Python学习笔记：数据可视化(一)
python相关基础概念数据:离散的,客观事实的数字表示信息:处理后的数据,为实际问题提供答案 - 为数据提供一种关系或一个关联后,数据就成了信息,这种关联通过提供数据背景来完成知识: 是数据 ...
Hadoop学习笔记—20.网站日志分析项目案例（一）项目介绍
Hadoop学习笔记-20.网站日志分析项目案例(一)项目介绍网站日志分析项目案例(一)项目介绍:当前页面网站日志分析项目案例(二)数据清洗:http://www.cnblogs.com/edis ...
【AI白身境】深度学习中的数据可视化
文章首发于微信公众号<有三AI> [AI白身境]深度学习中的数据可视化今天是新专栏<AI白身境>的第八篇,所谓白身,就是什么都不会,还没有进入角色. 上一节我们已经讲述了如何 ...
对pca降维后的手写体数字图片数据分类_【AI白身境】深度学习中的数据可视化...
今天是新专栏<AI白身境>的第八篇,所谓白身,就是什么都不会,还没有进入角色. 上一节我们已经讲述了如何用爬虫爬取数据,那爬取完数据之后就应该是进行处理了,一个很常用的手段是数据可视化. ...
ajax将数据显示在class为content的标签中_[原创]数据可视化实战项目
数据可视化实战项目 NLP 数据可视化 request BeautifulSoup #爬虫所需import requestsfrom bs4 import BeautifulSoup# Nlp可视化所 ...
C语言学习笔记第五天_项目训练
C语言学习笔记第五天_项目训练添加自定义的一个函数库文件 <getch.h> 步骤: 1.在windows中把getch.h放入共享文件夹(文件我放在文末,自取) 2.在Ubuntu终端 ...

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

目录