目录
最终效果展示
本项目完整 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代码编辑器界面，快速打开浏览器。入口如下图：
1777
