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

最终效果展示

在这里插入图片描述
本项目完整 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 里面,设置基准值。如下图所示:

基准值设置1
基准值设置2

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使用步骤:

官方教程:5 分钟上手 ECharts

2. 数据可视化项目开发

项目准备

项目准备

1.1 文件准备

  • 新建 images文件夹:放置所要用到的图片素材;
  • 新建 js文件夹:包括echarts.min.jsflexible.jsjQuery.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代码编辑器界面,快速打开浏览器。入口如下图:
在这里插入图片描述

更多内容,请阅读下一章

下一章:学习笔记之数据可视化(二)—— 页面布局

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:上身试试 返回首页