数据可视化（BI报表的开发）第一天
課程回顧：
? jQuery事件注冊：
? $(元素).click(function () {});
? $(元素).on(‘click’, [后代元素], function () {});
? $(元素).one(‘click’, function () {});
? 解綁事件：off
? 自動觸發：
? $(元素).click();
? $(元素).trigger(‘click’);
? $(元素).triggerHandler(‘click’);
? 事件對象：$(元素).click(function (e) {e});
? 本地存儲：
? localStorage.setItem(‘鍵’,‘值’);
? localStorage.getItem(‘鍵’);
? JSON數據：
? JSON.parse(字符串);
? JSON.stringifyh(數組);
可視化項目：
1、課程目標：
鏈接：添加鏈接描述
提取碼：5kyp
碼云地址：碼云地址
- 實踐css布局相關技術
- 實踐jquery相關技術
- 掌握echarts的基本使用
2、項目介紹
? 應對現在數據可視化的趨勢，越來越多企業需要在很多場景(營銷數據，生產數據，用戶數據)下使用，可視化圖表來展示體現數據，讓數據更加直觀，數據特點更加突出。我們引入 ‘立可得’ 數據可視化項目。
我們要完成這個項目：需要使用一些基礎的DIV+CSS布局，還引入了一些C3技術，還引入了各類圖表的繪制，以及高級的地圖數據可視化案例。主要功能有：餅狀圖、柱狀圖、線形圖、地圖 …
? 設計稿是1920的，所以會做一些適配，但不會都去適配
需要具備知識：
完成該項目需要具備以下知識：
- div + css 布局
- flex 布局
- css3動畫
- css3漸變
- css3邊框圖片
- 原生js + jquery 使用
- rem適配
- echarts基礎(重點)
3、Echarts-介紹
地址：https://www.echartsjs.com/zh/index.html
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11XQ，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
理解：實際上就是一個JS插件，可以運行在PC和移動設備，兼容主流瀏覽器，提供非常多的圖表（折線圖，柱狀圖，散點圖，餅圖，K線圖）4、Echarts-體驗
1、下載：下載echarts https://github.com/apache/incubator-echarts/tree/4.5.0
2、進入echarts dist/echarts.min.js【引入】
3、準備一個具備大小（寬高）的 DOM
<div id="main" style="width: 600px;height:400px;"></div>4、初始化echart實例
通過：echarts.init實例化一個容器（內部返回實例對象） var myChart = echarts.init(document.getElementById('main'));5、指定圖表的配置項和數據 (根據文檔提供示例找到option)
var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}] };6、使用剛指定的配置項和數據顯示圖表【配置不同圖表不同】
myChart.setOption(option);5、Echarts-基礎配置
需要了解的主要配置：series xAxis yAxis grid tooltip title legend color
大致劃分兩大類，有軸的和無軸的
- series
- 系列列表。每個系列通過 type 【line（線性），bar（柱狀）】決定自己的圖表類型
- 大白話：圖表數據，指定什么類型的圖標(折現，柱狀等)，可以多個圖表重疊。
- xAxis：直角坐標系 grid 中的 x 軸
- yAxis：直角坐標系 grid 中的 y 軸【Y依賴數據顯示】
- grid：直角坐標系內繪圖網格
- title：標題組件
- tooltip：提示框組件【鼠標放上顯示】（軸上提示：trigger : ‘axis’,）
- legend：圖例組件，每個線圖表作用，【需要數據series有name屬性】
- color：調色盤顏色列表【數組傳遞】
演示代碼：
var option = {xAxis: {type: 'category',data: ['星期一', '星期二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: '用戶注冊',data: [820, 932, 901, 934, 9222, 1330, 1320],type: 'line'},{name: '用戶數據',data : [820, 932, 600, 934, 1290, 1330, 1320],type : "bar",}],grid : {show : true,// top : 100},tooltip : {trigger : "axis"},title : {text : '年度統計'},color : ['red','yellow'],legend : {data:['用戶注冊','用戶數據']}};6、REM適配
適配方案：
- 設計稿是1920px ，約定rem基準值為 24px （基準值html的font-size）。【不同設配等比顯示，例如320和375等設備】
- 適配范圍：[1024-1920]，和移動適配不同移動適配固定設備之前媒體查詢，類似手淘的flexible，JS設置，實時配置，根據等比例配置;基準值動態設置
- 那么：設備寬度與rem基準值比例為 80 。
- 結論：適配設備的時候保持80的比例即可。
- 將來：換算rem單位的時候，使用24px基準值即可。
實現代碼，在頁面底部加載index.js文件實現動態設置基準值邏輯：
頁面初始化，就需要一個基準值，
<script src="js/index.js"></script> (function () {// 1、頁面一加載就要知道頁面寬度計算var setFont = function () {// 因為要定義變量可能和別的變量相互沖突，污染，所有用自調用函數var html = document.documentElement;// 獲取html// 獲取寬度var width = html.clientWidth;// 判斷if (width < 1024) width = 1024;if (width > 1920) width = 1920;// 設置html的基準值var fontSize = width / 80 + 'px';// 設置給htmlhtml.style.fontSize = fontSize;}setFont();// 2、頁面改變的時候也需要設置// 尺寸改變事件window.onresize = function () {setFont();} })();注意：書寫CSS代碼，讓px轉換rem單位，使用一個cscode插件 cssrem
- vscode插件搜索cssrem，進行安裝既可
- 需要在設置中cssrem換算的時候使用80的比例
7、基礎布局
html結構
<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.15，字體12px，內外邊距清除
- viewport 主體容器，限制最小寬度1024px，與最大寬度1920px，最小高度780px。
- 需要居中顯示
- 使用logo.png做為背景圖，在容器內顯示
- 內間距 88px 20px 0
- column 列容器，分三列，占比 3：4：3
- 中間容器外間距 32px 20px a
css樣式：
/* 基礎布局 */ body{font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;font-size: 0.5rem;line-height: 1.15;background: url(../images/bg.jpg) no-repeat 0 0 / cover; } h4,h3,ul{margin: 0;padding: 0;font-weight: normal; } ul{list-style: none; } a{text-decoration: none; } .viewport{max-width: 1920px;min-width: 1024px;margin: 0 auto;min-height: 780px;padding: 3.667rem 0.833rem 0;background: url(../images/logo.png) no-repeat 0 0 / contain;display: flex; } .column{flex: 3;position: relative; } .column:nth-child(2){flex: 4;margin: 1.333rem 0.833rem 0; }8、邊框圖片
css3中自適應邊框圖片運用：
組合寫法：
border-image: url("images/border.jpg") 167/20px round;拆分寫法：
border-image-source: url("images/border.jpg"); border-image-slice: 167 167 167 167; border-image-width: 20px; border-image-repeat: round;解釋：
- 邊框圖片資源地址
- 裁剪尺寸（上 右 下 左）單位默認px，可使用百分百。
- 邊框圖片的寬度，默認邊框的寬度。
- 平鋪方式：
- stretch 拉伸（默認）
- repeat 平鋪，從邊框的中心向兩側開始平鋪，會出現不完整的圖片。
- round 環繞，是完整的使用切割后的圖片進行平鋪。
DEMO代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>邊框圖片</title><style>ul{margin: 0;padding: 0;list-style: none;}li{width: 350px;height: 160px;border: 20px solid #ccc;margin-top: 20px;}li:nth-child(1){/*border-image: url("images/border.jpg") 167/20px round;*/border-image-source: url("images/border.jpg");border-image-slice: 167 167 167 167;border-image-width: 20px;/*環繞 是完整的使用切割后的圖片進行平鋪*/ border-image-repeat: round; }li:nth-child(2){/*平鋪 從邊框的中心向兩側開始平鋪 會出現不完整的圖片*/ border-image: url("images/border.jpg") 167/20px repeat;}li:nth-child(3){/*默認的平鋪方式*/border-image: url("images/border.jpg") 167/20px stretch;}</style> </head> <body> <ul><li></li><li></li><li></li> </ul> </body> </html>課程回顧：
? 可視化：介紹
? Echarts：JavaScropt庫，圖表
? 下載，引入，【寫一個盒子，實例化對象，配置項，對象.setOption(配置項)】
? REM：1024-1920，80
? 局部：flex
? 邊框圖片：畫4到，吧四個角切割出來，四個角依次放到盒子的四個角
? background-image：url(地址) 切割/邊框px 拉伸;
總結
以上是生活随笔為你收集整理的数据可视化（BI报表的开发）第一天的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery第四天
- 下一篇： 数据可视化（BI报表的开发）第二天