數(shù)據(jù)可視化原理及應(yīng)用 課件 第5、6章 可視化工具ECharts基礎(chǔ)；ECharts繪制圖表入門_第1頁
數(shù)據(jù)可視化原理及應(yīng)用 課件 第5、6章 可視化工具ECharts基礎(chǔ)；ECharts繪制圖表入門_第2頁
數(shù)據(jù)可視化原理及應(yīng)用 課件 第5、6章 可視化工具ECharts基礎(chǔ)；ECharts繪制圖表入門_第3頁
數(shù)據(jù)可視化原理及應(yīng)用 課件 第5、6章 可視化工具ECharts基礎(chǔ)；ECharts繪制圖表入門_第4頁
數(shù)據(jù)可視化原理及應(yīng)用 課件 第5、6章 可視化工具ECharts基礎(chǔ)；ECharts繪制圖表入門_第5頁
已閱讀5頁，還剩158頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

數(shù)據(jù)可視化原理及應(yīng)用

樊銀亭夏敏捷主編清華大學(xué)出版社第5章ECharts可視化基礎(chǔ)5.1ECharts簡介和使用5.2JavaScript編程基礎(chǔ)5.3SVG基礎(chǔ)知識5.4DOM5.5Canvas5.6CSS語法基礎(chǔ)5.1ECharts簡介和使用近年來，可視化越來越流行，許多報刊雜志、門戶網(wǎng)站、新聞、媒體都大量使用可視化技術(shù)，使得復(fù)雜的數(shù)據(jù)和文字變得十分容易理解，有一句諺語“一張圖片價值于一千個字”，的確是名副其實。各種數(shù)據(jù)可視化工具也如井噴式地發(fā)展，ECharts正是其中的佼佼者。ECharts是一個使用JavaScript實現(xiàn)的開源可視化庫，兼容性強(qiáng)，底層依賴矢量圖形庫ZRender，提供直觀，交換豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。如果你不知道什么是

JavaScript，請先學(xué)習(xí)

JavaScript的相關(guān)知識。學(xué)習(xí)ECharts最好的地方是：

/zh/index.html

安裝引用EChartsECharts是一個JavaScript函數(shù)庫，并不需要通常所說的“安裝”。它只有一個文件，在HTML中引用即可。有兩種方法：（1）下載ECharts.js的文件:ECharts的官方網(wǎng)站很容易找到下載。解壓縮后，在HTML文件中包含相關(guān)的js文件即可。其中：echarts.js::未壓縮的文件，調(diào)試時用。echarts.min.js:壓縮后的文件，去掉了空格，體積較小，功能完全一樣，發(fā)布時使用。（2）還可以直接包含網(wǎng)絡(luò)的鏈接，這種方法較簡單：安裝引用D3（2）還可以直接包含網(wǎng)絡(luò)的鏈接，這種方法較簡單：4.X版：<scriptsrc="/echarts/4.3.0/echarts.min.js"></script><scriptsrc="/npm/echarts@4.3.0/dist/echarts.min.js"></script><scriptsrc="/ajax/libs/echarts/4.3.0/echarts.min.js"></script>5.X版：<scriptsrc="/npm/echarts@5.4.2/dist/echarts.min.js"></script>但使用的時候要保持網(wǎng)絡(luò)連接有效，不能再斷網(wǎng)的情況下使用。5.1.3ECharts需要的預(yù)備知識使用ECharts進(jìn)行數(shù)據(jù)可視化設(shè)計，需要具備以下預(yù)備知識。HTML：超文本標(biāo)記語言，用于設(shè)定網(wǎng)頁的內(nèi)容。CSS：層疊樣式表，用于設(shè)定網(wǎng)頁的樣式。JavaScript：一種直譯式腳本語言，用于設(shè)定網(wǎng)頁的行為。DOM：文檔對象模型，用于修改文檔的內(nèi)容和結(jié)構(gòu)。SVG：可縮放矢量圖形，用于繪制可視化的圖形。Canvas:HTML5用于繪制標(biāo)量圖(或位圖)。5.1.3ECharts需要的預(yù)備知識使用ECharts進(jìn)行數(shù)據(jù)可視化設(shè)計，需要具備以下預(yù)備知識。HTML：超文本標(biāo)記語言，用于設(shè)定網(wǎng)頁的內(nèi)容。CSS：層疊樣式表，用于設(shè)定網(wǎng)頁的樣式。JavaScript：一種直譯式腳本語言，用于設(shè)定網(wǎng)頁的行為。DOM：文檔對象模型，用于修改文檔的內(nèi)容和結(jié)構(gòu)。SVG：可縮放矢量圖形，用于繪制可視化的圖形。Canvas:HTML5用于繪制標(biāo)量圖(或位圖)。5.1.4HTMLHTML是HyperTextMarkupLanguage（即超文本標(biāo)記語言）的縮寫，它是通過嵌入標(biāo)記（標(biāo)簽）來表明文本格式的國際標(biāo)準(zhǔn)。用它編寫的文件擴(kuò)展名是.html或.htm，這種網(wǎng)頁文件的內(nèi)容通常是靜態(tài)的。下面是一個使用基本結(jié)構(gòu)標(biāo)記文檔的HTML文檔實例first.html。<html><head><title>HTML文件標(biāo)題</title></head><bodybackground＝"flower.gif"><!--HTML文件內(nèi)容--><p>thisisaparagraph</p><b>Thistextisbold</b></body></html>5.2JavaScript編程基礎(chǔ)JavaScript簡稱JS，是一種可以嵌入到HTML頁面中的腳本語言，HTML提供的很多API都可以在JavaScript程序中調(diào)用，因此學(xué)習(xí)JavaScript編程是閱讀本書后面內(nèi)容的基礎(chǔ)。5.2.1在HTML中使用JavaScript語言在HTML文件中使用JavaScript腳本時，JavaScript代碼需要出現(xiàn)在<ScriptLanguage="JavaScript">和</Script>之間?！纠?-1】一個簡單的在HTML文件中使用JavaScript腳本實例。另外一種插入JavaScript程序的方法是把JavaScript代碼寫到一個.js文件當(dāng)中，然后在HTML文件中引用該js文件，方法如下：<scriptsrc="***.js文件"></script>JavaScript包含下面5種原始數(shù)據(jù)類型。1．Undefined2．Null3．Boolean4．String5．Number5.2.2基本語法1．常量常量是內(nèi)存中用于保存固定值的單元，在程序中常量的值不能發(fā)生改變。2．變量變量是內(nèi)存中命名的存儲位置，可以在程序中設(shè)置和修改變量的值。在JavaScript中，可以使用var關(guān)鍵字聲明變量。注釋JavaScript支持2種類型的注釋字符。1．//2．/*...*/5.2.2基本語法1．算術(shù)運算符算術(shù)運算符可以實現(xiàn)數(shù)學(xué)運行，包括加（+）、減（-）、乘（*）、除（/）和求余（%）。2．賦值運算符JavaScript腳本語言的賦值運算符包含“=”、“+=”、“—=”、“*=”、“/=”、“%=”、“&=”、“^=”等，如表2-1所示。3．關(guān)系運算符JavaScript腳本語言中用于比較兩個數(shù)據(jù)的運算符稱為比較運算符，包括“==”、“!=”、“>”、“<”、“<=”、“>=”等，其具體作用見表2-2所示。4．邏輯運算符JavaScript腳本語言的邏輯運算符包括“&&”、“||”和“!”等，用于兩個邏輯型數(shù)據(jù)之間的操作，返回值的數(shù)據(jù)類型為布爾型。邏輯運算符的功能如表2-3所示。5.2.3JavaScript運算符和表達(dá)式5．位運算符位移運算符用于將目標(biāo)數(shù)據(jù)（二進(jìn)制形式）往指定方向移動指定的位數(shù)。JavaScript腳本語言支持“<<”、“>>”和“>>>”等位移運算符，其具體作用如見表2-4：6．條件運算符在JavaScript腳本語言中，“?：”運算符用于創(chuàng)建條件分支。7．逗號運算符使用逗號運算符可以在一條語句中執(zhí)行多個運算，例如：variNum1=1,iNum=2,iNum3=3;8．typeof運算符typeof運算符用于表明操作數(shù)的數(shù)據(jù)類型，返回數(shù)值類型為一個字符串。5.2.4JavaScript控制語句和函數(shù)選擇結(jié)構(gòu)語句1．if語句2．if...else...語句常用控制語句3．if...elseif…else語句【例5-3】下面是一個顯示當(dāng)前系統(tǒng)日期的JavaScript代碼，其中使用到if...elseif…else語句。常用控制語句4．switch語句switch(表達(dá)式){case值1:

語句塊1break;case值2:

語句塊2break;

……case值n:

語句塊nbreak;default:

語句塊n+1}【例2-5】將例2-4的按分?jǐn)?shù)輸出其等級使用switch語句實現(xiàn)。常用控制語句循環(huán)結(jié)構(gòu)語句1while語句while語句的語法格式為：while(表達(dá)式){

循環(huán)體語句}【例5-6】用while循環(huán)來計算1+2+3...+98+99+100的值。常用控制語句2.3.2循環(huán)結(jié)構(gòu)語句2．do…while語句do-while語句的語法格式如下：do{

循環(huán)體語句}while(表達(dá)式)；【例5-7】用do…while循環(huán)來計算1+2+3...+98+99+100的值。用do-while循環(huán)來實現(xiàn)如圖5-5所示計算某個區(qū)間數(shù)字的和。單擊“顯示結(jié)果”按鈕出現(xiàn)顯示結(jié)果的警告框。2.3常用控制語句3．for語句for循環(huán)語句是循環(huán)結(jié)構(gòu)語句，按照指定的循環(huán)次數(shù)，循環(huán)執(zhí)行循環(huán)體內(nèi)語句（或語句塊），其基本結(jié)構(gòu)如下：for(表達(dá)式1;表達(dá)式2;表達(dá)式3){循環(huán)體語句}【例5-8】用for循環(huán)來計算1+2+3...+98+99+100的值。常用控制語句3．for語句for循環(huán)語句是循環(huán)結(jié)構(gòu)語句，按照指定的循環(huán)次數(shù)，循環(huán)執(zhí)行循環(huán)體內(nèi)語句（或語句塊），其基本結(jié)構(gòu)如下：for(表達(dá)式1;表達(dá)式2;表達(dá)式3){循環(huán)體語句}【例2-8】用for循環(huán)來計算1+2+3...+98+99+100的值。常用控制語句4．continue語句continue語句的一般格式為：continue;該語句只能用在循環(huán)結(jié)構(gòu)中。當(dāng)在循環(huán)結(jié)構(gòu)中遇到continue語句時，則跳過continue語句后的其他語句，結(jié)束本次循環(huán)，并轉(zhuǎn)去判斷循環(huán)控制條件，以決定是否進(jìn)行下一次循環(huán)。5．break語句break語句的一般格式為：break;該語句只能用于兩種情況：（1）用在switch結(jié)構(gòu)中，當(dāng)某個case分支執(zhí)行完后，使用break語句跳出switch結(jié)構(gòu)。（2）用在循環(huán)結(jié)構(gòu)中，用break語句來結(jié)束循環(huán)。如果放在嵌套循環(huán)中，則break語句只能結(jié)束其所在的那層循環(huán)。5.2.5JavaScript函數(shù)函數(shù)（function）由若干條語句組成，用于實現(xiàn)特定的功能。函數(shù)包含函數(shù)名、若干參數(shù)和返回值。1創(chuàng)建自定義函數(shù)function函數(shù)名(參數(shù)列表){

函數(shù)體}functionPrintWelcome(){document.write("歡迎使用JavaScript");}5.2.5JavaScript函數(shù)2調(diào)用函數(shù)1．在JavaScript中使用函數(shù)名來調(diào)用函數(shù)在JavaScript中，可以直接使用函數(shù)名來調(diào)用函數(shù)。無論是內(nèi)置函數(shù)還是自定義函數(shù)，調(diào)用函數(shù)的方法都是一致的。2．在HTML中使用"javascript:"方式調(diào)用JavaScript函數(shù)在HTML中的a鏈接中可以使用"javascript:"方式調(diào)用JavaScript函數(shù)，方法如下：<ahref="javascript:函數(shù)名(參數(shù)列表)">…</a>3．與事件結(jié)合調(diào)用JavaScript函數(shù)可以將JavaScript函數(shù)指定為JavaScript事件的處理函數(shù)。當(dāng)觸發(fā)事件時會自動調(diào)用指定的JavaScript函數(shù)。關(guān)于JavaScript事件處理將在第3章介紹。5.2.5JavaScript函數(shù)3變量的作用域在函數(shù)中定義的變量被稱為局部變量。局部變量只在定義它的函數(shù)內(nèi)部有效，在函數(shù)體之外，即使使用同名的變量，也會被看作是另一個變量。相應(yīng)地，在函數(shù)體之外定義的變量是全局變量。全局變量在定義后的代碼中都有效，包括它后面定義的函數(shù)體內(nèi)。如果局部變量和全局變量同名，則在定義局部變量的函數(shù)中，只有局部變量是有效的。5.2.5JavaScript函數(shù)4函數(shù)的返回值使用return語句可以返回函數(shù)值并退出函數(shù)function函數(shù)名(){return返回值;}5定義函數(shù)庫JavaScript函數(shù)庫是一個.js文件，其中包含函數(shù)的定義。在HTML文件中引用函數(shù)庫js文件的方法如下：<scriptsrc="函數(shù)庫js文件"></script><script>//引用js文件中的函數(shù)</script>5.2.5JavaScript函數(shù)6JavaScript內(nèi)置函數(shù)1．a(chǎn)lert()函數(shù)alert()函數(shù)用于彈出一個消息對話框，該對話框包括一個“確定”按鈕。2．confirm()函數(shù)confirm()函數(shù)用于顯示一個請求確認(rèn)對話框，包含一個“確定”按鈕和一個“取消”按鈕。在程序中，可以根據(jù)用戶的選擇決定執(zhí)行的操作5.2.5JavaScript函數(shù)3．parseFloat()函數(shù)parseFloat()函數(shù)用于將字符串轉(zhuǎn)換成符點數(shù)字形式。語法如下：parseFloat(str)參數(shù)str是待解析的字符串。函數(shù)返回解析后的數(shù)字。4．parseInt()函數(shù)parseInt()函數(shù)用于將字符串轉(zhuǎn)換成整型數(shù)字形式。語法如下：parseInt(str,radix)參數(shù)str是待解析的字符串；參數(shù)radix可選。表示要解析的數(shù)字的進(jìn)制。該值介于2~36之間。5．prompt()函數(shù)prompt()函數(shù)指定用于顯示可提示用戶輸入的對話框，該對話框包含一個“確定”按鈕、一個“取消”按鈕和一個文本框。5.2.6JavaScript類的定義和實例化對象是客觀世界存在的人、事和物體等實體。現(xiàn)實生活中存在很多的對象，比如貓、自行車等。不難發(fā)現(xiàn)它們有兩個共同特征：都有狀態(tài)和行為。面向?qū)ο蟪绦蛟O(shè)計思想以HTML文檔中的document作為一個對象，如圖所示。面向?qū)ο蟪绦蛟O(shè)計思想

面向?qū)ο缶幊堂嫦驅(qū)ο缶幊蹋∣PP）是一種計算機(jī)編程架構(gòu)，具有三個最基本的特點：封裝、重用性（繼承）、多態(tài)。實際上，JavaScript語言是通過一種叫做原型（prototype）的方式來實現(xiàn)面向?qū)ο缶幊痰?。JavaScript類的定義和實例化嚴(yán)格的說，JavaScript是基于對象的編程語言，而不是面向?qū)ο蟮木幊陶Z言。在面向?qū)ο蟮木幊陶Z言中（如Java、C++、C#、PHP等），聲明一個類使用class關(guān)鍵字。但是在JavaScript中，沒有聲明類的關(guān)鍵字，也沒有辦法對類的訪問權(quán)限進(jìn)行控制。JavaScript使用函數(shù)來定義類。JavaScript類的定義和實例化1.類的定義定義一個Person類：functionPerson(){="張三";//定義一個屬性namethis.sex="男";//定義一個屬性sexthis.say=function(){//定義一個方法say()document.write("我的名字是"++"，性別是"+this.sex+"。");}}JavaScript類的定義和實例化2.創(chuàng)建對象（類的實例化）創(chuàng)建對象的過程也是類實例化的過程。在JavaScript中，創(chuàng)建對象（即類的實例化）使用new關(guān)鍵字。創(chuàng)建對象語法：newclassName();將上面的Person類實例化：varzhangsan=newPerson();zhangsan.say();運行代碼，輸出如下內(nèi)容：大家好，我的名字是張三，性別是男。JavaScript類的定義和實例化2.創(chuàng)建對象（類的實例化）定義類時可以設(shè)置參數(shù)，創(chuàng)建對象時也可以傳遞相應(yīng)的參數(shù)。下面，我們將Person類重新定義：functionPerson(name,sex){=name;//定義一個屬性namethis.sex=sex;//定義一個屬性sexthis.say=function(){//定義一個方法say()document.write("大家好，我的名字是"++"，性別是"+this.sex);}}varzhangsan=newPerson("小麗","女");zhangsan.say();JavaScript類的定義和實例化3.通過對象直接初始化創(chuàng)建對象通過直接初始化對象來創(chuàng)建對象，與定義對象的構(gòu)造函數(shù)方法不同的是，該方法不需要new生成此對象的實例，改寫zhangsan對象：<script>//直接初始化對象varzhangsan={name:"張三",sex:"男",say:function(){//定義對象的方法document.write("大家好，我的名字是"++"，性別是"+this.sex);}}zhangsan.say();</script>JavaScript類的定義和實例化3.通過對象直接初始化創(chuàng)建對象可以通過對象直接初始化創(chuàng)建對象是一個“名字/值”對列表，每個“名字/值”對之間用逗號分隔，最后用一個大括號括起來。“名字/值”對表示對象的一個屬性或方法，名和值之間用冒號分隔。上面的zhangsan對象，也可以這樣來創(chuàng)建：varzhangsan={}="張三";zhangsan.sex="男";zhangsan.say=function(){return"嗨！大家好，我來了。";}該方法在只需生成一個對象實例并進(jìn)行相關(guān)操作的情況下使用時，代碼緊湊，編程效率高，但致命的是，若要生成若干個對象實例，就必須為生成每個對象實例重復(fù)相同的代碼結(jié)構(gòu)，代碼的重用性比較差，不符合面向?qū)ο蟮木幊趟悸?，?yīng)盡量避免使用該方法創(chuàng)建自定義對象。JavaScript訪問和添加對象的屬性和方法屬性是一個變量，用來表示一個對象的特征，如顏色、大小、重量等；方法是一個函數(shù)，用來表示對象的操作，如奔跑、呼吸、跳躍等。在JavaScript中，可以使用“.”和“[]”來訪問對象的屬性。1.使用“.”來訪問對象屬性語法：objectNpertyName其中，objectName為對象名稱，propertyName為屬性名稱。2.使用“[]”來訪問對象屬性語法：objectName[propertyName]其中，objectName為對象名稱，propertyName為屬性名稱。3.訪問對象的方法在JavaScript中，只能使用“.”來訪問對象的方法。語法：objectName.methodName()其中，objectName為對象名稱，methodName()為函數(shù)名稱?！纠?-19】創(chuàng)建一個Person對象并訪問其成員。向?qū)ο筇砑訉傩院头椒ā纠?-21】用Person類創(chuàng)建一個對象，向其添加屬性和方法。functionPerson(name,sex){//定義類=name;//定義一個屬性namethis.sex=sex;//定義一個屬性sexthis.say=function(){//定義一個方法say()return"大家好，我的名字是"++"，性別是"+this.sex+"。";}}varzhangsan=newPerson("張三","男");//創(chuàng)建對象zhangsan.say();//動態(tài)添加屬性和方法zhangsan.tel=;//動態(tài)添加屬性telzhangsan.run=function(){//動態(tài)添加方法runreturn"我跑得很快！";}//彈出警告框alert("姓名："+);alert("姓別："+zhangsan.sex);alert(zhangsan.say());alert("電話："+zhangsan.tel);alert(zhangsan.run());JavaScript內(nèi)置對象JavaScript的內(nèi)置對象（內(nèi)置類）框架如圖4-4所示。5.2.7調(diào)試JavaScript程序的方法調(diào)試JavaScript程序通常包含下面2項任務(wù)：1．查看程序中變量的值。通?？梢允褂胐ocument.write()方法或alert()方法輸出變量的值。2．定位JavaScript程序中的錯誤。因為JavaScript程序多運行于瀏覽器，所以可以借助各種瀏覽器的開發(fā)人員工具分析和定位JavaScript程序中的錯誤。（1）借助IE瀏覽器的開發(fā)人員工具定位JavaScript程序中的錯誤（2）借助Chrome瀏覽器的開發(fā)者工具定位JavaScript程序中的錯誤5.2.8ES6簡介1.變量相關(guān)ES2015(ES6)新增加了兩個重要的JavaScript關(guān)鍵字：let和const。let聲明的變量只在let所在的代碼塊（一對花括號內(nèi)部的代碼）內(nèi)有效，也成為塊作用域。let只能聲明同一個變量一次而var可以聲明多次。for循環(huán)計數(shù)器很適合用let聲明。varj=5;for(letj=0;j<10;j++){console.log(j);}console.log(j);//5,不受影響constconst聲明一個只讀的常量，一旦聲明，常量的值就不能改變。constPI=3.1415926;對象的屬性直接寫變量varage=12;varname="Amy";varperson={age,name};//{age:12,name:"Amy"}以上寫法等同于：varperson={age:age,name:name};方法名也可以簡寫。varperson={sayHi(){console.log("Hi");}}person.sayHi();//"Hi"ES6允許對象的屬性直接寫變量，這時候?qū)傩悦亲兞棵?，屬性值是變量值。以上寫法等同于：varperson={sayHi:function(){console.log("Hi");}}person.sayHi();//"Hi"class類例如，ES5中定義一個Person類：functionPerson(name,age){//構(gòu)造函數(shù)=name;//定義一個屬性namethis.age=age;//定義一個屬性agethis.say=function(){//定義一個方法say()console.log("我的名字是"++"，+"今年"+this.age+"歲了");}}ES6中改用class定義Person類如下：classPerson{//定義了一個名字為Person的類

constructor(name,age){//constructor是一個構(gòu)造方法，用來接收參數(shù)=name;//this代表的是實例對象this.age=age;}say(){//這是一個類的方法，注意不要加上functionreturn"我的名字叫"++"今年"+this.age+"歲了";}}varobj=newPerson("xmj",48);console.log(obj.say());//我的名字叫xmj今年48歲了ES6引入了class（類）這個概念，通過class關(guān)鍵字可以定義類。該關(guān)鍵字的出現(xiàn)使得其在對象寫法上更加清晰，更像是一種面向?qū)ο蟮恼Z言。實際上class的本質(zhì)仍是function，它讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法。

模塊功能1．export命令下面是一個JS文件，里面使用export命令來暴露出變量、函數(shù)或類（class）這些接口。//a.jsexportvarstr="export的內(nèi)容";exportvaryear=2019;exportfunctionmessage(sth){returnsth;}推薦使用下面方法在腳本尾部暴露出變量、函數(shù)或類（class）這些接口。//a.jsvarstr="export的內(nèi)容";varyear=2019;functionmessage(sth){returnsth;}export{str,year,message};模塊功能主要由兩個命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對外接口，import命令用于獲取其他模塊提供的功能。模塊功能使用export命令定義了模塊的對外暴露出的變量，函數(shù)或類（class）以后，其他JS文件就可以通過import命令加載這個模塊，從而使用這些變量、函數(shù)或類（class）。//b.jsimport{str,year,message}from'./a.js';上面代碼的import命令，用于加載a.js文件，引入后便可以在b.js文件中使用a.js文件中的變量、函數(shù)或類等。import命令接受一對大括號，里面指定要從其他模塊導(dǎo)入的變量、函數(shù)或類名。大括號里面的名稱，必須與被導(dǎo)入模塊（a.js）對外接口的名稱相同。2．import命令模塊功能exportdefault命令用于指定模塊的默認(rèn)輸出。顯然，一個模塊只能有一個默認(rèn)輸出，因此exportdefault命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能唯一對應(yīng)exportdefault命令。一個文件內(nèi)不能有多個exportdefault。//a2.jsconststr="exportdefault的內(nèi)容";exportdefaultstr在另一個文件中的導(dǎo)入方式：//b2.jsimportstrfrom'./a2.js';//導(dǎo)入的時候沒有花括號注意：通過export方式導(dǎo)出，在導(dǎo)入時要加{}，exportdefault則不需要。3．exportdefault命令箭頭函數(shù)1．書寫語法箭頭=>左邊為函數(shù)輸入?yún)?shù)，而右邊是進(jìn)行的操作以及返回的值。例如：x=>x*x上面的箭頭函數(shù)相當(dāng)于：匿名函數(shù)的一種簡寫function(x){returnx*x;}如果參數(shù)不是一個，就需要用括號()括起來。//兩個參數(shù):(x,y)=>x*x+y*y如果要返回一個對象，就要注意，如果是單表達(dá)式，這么寫的話會報錯。x=>{foo:x}//SyntaxError:因為和函數(shù)體的{...}有語法沖突，所以要改為：x=>({foo:x})//okES6標(biāo)準(zhǔn)新增了一種新的函數(shù)ArrowFunction（箭頭函數(shù)）。箭頭函數(shù)的定義用的就是一個箭頭。箭頭函數(shù)2．this相關(guān)箭頭函數(shù)看上去是匿名函數(shù)的一種簡寫，但實際上，箭頭函數(shù)和匿名函數(shù)有個明顯的區(qū)別：箭頭函數(shù)沒有自己的this，箭頭函數(shù)會捕獲其所在上下文的this值，作為自己的this?？梢越鉀Q由于JavaScript嵌套函數(shù)中this指向的問題。通常來說，箭頭函數(shù)內(nèi)部的this就是外層代碼塊的this。='window';varobj={name:'latency',show_name:function(){//箭頭函數(shù)的this，指向箭頭函數(shù)定義時所處的對象，默認(rèn)使用外層函數(shù)的this.varfn=()=>{console.log();}//其this指向obj，輸出latencyfn();},}obj.show_name();//輸出obj的name：latency以上例子就可以很清楚的看出箭頭函數(shù)和普通函數(shù)中this的區(qū)別。箭頭函數(shù)與普通函數(shù)的區(qū)別var

obj={a:10,b:()=>{console.log(this.a);//undefinedconsole.log(this);//Window},//沒有調(diào)用者（上下文對象）則默認(rèn)指向window.c:function(){console.log(this.a);//10console.log(this);//{a:10,b:?,c:?}//普通函數(shù)的this指向調(diào)用它的那個對象}}obj.b();obj.c();箭頭函數(shù)不綁定this，會捕獲其所在的上下文的this值，作為自己的this值5.3SVG基礎(chǔ)知識可縮放矢量圖形SVG(ScalableVectorGraphics)是一個成熟的W3C標(biāo)準(zhǔn)，被設(shè)計用來在Web和移動平臺上展示可交互的圖形。和HTML類似，SVG也支持CSS和JavaScript。盡管可以使用HTML展示數(shù)據(jù)，SVG才是數(shù)據(jù)可視化領(lǐng)域的事實標(biāo)準(zhǔn)。5.3.1圖片存儲方式將圖片存儲為數(shù)據(jù)有兩種方案。矢量圖：矢量圖形是由數(shù)學(xué)公式所定義的直線和曲線所組成的。它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。矢量圖形與分辨率無關(guān)。

WMF(office剪貼畫）、CDR（CorelDraw)、Eps和AI（AdobeIllustrator）、DWG（AutoCad）矢量文件。位圖：位圖通過組成圖像的每一個點（像素）的位置和色彩來表現(xiàn)圖像，這些點可以進(jìn)行不同的排列和染色以構(gòu)成圖樣。JPEG壓縮格式、BMP位圖、GIF位圖壓縮或GIF動畫文件、PICT動畫格式文件、EMF增強(qiáng)圖元位圖文件、5.3.2SVG概念SVG可縮放矢量圖形（ScalableVectorGraphics）是基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C(國際互聯(lián)網(wǎng)標(biāo)準(zhǔn)組織)在2000年8月制定的一種新的二維矢量圖形格式，也是規(guī)范中的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。<?xmlversion="1.0"standalone="no"?><!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN""/Graphics/SVG/1.1/DTD/svg11.dtd"><svgversion="1.1"xmlns="/2000/svg"width="100%"height="100%"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="red"/></svg>5.3.3SVG優(yōu)勢相比任何基于光柵的格式，SVG具有多項優(yōu)勢：1．SVG圖形是使用數(shù)學(xué)公式創(chuàng)建的，無需存儲每個獨立像素的數(shù)據(jù)，文件大小可能更小，所以SVG圖形比其他光柵圖形的加載速度更快。2．矢量圖形可更好地縮放。對于網(wǎng)絡(luò)上的圖像，當(dāng)位圖圖像不再是原始大小時，顯示圖像的程序會猜測使用何種數(shù)據(jù)來填充新的像素，可能產(chǎn)生失真。矢量圖像具有更高的彈性；當(dāng)圖像大小變化時，數(shù)據(jù)公式可相應(yīng)地調(diào)整。用戶可以任意縮放圖像顯示，而不會破壞圖像的清晰度、細(xì)節(jié)等。3．SVG圖像由瀏覽器渲染，可以以編程方式繪制。SVG圖像可動態(tài)地更改，這使它們尤其適合數(shù)據(jù)驅(qū)動的應(yīng)用程序，比如圖表。4．SVG圖像的源文件是一個文本文件，所以它具有易于訪問和搜索引擎友好特征。5．超級顏色控制。SVG圖像提供一個1600萬種顏色的調(diào)色板，支持ICC顏色描述文件標(biāo)準(zhǔn)、RGB、線性填充、漸變和蒙版。5.3.4向網(wǎng)頁添加SVGXML

第一種方法是直接將SVGXML嵌入到HTML文檔中?！纠?-22】直接將SVGXML嵌入HTML文檔。<html><head><title>EmbeddedSVG</title></head><bodystyle="height:600px;width:100%;padding:30px;"><svgxmlns="/2000/svg"version="1.1"><circlecx="100"cy="50"r="40"fill="red"/></svg></body></html>5.3.4向網(wǎng)頁添加SVGXML

第二種方法可以使用.svg擴(kuò)展名保存SVGXML文件。當(dāng)將SVG圖形保存在.svg文件中時，您可以使用embed、object和iframe元素來將它包含在網(wǎng)頁中。使用<embed>元素包含一個SVGXML文件的代碼如下：<embedsrc="circle.svg"type="image/svg+xml"></embed>使用<object>元素包含一個SVGXML文件的代碼如下：<objectdata="circle.svg"type="image/svg+xml"></object>使用<iframe>元素包含一個SVGXML文件的代碼如下：<iframesrc="circle1.svg"></iframe>當(dāng)使用其中一種方法時，可以將同一個SVG圖形包含在多個頁面中，并編輯.svg源文件來進(jìn)行更新。5.4文檔對象模型DOMHTMLDOM定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法。在DOM模型中，它以樹的形式對這個文檔進(jìn)行描述，其中各HTML的每個元素（標(biāo)記）都作為一個對象，如圖4-6所示。它把HTML文檔表現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點樹）。具體來講，DOM節(jié)點樹中的節(jié)點有元素節(jié)點、文本節(jié)點和屬性節(jié)點等三種不同的類型。5.4.1DOM節(jié)點樹HTMLDOM編程Document對象Document對象代表HTMLDOM樹的根節(jié)點，也稱為文檔對象，代表整個HTML文檔，提供了對文檔中的數(shù)據(jù)進(jìn)行操作的入口。Document對象是DOM的基礎(chǔ)，可以利用它所包含的屬性和方法來瀏覽、查詢和修改HTML文檔的內(nèi)容和結(jié)構(gòu)。Document表示了樹的頂層節(jié)點，它實現(xiàn)了DOM文檔的所有的基本方法（例如創(chuàng)建各種類型的節(jié)點），它創(chuàng)建了一個文檔對象，所有其它的對象都可以從這個文檔對象中得到和創(chuàng)建。HTMLDOM編程Node（節(jié)點）對象Node是文檔對象模型中的基本對象，元素、屬性、注釋、處理指令和其他的文檔組件都可以認(rèn)為是Node。事實上，Document對象本身也是一個Node對象。Node對象它的attributes和childNodes屬性對于遍歷DOM樹是非常有用的，它們是與當(dāng)前節(jié)點相關(guān)的節(jié)點的集合。另外，其他幾個屬性，如firstChild、lastChild、nextSibling等，也可為在樹中遍歷時導(dǎo)航。典型的Node節(jié)點對象及其屬性含義見圖4-7所示。5.4.2訪問修改HTML元素通過使用getElementById()和getElementsByTagName()這兩種方法可查找整個HTML文檔中的任何HTML元素。1．getElementById()方法getElementById()可通過指定的ID來返回元素:document.getElementById("ID");下面這個例子會返回文檔中所有<p>元素的一個節(jié)點列表:document.getElementsByTagName("p");可以通過來循環(huán)遍歷節(jié)點列表:<ScriptLanguage="JavaScript">varx=document.getElementsByTagName("p");for(vari=0;i<x.length;i++){//dosomethingwitheachparagraphConsole.log(x[i].innnerHTML);//輸出每個<p>元素的文本內(nèi)容}</Script>5.4.2訪問修改HTML元素2．getElementsByTagName()方法getElementsByTagName()方法會按指定的標(biāo)簽名返回所有的元素(節(jié)點列表)getElementsByTagName()語法document.getElementsByTagName("標(biāo)簽名稱");下面這個例子會返回文檔中所有<p>元素的一個節(jié)點列表:document.getElementsByTagName("p");可以通過來循環(huán)遍歷節(jié)點列表:<ScriptLanguage="JavaScript">varx=document.getElementsByTagName("p");for(vari=0;i<x.length;i++){//dosomethingwitheachparagraph

Console.log(x[i].innnerHTML);//輸出每個<p>元素的文本內(nèi)容}</Script>5.4.2訪問修改HTML元素在HTMLDOM中，常用的屬性加下：innerHTML：元素標(biāo)簽內(nèi)部的文本，包括HTML標(biāo)簽。innerText：元素標(biāo)簽內(nèi)部的文本，但不包括HTML標(biāo)簽。outerHTML：包括元素標(biāo)簽自身在內(nèi)的文本，也包括內(nèi)部的HTML標(biāo)簽。outerText：包括元索標(biāo)簽自身在內(nèi)的文本，但不包括HTML標(biāo)簽。nodeName：節(jié)點名稱。parentNode：父節(jié)點。childNodes：子節(jié)點。nextSibling：下一個兄弟節(jié)點。previousSibling：上一個兄弟節(jié)點。firstChild：第一個子節(jié)點。lastChild：最后一個子節(jié)點。style：元素的樣式。5.4.4DOM優(yōu)點和缺點DOM的優(yōu)勢主要表現(xiàn)在：易用性強(qiáng)，使用DOM時，將把HTML文檔所有的信息都存于內(nèi)存中，并且遍歷簡單，支持XPath，增強(qiáng)了易用性。DOM的缺點主要表現(xiàn)在：效率低，解析速度慢，內(nèi)存占用量過高，對于大文件來說幾乎不可能使用。另外效率低還表現(xiàn)在大量的消耗時間，因為使用DOM進(jìn)行解析時，將為HTML文檔的每個element、attribute、processing-instruction和comment都創(chuàng)建一個對象，這樣在DOM機(jī)制中所運用的大量對象的創(chuàng)建和銷毀無疑會影響其效率。5.4.3添加刪除HTML元素節(jié)點給文檔中添加節(jié)點可使用appendChild()方法，每個元素節(jié)點中都有這個方法，能在該元素的末尾添加子節(jié)點。為此，首先要創(chuàng)建一個節(jié)點，然后才能添加。請看如下代碼:varpara=document.createElement("p"); //創(chuàng)建節(jié)點ppara.innerHTML="Hello"; //給p的內(nèi)容賦值varbody=document.getElementByTagName("body");//獲取body節(jié)點body.appendChild(para); //給body節(jié)點添加子節(jié)點5.5使用Canvas畫圖HTML5提供了Canvas元素，可以在網(wǎng)頁中定義一個畫布，然后使用Canvas繪圖方法在畫布中畫圖。在游戲開發(fā)中大量使用Canvas畫圖。本章介紹在HTML5中如何使用Canvas畫圖。5.5.1Canvas元素Canvas就是畫布，可以進(jìn)行畫任何的線、圖形、填充等一系列的操作。Canvas是HTML5出現(xiàn)的新元素，它有自己的屬性、方法和事件，其中就有繪圖的方法，JavaScript能夠調(diào)用Canvas繪圖方法來進(jìn)行繪圖。另外Canvas不僅僅提供簡單的二維矢量繪圖，也提供了三維的繪圖，以及圖片處理等一系列的API支持。Canvas元素的定義語法如下：<canvasid="xxx"height=…width=…>…</canvas>在JavaScript中使用document.getElementById()方法獲取網(wǎng)頁中的對象，語法如下：document.getElementById(對象id)例如，獲取定義的myCanvas對象的代碼如下：<canvasid="myCanvas"height=100width=100>

您的瀏覽器不支持canvas。</canvas><scripttype="text/javascript">varc=document.getElementById("myCanvas");</script>坐標(biāo)系統(tǒng)5.5.2坐標(biāo)與顏色顏色的表示方法1．顏色關(guān)鍵字W3C的HTML4.0標(biāo)準(zhǔn)僅支持16種顏色名，它們是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果需要使用其它的顏色，需要使用十六進(jìn)制的顏色值。2．16進(jìn)制顏色值可以使用一個16進(jìn)制字符串表示顏色，格式為#RGB。其中，R表示紅色分量，G表示綠色分量，B表示藍(lán)色分量。每種顏色的最小值是0（十六進(jìn)制：#00）。最大值是255（十六進(jìn)制：#FF）。例如#FF0000表示紅色，#00FF00表示綠色，#0000FF表示藍(lán)色，#A020F0表示紫色，#FFFFFF表示白色，#000000表示黑色。3．RGB顏色值RGB顏色值可以使用如rgb(紅色分量,綠色分量,藍(lán)色分量)形式表示顏色。表5-1是16進(jìn)制字符串表示顏色與RGB顏色值對照表。5.5.2坐標(biāo)與顏色5.3.1繪制直線在JavaScript中可以使用CanvasAPI繪制直線，具體過程如下：（1）在網(wǎng)頁中使用Canvas元素定義一個Canvas畫布，用于繪畫。varc=document.getElementById("myCanvas");//獲取網(wǎng)頁中的canvas對象（2）使用JavaScript獲取網(wǎng)頁中的Canvas對象，并獲取Canvas對象的2d上下文ctx。使用2d上下文可以調(diào)用CanvasAPI繪制圖形。varctx=c.getContext("2d"); //獲取canvas對象的上下文（3）調(diào)用beginPath()方法，指示開始繪圖路徑，即開始繪圖。語法如下：ctx.beginPath();（4）調(diào)用moveTo()方法將坐標(biāo)移至直線起點。moveTo()方法的語法如下：ctx.moveTo(x，y);//x和y為要移動至的坐標(biāo)。（5）調(diào)用lineTo()方法繪制直線。lineTo()方法的語法如下：ctx.lineTo(x，y);//x和y為直線的終點坐標(biāo)。（6）調(diào)用stroke()方法，繪制圖形的邊界輪廓。語法如下：ctx.stroke();5.5.3繪制圖形1繪制直線在JavaScript中可以使用CanvasAPI繪制直線，具體過程如下：（1）在網(wǎng)頁中使用Canvas元素定義一個Canvas畫布，用于繪畫。varc=document.getElementById("myCanvas");//獲取網(wǎng)頁中的canvas對象（2）使用JavaScript獲取網(wǎng)頁中的Canvas對象，并獲取Canvas對象的2d上下文ctx。使用2d上下文可以調(diào)用CanvasAPI繪制圖形。varctx=c.getContext("2d"); //獲取canvas對象的上下文（3）調(diào)用beginPath()方法，指示開始繪圖路徑，即開始繪圖。語法如下：ctx.beginPath();（4）調(diào)用moveTo()方法將坐標(biāo)移至直線起點。moveTo()方法的語法如下：ctx.moveTo(x，y);//x和y為要移動至的坐標(biāo)。（5）調(diào)用lineTo()方法繪制直線。lineTo()方法的語法如下：ctx.lineTo(x，y);//x和y為直線的終點坐標(biāo)。（6）調(diào)用stroke()方法，繪制圖形的邊界輪廓。語法如下：ctx.stroke();5.5.3繪制圖形2繪制矩形可以通過調(diào)用rect()、strokeRect()、fillRect()和clearRect()等4個API方法在Canvas畫布中繪制矩形。1．rect()rect()用于創(chuàng)建矩形。rect()方法的語法如下：rect(x,y,width,height)2．strokeRect()strokeRect()繪制矩形（無填充）。strokeRect()方法的語法如下：strokeRect(x,y,width,height)3．fillRect()和clearRect()fillRect()繪制“被填充”的矩形。fillRect()方法的語法如下：fillRect(x,y,width,height)5.5.3繪制圖形3繪制圓弧可以調(diào)用arc()方法繪制圓弧，語法如下：arc(centerX,centerY,radius,startingAngle,endingAngle,antiClockwise);參數(shù)說明如下：centerX，圓弧圓心的X坐標(biāo)；centerY，圓弧圓心的Y坐標(biāo)；radius，圓弧的半徑；startingAngle，圓弧的起始角度；endingAngle，圓弧的結(jié)束角度；antiClockwise，是否按逆時針方向繪圖。5.5.3繪制圖形1描邊通過設(shè)置Canvas的上下文2D對象的strokeStyle屬性可以指定描邊的顏色，通過設(shè)置上下文2D對象的lineWidth屬性可以指定描邊的寬度。2填充圖形內(nèi)部通過設(shè)置Canvas的上下文2D對象的fillStyle屬性可以指定填充圖形內(nèi)部的顏色?！纠?-6】填充圖形內(nèi)部的例子。5.5.4描邊和填充3漸變顏色1．創(chuàng)建CanvasGradient對象CanvasGradient是用于定義畫布中的一個漸變顏色的對象。如果要使用漸變顏色，首先需要創(chuàng)建一個CanvasGradient對象?？梢酝ㄟ^下面2種方法創(chuàng)建CanvasGradient對象：（1）以線性顏色漸變方式創(chuàng)建CanvasGradient對象（2）以放射顏色漸變方式創(chuàng)建CanvasGradient對象2．為漸變對象設(shè)置顏色創(chuàng)建CanvasGradient對象后，還需要為其設(shè)置顏色基準(zhǔn)，可以通過CanvasGradient對象的addColorStop()方法在漸變中的某一點添加一個顏色變化。漸變中其他點的顏色將以此為基準(zhǔn)。4透明顏色在指定顏色時，可以使用rgba()方法定義透明顏色，格式如下：rgba(r,g,b,alpha)5.5.4描邊和填充1繪制圖像在畫布上繪制圖像的CanvasAPI是drawImage()，語法如下：drawImage(image,x,y)drawImage(image,x,y,width,height)drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)【例5-9】不同形式顯示一本圖書封面cover.jpg。5.5.5繪制圖像與文字2組合圖形在繪制圖形時，如果畫布上已經(jīng)有圖形，就涉及到一個問題：兩個圖形如何組合?？梢酝ㄟ^Canvas的上下文2D對象的globalCompositeOperation屬性來設(shè)置組合方式。globalCompositeOperation屬性的可選值如表5-1所示。5.5.5繪制圖像與文字3輸出文字可以使用strokeText()方法在畫布的指定位置輸出文字，語法如下：strokeText(stringtext,floatx,floaty)參數(shù)說明如下：string所要輸出的字符串；x和y要輸出的字符串位置坐標(biāo)。5.5.5繪制圖像與文字1保存和恢復(fù)繪圖狀態(tài)調(diào)用Context.save()方法可以保存當(dāng)前的繪圖狀態(tài)。Canvas狀態(tài)是以堆（stack）的方式保存繪圖狀態(tài)，繪圖狀態(tài)包括：當(dāng)前應(yīng)用的操作（比如移動，旋轉(zhuǎn)、縮放或變形）。strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、globalCompositeOperation等屬性的值。當(dāng)前的裁切路徑（clippingpath）調(diào)用Context.restoe()方法可以從堆中彈出之前保存的繪圖狀態(tài)。Context.save()方法和Context.restoe()方法都沒有參數(shù)?！纠?-12】保存和恢復(fù)繪圖狀態(tài)。5.5.6圖形的操作2圖形的變換1．平移translate(x,y)參數(shù)x是坐標(biāo)原點向x軸方向平移位移，參數(shù)y是坐標(biāo)原點向y軸方向平移位移。2．縮放scale(x,y)參數(shù)x是x坐標(biāo)軸縮放比例，參數(shù)y是y坐標(biāo)軸縮放比例。3．旋轉(zhuǎn)rotate(angle)參數(shù)angle是坐標(biāo)軸旋轉(zhuǎn)的角度（角度變化模型和畫圓的模型一樣）。4．變形setTransform()可以調(diào)用setTransform()方法對繪制的canvas圖形進(jìn)行變形，語法如下：context.setTransform(m11,m12,m21,m22,dx,dy);假定點(x,y)經(jīng)過變形后變成了(X,Y)，則變形的轉(zhuǎn)換公式如下：X=m11×x+m21×y+dxY=m12×x+m22×y+dy【例5-13】圖形的變換例子。5.5.6圖形的操作5.6CSS語法基礎(chǔ)5.6CSS語法基礎(chǔ)CSS即層疊樣式表（CascadingStyleSheet）。在網(wǎng)頁制作時采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的，更多新的模塊也被加入進(jìn)來。這些模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。使用CSS的好處在于用戶只需要一次性定義文字的顯示樣式，就可以在各個網(wǎng)頁中統(tǒng)一使用了，這樣既避免了用戶的重復(fù)勞動，也可以使系統(tǒng)的界面風(fēng)格統(tǒng)一。5.5.5.6.1CSS3語法基礎(chǔ)CSS基本語句CSS層疊樣式表一般由若干條樣式規(guī)則組成，以告訴瀏覽器應(yīng)怎樣去顯示一個文檔。而每條樣式規(guī)則都可以看作是一條CSS的基本語句。一條CSS的基本語句的結(jié)構(gòu)如下：選擇器{屬性名:值；屬性名:值；……}例如：div{width:100px;font-size:16pt;color:red}5.6.1CSS3語法基礎(chǔ)在HTML文檔中應(yīng)用CSS樣式1.內(nèi)部樣式表在網(wǎng)頁中可以使用style元素定義一個內(nèi)部樣式表，指定該網(wǎng)頁內(nèi)元素的CSS樣式?！纠?-1】使用內(nèi)部樣式表。例如：<HTML><HEAD><STYLEtype="text/css">A{color:red}P{background-color:yellow;color:white}</STYLE></HEAD><BODY><Ahref="">CSS示例</A><P>你注意到這一段文字的顏色和背景顏色了嗎?</P></BODY></HTML>5.6.1CSS3語法基礎(chǔ)2.樣式表文件在HTML文檔中可以使用link元素引用外部樣式表。創(chuàng)建一個style.css文件，內(nèi)容如下：A{color:red}P{background-color:blue;color:white}引用style.css的HTML文檔的代碼如下：<HTML><HEAD><linkrel="stylesheet"type="text/css"href="style.css"/></HEAD><BODY><Ahref="">CSS示例</A><P>你注意到這一段文字的顏色和背景顏色了嗎?</P></BODY></HTML>5.6.1CSS3語法基礎(chǔ)CSS選擇器在CSS中選擇器用于選擇需要添加樣式的元素。選擇器主要有三種。標(biāo)記選擇器一個完整的HTML頁面是有很多不同的標(biāo)記元素組成，例如：body、p或h3。而標(biāo)記選擇器，則是決定哪些標(biāo)記元素采用相應(yīng)的CSS樣式。2.類別選擇器在定義HTML元素時，可以使用class屬性指定元素的類別。在CSS中可以使用.class選擇器選擇指定類別的HTML元素，方法如下：.類名{

屬性:值;…屬性:值;}3.ID選擇器要將一個ID包括在樣式定義中，需要“#”號作為ID名稱的前綴。例如，將id="highlight"的元素設(shè)置背景為黃色的代碼如下：#highlight{background-color:yellow;}5.6.2CSS3動畫CSS3動畫效果有變形(transform)、過渡變換(transition)和動畫(animation)變形(transform)CSS3變形可以旋轉(zhuǎn)，縮放，扭曲（反過來），移動和拉伸元素。語法形式如下：transform:rotate|scale|skew|translate|matrix;其中：旋轉(zhuǎn)rotate、縮放scale、扭曲skew和移動translate以及矩陣變形matrix。（1）rotate順時針旋轉(zhuǎn)元素一個給定度數(shù)。負(fù)值是允許的，這樣是元素逆時針旋轉(zhuǎn)。【例6-3】旋轉(zhuǎn)<div>元素30度。5.6.2CSS3動畫CSS3變形可以旋轉(zhuǎn)，縮放，扭曲（反過來），移動和拉伸元素。語法如下：transform:rotate|scale|skew|translate|matrix;其中：旋轉(zhuǎn)rotate、縮放scale、扭曲skew和移動translate以及矩陣變形matrix。（1）rotate順時針旋轉(zhuǎn)元素一個給定度數(shù)。負(fù)值是允許的，這樣是元素逆時針旋轉(zhuǎn)?！纠?-3】旋轉(zhuǎn)<div>元素30度。（2）scale使元素按比例增加或減少，取決于寬度（X軸）和高度（Y軸）的參數(shù)?！纠?-4】按比例縮放div元素。（3）skew語法：transform:skew(<angle>[,<angle>]);【例6-5】將div元素在X軸和Y軸上傾斜20度30度。5.6.2CSS3動畫（4）matrixmatrix將2D變換方法合并成一個。matrix有六個參數(shù)，包含旋轉(zhuǎn)，縮放，移動（平移）和傾斜功能。【例6-6】利用matrix()方法旋轉(zhuǎn)div元素30°。5.6.2CSS3動畫過渡變換(transition)CSS3過渡是元素從一種樣式逐漸改變?yōu)榱硪环N樣式的效果。transition主要包含四個屬性值，如表6-1所示。5.6.2CSS3動畫動畫(animation)動畫是使元素從一種樣式逐漸變化為另一種樣式的效果?？捎冒俜直葋硪?guī)定變化發(fā)生的時間，或用關(guān)鍵詞"from"和"to"，等同于0%和100%。0%是動畫的開始，100%是動畫的完成?！纠?-10】當(dāng)動畫為25%及50%時改變背景色，然后當(dāng)動畫100%完成時再次改變。

數(shù)據(jù)可視化原理及應(yīng)用

樊銀亭夏敏捷主編清華大學(xué)出版社第6章ECharts繪制圖表入門6.1ECharts圖表入門6.2ECharts配置項和組件6.3ECharts數(shù)據(jù)集6.1ECharts圖表入門各種數(shù)據(jù)可視化工具也如井噴式地發(fā)展，ECharts正是其中的佼佼者。本章開始進(jìn)入ECharts圖表繪制。ECharts是基于Canvas技術(shù)進(jìn)行圖表繪制的，準(zhǔn)確地說，ECharts的底層依賴于輕量級的Canvas類庫ZRender。ZRender是百度團(tuán)隊開發(fā)的，它通過Canvas繪圖時會調(diào)用Canvas的一些接口。通常情況下，使用ECharts開發(fā)圖表時，并不會直接涉及類庫ZRender。ECharts基礎(chǔ)架構(gòu)如圖6-1所示。6.1ECharts圖表入門ECharts基礎(chǔ)架構(gòu)在ECharts基礎(chǔ)架構(gòu)中基礎(chǔ)庫的上層有3個模塊：組件、圖類和接口。6.1ECharts圖表入門在ECharts基礎(chǔ)架構(gòu)中基礎(chǔ)庫的上層有3個模塊：組件、圖類和接口。組件模塊包含坐標(biāo)軸（axis）、網(wǎng)格（grid）、極坐標(biāo)（polar）、標(biāo)題（title）、提示（tooltip）、圖例（legend）、數(shù)據(jù)區(qū)域縮放（dataZoom）、值域漫游（dataRange）、工具箱（toolbox）、時間軸（timeline）。ECharts的圖類模塊近30種，常用的圖類有柱狀圖（bar）、折線圖（line）、散點圖（scatter）、K線圖（k）、餅圖（pie）、雷達(dá)圖（radar）、地圖（map）、儀表盤（gauge）、漏斗圖（funnel）。圖類與組件共同組成了一個圖表，如果只是制作圖表的話，只需掌握好圖類與組件即可完成80%左右的功能。

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論