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

短命女 2023-02-23 03:51 13阅读 0赞

### 目录 ###

*  最终效果展示
 *  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
 *  \*\*~更多内容，请阅读下一章~\*\*

# 最终效果展示 #

![在这里插入图片描述][2020071213253391.gif_pic_center]  
本项目完整 Demo 访问地址：[http://ldmy.3vfree.net/charts-project/index.html][http_ldmy.3vfree.net_charts-project_index.html] （因为是国外免费服务器，加载相当卡慢。）

# 1. 数据可视化适配方案 #

## 1.1 项目需求 ##

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

## 1.2 PC端适配方案 ##

![适配方案][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]

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

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

![基准值设置1][1]  
![基准值设置2][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使用步骤：**

*  下载echarts：[https://github.com/apache/incubator-echarts/tree/4.5.0][https_github.com_apache_incubator-echarts_tree_4.5.0]
 *  引入echarts：`dist/echarts.min.js`

> 官方教程：[5 分钟上手 ECharts][5 _ ECharts]

# 2. 数据可视化项目开发 #

## 项目准备 ##

![项目准备][20200705074103209.png]

## 1.1 文件准备 ##

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

## 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 ###

![在这里插入图片描述][20200705074402225.png]  
安装完成后，快速打开浏览器的入口如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]

### 1.4.2 Preview on Web Server ###

![在这里插入图片描述][20200705074535301.png]  
安装后，在VS code代码编辑器界面，快速打开浏览器。入口如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]

# **更多内容，请阅读下一章** #

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

[2020071213253391.gif_pic_center]: https://img-blog.csdnimg.cn/2020071213253391.gif#pic_center
[http_ldmy.3vfree.net_charts-project_index.html]: http://ldmy.3vfree.net/charts-project/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200705072827123.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[1]: https://img-blog.csdnimg.cn/20200705090046379.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[2]: https://img-blog.csdnimg.cn/20200705090108589.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70#pic_center
[ZRender]: https://github.com/ecomfe/zrender
[https_github.com_apache_incubator-echarts_tree_4.5.0]: https://github.com/apache/incubator-echarts/tree/4.5.0
[5 _ ECharts]: https://www.echartsjs.com/zh/tutorial.html
[20200705074103209.png]: https://img-blog.csdnimg.cn/20200705074103209.png
[20200705074402225.png]: https://img-blog.csdnimg.cn/20200705074402225.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200705075040800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[20200705074535301.png]: https://img-blog.csdnimg.cn/20200705074535301.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200705074655611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw==,size_16,color_FFFFFF,t_70
[Link 1]: https://oldriver.blog.csdn.net/article/details/107133895