日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/9/27 编程问答 28 豆豆
生活随笔 收集整理的這篇文章主要介紹了 学习笔记之数据可视化（一）——项目适配方案 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄

  • 最終效果展示
  • 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結構：
<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代碼編輯器界面，快速打開瀏覽器。入口如下圖：

更多內容，請閱讀下一章

下一章：學習筆記之數據可視化（二）—— 頁面布局

總結

以上是生活随笔為你收集整理的学习笔记之数据可视化（一）——项目适配方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。