学习笔记之数据可视化（二）——页面布局（中）
生活随笔
收集整理的這篇文章主要介紹了
学习笔记之数据可视化（二）——页面布局（中）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
續(xù)上一章
- 2.6 監(jiān)控區(qū)域布局
- 2.6.1 布局結(jié)構(gòu)解析：
- 2.6.2 樣式描述：
- 2.6.3 HTML結(jié)構(gòu)及CSS樣式代碼
- 2.6.3 ### 監(jiān)控區(qū)域-效果
- 2.6.7 點(diǎn)位區(qū)域（point）
2.6 監(jiān)控區(qū)域布局
監(jiān)控區(qū)域 monitor盒子高度： 480px，布局劃分及內(nèi)部盒子類名如下：
2.6.1 布局結(jié)構(gòu)解析：
- .tab樣切換：tabs 標(biāo)簽選項(xiàng)，加上active激活選項(xiàng)，默認(rèn)激活第一個(gè)選項(xiàng)；
- .顯示內(nèi)容：content 切換內(nèi)容，添加style="display: block;"顯示內(nèi)容 默認(rèn)激活第一個(gè)內(nèi)容
2.6.2 樣式描述：
- .inner 容器內(nèi)間距 24px 0
- .tabs 容器內(nèi)間距 0 36px
- a 容器 顏色： #1950c4 內(nèi)間距：0 27px 字體：18px
- 第一個(gè)a容器 去除左側(cè)內(nèi)間距 加上右側(cè)2px寬度邊框#00f2f1
- 激活的時(shí)候 顏色白色
- .content容器
- 占滿剩余高度 flex:1
- 默認(rèn)隱藏
- .head 容器
- 行高 1.05 背景 rgba(255, 255, 255, 0.1) 內(nèi)間距 12px 36px 顏色 #68d8fe 字體大小 14px
- row 容器
- 行高 1.05 內(nèi)間距 12px 36px 顏色 #68d8ff 字體大小 12px
- .icon-dot 字體圖標(biāo) 絕對定位 左邊0.2rem 透明度0
- 鼠標(biāo)經(jīng)過后：背景 rgba(255, 255, 255, 0.1) 透明度1
- col容器
- 寬度：1rem 2.5rem 1rem
- 第二個(gè)col 一行不換行 溢出 省略
2.6.3 HTML結(jié)構(gòu)及CSS樣式代碼
由于在CSS中，將兩個(gè)content盒子設(shè)置為了display:none（隱藏），因此，這里在HTML結(jié)構(gòu)里寫css行內(nèi)式，將第一個(gè)盒子打開（display:block）。
通過以上代碼，此時(shí)監(jiān)控區(qū)布局已實(shí)現(xiàn)的頁面效果如下圖：
接下來，就需要用到JavaScript，來實(shí)現(xiàn)切換效果。
2.6.3 ### 監(jiān)控區(qū)域-效果
新建一個(gè)JavaScript 文件：index.js，并引入HTML文件。
<head><!--。。。省略 --><script src="js/jquery.min.js"></script><script src="js/index.js"></script> </head>注意：引入自己的js 文件，必須在jQuery下面。也可寫在結(jié)構(gòu)中body的最底端，這樣還可省去寫js的入口函數(shù)。
2.6.3.1 立即執(zhí)行函數(shù)：
為了防止變量名沖突（變量污染）， 我們采用立即執(zhí)行函數(shù)策略。
注釋：在JavaScript 文件中，會(huì)有大量的變量命名；特別Echarts的使用，需要大量初始化Echarts對象。
語法格式：(function(){})();
語法示例如下：
// 立即執(zhí)行函數(shù)語法示例） (function(){var num = 10; })(); (function(){var num = 10; })();如上，這兩個(gè)函數(shù)內(nèi)部雖然變量名相同（都是num），但互相不會(huì)沖突（每個(gè)函數(shù)中的變量都是局部變量）。
注意： 多個(gè)立即執(zhí)行函數(shù)之間，必須加分號(hào)隔開。
因此，在本項(xiàng)目中采用以下方法：
在每個(gè)模塊中都專門新建一個(gè)立即執(zhí)行函數(shù)，可以重名，但是相互之間不會(huì)有影響。
2.6.3.2 切換功能：
- 綁定 、標(biāo)簽頁點(diǎn)擊、事件；
- 當(dāng)前容器加active，其他容器移除active；
- index對應(yīng)的內(nèi)容容器顯示，其他容器隱藏。
切換功能 JavaScript 代碼：
// 切換$(".monitor .tabs").on("click", "a", function() { // 這里還利用了事件委托// 為當(dāng)前活動(dòng)的 a 添加白色高亮的樣式$(this).addClass("active").siblings("a").removeClass("active");// 選取對應(yīng)索引號(hào)的content$(".monitor .content").eq($(this).index()).show().siblings(".content").hide();});2.6.3.3 動(dòng)畫功能（滾動(dòng)效果）：
- 原理及實(shí)現(xiàn)思路：
- 先克隆列表（marquee里面所有的行row）；
- marquee-view 占滿剩余高度，溢出隱藏；
- 絕對定位，top 1.6rem bottom 0 ；
- 寬度100%，溢出隱藏；
- 使用animation實(shí)現(xiàn)動(dòng)畫（CSS3動(dòng)畫滾動(dòng)marquee）；
- 使用 translateY 向上位移 50%；
- 動(dòng)畫時(shí)間15s，勻速播放，循環(huán)執(zhí)行。
- 鼠標(biāo)經(jīng)過marquee 就停止動(dòng)畫（animation-play-state: paused; ）
首先，利用CSS3 編寫CSS代碼：
/* 通過CSS3動(dòng)畫滾動(dòng)marquee */ .marquee-view .marquee {animation: move 15s linear infinite; } @keyframes move {0% {}100% {transform: translateY(-50%);} } /* 3.鼠標(biāo)經(jīng)過marquee 就停止動(dòng)畫 */ .marquee-view .marquee:hover {animation-play-state: paused; }然后，再書寫JavaScript代碼實(shí)現(xiàn)動(dòng)畫功能：
// 動(dòng)畫$(".marquee-view .marquee").each(function() {// console.log($(this));var rows = $(this).children().clone();$(this).append(rows);});至此，實(shí)現(xiàn)的項(xiàng)目效果如下：
2.6.7 點(diǎn)位區(qū)域（point）
原理及實(shí)現(xiàn)方法：
- 在官網(wǎng)找到類似的圖表引入到頁面中；
- 根據(jù)需求修改具體的配置
1、HTML結(jié)構(gòu)：
<!-- 點(diǎn)位 --><div class="point panel"><div class="inner"><h3>點(diǎn)位分布統(tǒng)計(jì)</h3><div class="chart"><div class="pie"></div><div class="data"><div class="item"><h4>320,11</h4><span><i class="icon-dot" style="color: #ed3f35"></i>點(diǎn)位總數(shù)</span></div><div class="item"><h4>418</h4><span><i class="icon-dot" style="color: #eacf19"></i>本月新增</span></div></div></div></div></div>2、CSS代碼：
point盒子高度為340px
為所有panel盒子添加文字樣式：
.panel h3 {font-size: .25rem;color: #FFF;font-weight: 400; }點(diǎn)位模塊至此實(shí)現(xiàn)效果如圖：
3、引入echarts圖表（南丁格爾玫瑰圖）
echarts圖表官方實(shí)例：https://echarts.apache.org/examples/zh/index.html
找到實(shí)例圖表后，根據(jù)需求修改配置項(xiàng)。
roseType:參數(shù)說明：面積模式 ‘a(chǎn)rea’ 和半徑模式radius。
引入時(shí)遵循以下步驟：
代碼如下：
// 點(diǎn)位分布統(tǒng)計(jì)模塊 (function() {// 實(shí)例化對象myChart = echarts.init(document.querySelector(".pie"));// 修改配置項(xiàng)和數(shù)據(jù)var option = {color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} (ozvdkddzhkzd%)'},series: [{name: '點(diǎn)位統(tǒng)計(jì)',type: 'pie',radius: ["10%", "70%"], //注意百分比要加引號(hào)center: ['50%', '50%'],roseType: 'radius',data: [{ value: 20, name: '云南' },{ value: 26, name: '北京' },{ value: 24, name: '山東' },{ value: 25, name: '河北' },{ value: 20, name: '江蘇' },{ value: 25, name: '浙江' },{ value: 30, name: '四川' },{ value: 42, name: '湖北' }],label: {fontSize: 10},labelline: {length: 6,length: 8}}]};// 將配置項(xiàng)和數(shù)據(jù)指定給實(shí)例對象myChart.setOption(option) })()實(shí)現(xiàn)效果如下：
注意： 餅形圖的文字樣式（label）和引導(dǎo)線樣式（labelline）都是在series 里面設(shè)置
最后，在上面的立即函數(shù)中，myChart的下面添加監(jiān)聽瀏覽器縮放事件，實(shí)現(xiàn)圖表隨瀏覽器適時(shí)等比例縮放。
上一章：學(xué)習(xí)筆記之?dāng)?shù)據(jù)可視化（二）—— 頁面布局（上）
下一章： 學(xué)習(xí)筆記之?dāng)?shù)據(jù)可視化（二）—— 頁面布局（下）
總結(jié)
以上是生活随笔為你收集整理的学习笔记之数据可视化（二）——页面布局（中）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 今天的作业 --- 去重
- 下一篇： css-层次选择器