学习笔记之数据可视化（一）——项目适配方案
目錄
- 最終效果展示
- 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結構：
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代碼編輯器界面，快速打開瀏覽器。入口如下圖：
更多內容，請閱讀下一章
下一章：學習筆記之數據可視化（二）—— 頁面布局
總結
以上是生活随笔為你收集整理的学习笔记之数据可视化（一）——项目适配方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux-centos7 常用的基本命
- 下一篇： Typora简介