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

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

    技术2026-08-08  25

    目录

    最终效果展示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 Server1.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代码编辑器界面，快速打开浏览器。入口如下图：

    更多内容，请阅读下一章

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

    Processed: 0.012, SQL: 9