PHP動態(tài)網(wǎng)站開發(fā)項目教程（微課版） 課件 任務(wù)10、11 在線投票系統(tǒng)投票限制、在線投票系統(tǒng)管理員功能

牟奇春主編PHP動態(tài)網(wǎng)站開發(fā)項目教程（微課版）任務(wù)10在線投票系統(tǒng)投票限制子任務(wù)10.1一人一天只能給一輛車投5票10.1.1了解投票限制的常見手段

（1）IP地址限制。這是網(wǎng)上投票最常見的防刷票手段，可限制每個IP地址在一定時間內(nèi)只能投票一次。因為IP地址很難偽造，因此可靠性較高，建議開啟。需要注意的是，如果在同一個局域網(wǎng)下（如用同一個路由器的WiFi），則可能存在不同終端IP地址相同的情況。如果使用的是手機運營商網(wǎng)絡(luò)，則一般不會有此情況。（2）設(shè)備限制。投票平臺使用Cookie等技術(shù)標記已投過票的設(shè)備（計算機、手機等），但從技術(shù)上來說，Cookie很容易丟失和被刪除（如清空瀏覽器緩存、清空微信緩存、重啟微信等），因此該方法并不可靠，但仍建議開啟，作為額外的一道屏障。（3）圖形驗證碼。驗證碼要求投票者輸入或回答一些機器較難識別的圖形或問題，可有效防止作弊者利用計算機程序模擬自動投票。（4）投票時間限制。比如，同一個用戶，限制在多少時間內(nèi)，只能投一票。（5）投票對象限制。比如，同一個用戶，只能給指定個數(shù)的投票對象投票。（6）其他限制。比如限制地理位置、要求用戶使用短信驗證碼等。10.1.2設(shè)置一人一天只能給一輛車投5票

小王同學在設(shè)計數(shù)據(jù)庫時，專門設(shè)計了一張表，用于記錄投票詳情。現(xiàn)在要實現(xiàn)投票限制，就需要查詢這張數(shù)據(jù)表，了解過往的投票情況，從而判斷當前這次投票是否滿足可投票條件。具體查詢的是投票時間為當天，且用戶ID（userID）等于當前登錄者的ID，車輛ID（carID）等于當前被投票車輛ID的所有記錄。如果此記錄數(shù)小于5，則可以投票，否則不能投票。

程序思路理清楚了，完成代碼就簡單了，小王同學迅速完成了投票限制的代碼。【知識儲備】1．PHP中的日期函數(shù)

PHP中的date()函數(shù)可把時間戳格式化為可讀性更好的日期或時間。其語法規(guī)則及參數(shù)如下所示。stringdate(string$format[,int$timestamp])2．使用聚合函數(shù)count()實現(xiàn)投票判斷參數(shù)描述format必需。規(guī)定時間戳的格式timestamp可選。規(guī)定時間戳。默認是當前的日期或時間表10.1.1

date()函數(shù)的參數(shù)詳情

常用的MySQL聚合函數(shù)有以下幾個。（1）AVG()。（2）SUM()。（3）MAX()。（4）MIN()。（5）COUNT()。

其中AVG()和SUM()函數(shù)可以用于數(shù)值型字段，用于計算一組數(shù)據(jù)的“平均值”和“和”。

MIN()和MAX()函數(shù)可以用于任意數(shù)據(jù)類型的數(shù)據(jù)，作用是取其最小值和最大值。

COUNT()函數(shù)可以返回表中的記錄總數(shù)，適用于任意數(shù)據(jù)類型的數(shù)據(jù)。在具體使用時，可以有3種寫法，分別是COUNT(列)、COUNT(*)、COUNT(1)。這3種不同的寫法在不同的數(shù)據(jù)庫存儲引擎下，效率會不一樣。如果使用的是MyISAM存儲引擎，則三者的效率相同，都是O

(1)。如果使用的是InnoDB存儲引擎，則三者的效率：COUNT(*)=COUNT(1)（只能說約等于）>COUNT(字段)（如果字段都非空，那么幾乎和前兩者沒有什么區(qū)別）。

GROUPBY根據(jù)BY指定的列對數(shù)據(jù)進行分組，所謂分組，就是將一個“數(shù)據(jù)集”劃分成若干“小區(qū)域”，然后針對若干“小區(qū)域”進行數(shù)據(jù)處理。需要強調(diào)的是，應(yīng)該在對行進行分組之前應(yīng)用WHERE子句，而在對行進行分組之后應(yīng)用HAVING子句。換句話說，WHERE子句應(yīng)用于行，HAVING子句應(yīng)用于分組。

要對組進行排序，請在GROUPBY子句后添加ORDERBY子句。

GROUPBY子句中出現(xiàn)的列稱為分組列。如果分組列包含NULL值，則所有NULL值都會被匯總到一個分組中，因為GROUPBY子句認為NULL值相等。子任務(wù)10.2一人一天只能給3輛車投票10.2.1分析一人一天只能給3輛車投票的邏輯

一人一天只能給3輛車投票的查詢邏輯為：在查詢時，首先排除當前車輛，然后查詢是否還給其他車輛投過票；如果查出的結(jié)果是還為其他3輛車投過票，加上當前車輛，就有4輛車了，超過了限制的數(shù)量3；如果不排除當前投票車輛，就會有bug；如果當前車輛在已投過票的車輛以外，就不能再投票了；如果當前車輛在已投過票的車輛中，就還可以繼續(xù)投票（當然，還要看其他條件是否滿足）。10.2.2理解GROUPBY語句

SQL語句中的GROUPBY相當于Excel中的分類匯總。GROUPBY語句根據(jù)一列或多列對結(jié)果集進行分組。在分組列上可以使用COUNT()、SUM()、AVG()等函數(shù)。最常見的例子是學生的成績表，里面有很多行記錄，列包括姓名、科目、分數(shù)。如果要統(tǒng)計每個人各科的總分，就需要用到GROUPBY語句。只需要在GROUPBY后面跟上姓名這一列，即可按照姓名來進行分組，然后使用()函數(shù)可求出每個人的總分。顯然，使用AVG()就可以求出每個人的平均分。

下面用一個示例來說明GROUPBY語句的使用方法。

數(shù)據(jù)表結(jié)構(gòu)及內(nèi)容如圖10.2.1所示。其中name表示姓名，date表示最后登錄的日期，signin表示登錄的次數(shù)。圖10.2.1

示例數(shù)據(jù)表結(jié)構(gòu)及內(nèi)容

接下來使用GROUPBY語句將數(shù)據(jù)表按姓名分組，并統(tǒng)計每個人有多少條記錄，結(jié)果如圖10.2.2所示。圖10.2.2

使用GROUPBY查詢每個人的記錄數(shù)

然后將以上數(shù)據(jù)表按姓名分組，再統(tǒng)計每個人登錄的次數(shù)，結(jié)果如圖10.2.3所示。WITHROLLUP可以實現(xiàn)在分組統(tǒng)計數(shù)據(jù)基礎(chǔ)上再進行相同的統(tǒng)計（SUM()、AVG()、COUNT()等）?？梢钥吹?，除了正常地按姓名匯總得到相應(yīng)的結(jié)果，還多了一個NULL行，這一行的結(jié)果是得到了所有人的登錄次數(shù)。可以使用coalesce()函數(shù)來設(shè)置一個可以取代NULL的名稱，如圖10.2.4所示。圖10.2.3

使用WITHROLLUP對分組的結(jié)果再進行運算圖10.2.4

使用coalesce()函數(shù)轉(zhuǎn)換NULL值子任務(wù)10.3投票時間間隔10.3.1修改數(shù)據(jù)表字段類型

小王同學分析了投票時間間隔的實現(xiàn)邏輯，但他分析數(shù)據(jù)表結(jié)構(gòu)時發(fā)現(xiàn)，數(shù)據(jù)表voteDetail中，投票時間字段voteTime的類型是date，也就是“年月日”這種類型，并未保存精確到秒的具體投票時間。顯然，在這種情況下是沒有辦法實現(xiàn)這個需求的。因此，需要修改數(shù)據(jù)表，將投票時間字段類型轉(zhuǎn)換成datetime類型，或者int類型（也就是時間戳），以記錄投票的詳細時間，這樣才能判斷出兩次投票的時間間隔（以s為單位）。

比如，需求是間隔1min，因此，如果數(shù)據(jù)表中voteTime字段是int類型，則只需要把上一次的數(shù)據(jù)和time()得到的數(shù)據(jù)相減，差值大于60即可以再次投票。如果數(shù)據(jù)表中voteTime字段是datetime類型，就需要使用函數(shù)UNIX_TIMESTAMP()進行格式轉(zhuǎn)換。顯然，對于日期時間類的數(shù)據(jù)，使用int類型會更加便捷。

接下來，小王同學打開數(shù)據(jù)庫，將voteDetail數(shù)據(jù)表中的voteTime字段類型修改為int類型。

由于這一列原來是日期類型，如2022-05-25，現(xiàn)在修改為int類型后，系統(tǒng)會自動把這一列的值修改為20220525，這個值對于int類型的時間戳而言，顯然不對。因此，為了保持數(shù)據(jù)的完整性，可以把voteDetail數(shù)據(jù)表的內(nèi)容清空，對應(yīng)地需要把carInfo數(shù)據(jù)表中的carNum列全部修改成0，這樣所有數(shù)據(jù)表的數(shù)據(jù)就能對應(yīng)上了。10.3.2判斷投票時間間隔

修改數(shù)據(jù)表后，小王同學很快就完成了投票時間間隔的限制條件實現(xiàn)。10.3.3轉(zhuǎn)換MySQL中的時間日期格式

小王同學測試了投票時間間隔功能，這個功能已經(jīng)沒有問題了。但他同時發(fā)現(xiàn)一個問題，前面完成的投票限制條件1和投票限制條件2，以及最終的投票實現(xiàn)，都出現(xiàn)了問題。經(jīng)過分析，問題的產(chǎn)生是因為剛才修改了數(shù)據(jù)表中voteTime列的類型，因此，這些功能都要同步修改。

因為在條件1和條件2中，只需要判斷當天的日期，也就是只判斷到年月日，不用判斷秒，因此，需要使用一個MySQL的函數(shù)FROM_

UNIXTIME()來進行格式轉(zhuǎn)換（即將時間戳轉(zhuǎn)換成日期格式）。

其基本語法為：FROM_UNIXTIME(unix_timestamp,format)

其中第一個參數(shù)是用于格式轉(zhuǎn)換的時間戳，第二個參數(shù)是時間戳轉(zhuǎn)換成日期后的具體格式。

常用的日期格式有以下幾種。（1）%Y：年,數(shù)字,4位。（2）%m：月,數(shù)字（01～12)。（3）%d：日,數(shù)字(01～31)。（4）%H：小時，數(shù)字(00～23)。（5）%i：分鐘,數(shù)字(00～59)。（6）%s：秒(00～59)。

和FROM_UNIXTIME()函數(shù)相對應(yīng)的，還有另外一個函數(shù)UNIX_

TIMESTAMP()，其作用是把日期格式轉(zhuǎn)換成時間戳。如果這個函數(shù)未提供參數(shù)，則直接返回當前的時間戳。子任務(wù)10.4IP地址限制10.4.1編寫IP地址限制代碼

10.4.2總結(jié)MySQL中的日期和時間函數(shù)

1．日期相關(guān)（1）CURDATE()、CURRENT_DATE()、CURRENT_DATE()：這3個函數(shù)的作用相同，都是用于返回當前日期，如2022-06-01。（2）DATE(date|datetime)：提取date或datetime

的日期部分。（3）DATE_ADD(date,INTERVALexpunit)、DATE_SUB(date,

INTERVALexpunit)：在日期中（也可以包含時間部分）加或減“時間”。（4）ADDDATE(date[,intervalexpunit)、SUBDATE(date[...])：有第二個參數(shù)時，與對應(yīng)的DATE_ADD()、DATE_SUB()函數(shù)使用方法相同。（5）DATE_DIFF(date1,date2)：兩個日期相減，date1與date2可以是單獨的日期或日期與時間，但只有日期部分參與運算。（6）DATE_FORMAT(date,format)：用format格式化date，format為格式化字符串，常用的格式化標識符有以下6個。①%Y：年，4位。②%m：月，2位（01～12）。③%d：日，2位（01～31）。④%H：小時，2位，（00～23）。⑤%i：分鐘，2位（00～59）。⑥%S或%s：秒，2位（00～59）。2．時間相關(guān)

CURTIME()、CURRENT_TIME()、CURRENT_TIME()：這3個函數(shù)的作用相同，都用于返回當前時間，如21:35:20。返回值以當前時區(qū)表示。3．日期和時間（1）NOW()、CURRENT_TIMESTAMP()、CURRENT_TIMESTAMP()，LOCALTIME()、LOCALTIME()、LOCALTIMESTAMP()、LOCALTIMESTAMP()：這些函數(shù)的作用相同，都用于返回當前日期和時間。（2）SYSDATE()：真正的系統(tǒng)時間，不受MySQL的SLEEP()等函數(shù)的影響。子任務(wù)10.5使用Layui顯示驗證碼10.5.1使用layer.open()方法

在顯示登錄和注冊頁面時，小王同學使用了layer的open()方法，在參數(shù)配置中，type（基本層類型）使用的是2。layer提供了5種層類型，可傳入的值有：0（信息框，默認）、1（頁面層）、2（iframe層）、3（加載層）、4（tips層）。若采用“

layer.open({type:1})”方式調(diào)用，則type為必填項（信息框除外）。

在前面的項目制作中，小王同學使用了iframe層，也就是在彈出的窗口中直接顯示一個完整的頁面內(nèi)容。在這里，需求變更為，單擊車輛進行投票，然后顯示驗證碼，再跳轉(zhuǎn)至vote.php頁面進行投票。因此，在這里需要使用類型1，也就是頁面層。在頁面層中顯示一個表單，在該表單中顯示驗證碼，輸入驗證碼后，單擊“提交”按鈕，跳轉(zhuǎn)至vote.php頁面，完成投票，然后返回首頁并刷新頁面。10.5.2在彈窗中顯示驗證碼

圖10.5.1所示為添加了彈窗顯示驗證碼的效果。圖10.5.1

彈窗顯示驗證碼

前端有了驗證碼，在后端就要對驗證碼進行判斷，這一部分內(nèi)容和前面做過的判斷驗證碼是否正確相似。

如果驗證碼錯誤，則直接彈窗提示錯誤，并中止后面程序的執(zhí)行。如果驗證碼正確，則繼續(xù)進行投票條件判斷，并完成后續(xù)的投票操作。10.5.3優(yōu)化彈窗顯示

小王同學做好了驗證碼的彈窗顯示，然后測試了各項投票限制功能，都是正常的。但他注意到，雖然現(xiàn)在功能都是正常的，但不管投票成功還是失敗，當系統(tǒng)彈出提示窗口時，整個頁面背景是空的，非常難看，如圖10.5.2所示。圖10.5.2

投票成功的頁面

圖10.5.3所示為投票成功的效果。圖10.5.4所示為驗證碼錯誤的效果。圖10.5.5所示為投票時間間隔出錯的效果。

圖10.5.3

投票成功

圖10.5.4

驗證碼錯誤圖10.5.5投票時間間隔出錯子任務(wù)10.6異步投票10.6.1給“票數(shù)”添加ID

為了實現(xiàn)頁面不刷新就直接更新某輛車的最新票數(shù)，需要給每一輛車顯示票數(shù)的文字添加一個唯一的ID，然后通過jQuery來更新這個ID的值，即可更新車輛最新票數(shù)，這樣也就實現(xiàn)了異步更新票數(shù)。10.6.2使用jQuery封裝的AJAX實現(xiàn)異步投票

10.6.3制作異步投票后端文件

【任務(wù)小結(jié)】

在本任務(wù)中實現(xiàn)了在線投票系統(tǒng)的投票限制功能。這個功能涉及的知識點比較多，其中最重要的是MySQL中的日期、時間函數(shù)的應(yīng)用，以及PHP中日期、時間函數(shù)的應(yīng)用。同時，為了提高用戶體驗，這里還使用了AJAX技術(shù)來實現(xiàn)投票的相關(guān)功能。牟奇春主編PHP動態(tài)網(wǎng)站開發(fā)項目教程（微課版）任務(wù)11在線投票系統(tǒng)管理員功能子任務(wù)11.1管理員查看車輛列表11.1.1修改前端展示頁面

圖11.1.1所示為管理員登錄后的效果。圖11.1.1

管理員登錄后顯示“后臺管理”鏈接11.1.2制作管理員后端文件

做好了入口鏈接，接下來，小王同學開始制作管理員后端查看車輛列表的文件。由于這些內(nèi)容和會員管理系統(tǒng)的后端功能很相似，因此，借鑒前面做過的文件內(nèi)容，小王同學很快就做好了管理員后端查看車輛列表的文件。

在頁面底部還有一個功能就是管理員添加車輛，小王同學先在這里放了一段文字，緊接著會完成這個功能的實現(xiàn)。圖11.1.2

管理員查看車輛列表子任務(wù)11.2管理員添加新的車輛（一）11.2.1了解表單的enctype屬性

要在表單中上傳圖片，首先需要在表單的<form>標簽中加上enctype="multipart/form-data"屬性。enctype屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進行編碼。

表單數(shù)據(jù)的編碼類型默認被設(shè)置成“application/x-www-form-urlencoded”。也就是說，在數(shù)據(jù)發(fā)送到服務(wù)器之前，所有字符都會進行編碼（空格轉(zhuǎn)換為“+”，特殊符號轉(zhuǎn)換為ASCII或HEX值）。<form>中enctype屬性的具體值如表11.2.1所示。

要上傳圖片（或者其他文件），必須使用file控件，即需要上傳圖片時，<input>標簽必須設(shè)置type="file"屬性。值描述application/x-www-form-urlencoded在發(fā)送前對所有字符進行編碼（默認）multipart/form-data不對字符進行編碼在使用包含文件上傳控件的表單時，必須使用該值text/plain空格轉(zhuǎn)換為“+”，但不對特殊字符進行編碼表11.2.1<

form>中enctype屬性的具體值11.2.2設(shè)置PHP中的上傳文件參數(shù)

要在PHP中使用文件上傳，有一個很重要的問題需要注意，那就是上傳文件大小的設(shè)置問題。系統(tǒng)默認允許上傳文件的最大大小都是比較小的，當然，對于上傳頭像這一類的業(yè)務(wù)來說，問題不大，但如果要上傳其他文件或一些尺寸較大的圖片，則可能會出現(xiàn)問題。

打開小皮面板，在左邊的導(dǎo)航欄中單擊“設(shè)置”，在右邊區(qū)域中單擊“配置文件”選項卡，其下第一項內(nèi)容就是php.ini。下面列出當前安裝好的PHP的各個版本，單擊當前網(wǎng)站使用的PHP版本，即可打開php.ini配置文件，如圖11.2.1所示。圖11.2.1

在小皮面板中打開php.ini文件

打開php.ini以后，需要修改以下幾項內(nèi)容。（1）max_execution_time：表示PHP文件最長可以執(zhí)行的時間。如果上傳較大的文件，則可能會用較長時間。此值默認為30，也就是說，一個文件默認最長可執(zhí)行時間為30s，請根據(jù)需要將其值修改為一個較大的值。如果修改為0，則表示不限制時間。（2）post_max_size：表示PHP可以接收的最大POST數(shù)據(jù)量，請根據(jù)需要修改，單位為MB。（3）upload_max_filesize：表示允許上傳文件的最大大小，單位為MB。在設(shè)置時，post_max_size應(yīng)該大于或等于upload_

max_filesize。

修改php.ini文件后，請記得重新啟動Web服務(wù)。11.2.3制作車輛添加前端頁面

小王同學在前面制作文件的基礎(chǔ)上，在admin.php中編寫了車輛添加前端代碼。

完成前端頁面的靜態(tài)內(nèi)容后，小王同學查看添加車輛頁面，其效果如圖11.2.2所示。圖11.2.2

添加車輛11.2.4制作車輛添加后端頁面圖11.2.3

上傳圖片后輸出$_FILES數(shù)組的內(nèi)容子任務(wù)11.3管理員添加新的車輛（二）11.3.1編寫車輛添加后端代碼

小王同學通過查找網(wǎng)絡(luò)資料，并結(jié)合自己的實踐，經(jīng)過幾個回合的修改后，終于完成了文件上傳的全部功能。11.3.2獲取數(shù)組內(nèi)元素1．與end()相關(guān)的函數(shù)

在PHP中，與end()相關(guān)的函數(shù)如下。（1）current()：返回數(shù)組中當前元素的值。（2）next()：將內(nèi)部指針指向數(shù)組中的下一個元素，并輸出。（3）prev()：將內(nèi)部指針指向數(shù)組中的上一個元素，并輸出。（4）reset()：將內(nèi)部指針指向數(shù)組中的第一個元素，并輸出。（5）each()：返回當前元素的鍵名和鍵值，并將內(nèi)部指針向前移動。

在判斷擴展名時，還使用了strtolower()函數(shù)，以將文件擴展名轉(zhuǎn)換成小寫形式。因為用戶實際上傳的文件，其擴展名可能是大寫形式，也可能是小寫形式，還可能是大小寫混合形式。2．與字符轉(zhuǎn)換相關(guān)的函數(shù)

在PHP中，與字符轉(zhuǎn)換相關(guān)的函數(shù)如下。（1）strtoupper()：把字符串轉(zhuǎn)換為大寫形式。（2）lcfirst()：把字符串中的首字母轉(zhuǎn)換為小寫形式。（3）ucfirst()：把字符串中的首字母轉(zhuǎn)換為大寫形式。（4）ucwords()：把字符串中每個單詞的首字母轉(zhuǎn)換為大寫形式。11.3.3生成唯一文件名

該函數(shù)的基本語法及參數(shù)如下所示。uniqid(prefix,more_entropy)

uniqid()函數(shù)的參數(shù)詳情如表11.3.1所示。參數(shù)描述prefix可選。規(guī)定唯一

ID的前綴。如果兩個腳本恰好在相同的時間生成

ID，則該參數(shù)很有用more_entropy可選。規(guī)定位于返回值末尾的更多熵，這將讓結(jié)果更具唯一性。當設(shè)置為

TRUE時，返回字符串為

23個字符。默認是

FALSE，返回字符串為

13個字符表11.3.1

uniqid()函數(shù)的參數(shù)詳情參數(shù)描述file必需。規(guī)定要移動的文件newloc必需。規(guī)定文件的新位置表11.3.2

move_uploaded_file()函數(shù)的參數(shù)詳情子任務(wù)11.4管理員修改和刪除車輛資料11.4.1修改前端頁面

修改車輛資料的頁面效果如圖11.4.1所示。11.4.2制作修改車輛資料后端文件

車輛資料修改成功后，返回admin.php頁面，就會刷新車輛資料。圖11.4.1

修改車輛資料的頁面效果子任務(wù)11.5管理員刪除車輛資料11.5.1修改前端頁面

小王同學在這里使用了layer封裝的詢問框。當然需要注意的是，在使用layer組件時，需要在文件中引用layer.js核心庫文件，否則單擊“刪除”鏈接時，如果打開了瀏覽器的控制臺，那么將會看到圖11.5.1所示的錯誤。這個錯誤為layer未被定義（layerisnotdefined）。正確引用layer.js庫文件后，錯誤消失，并能正確彈出詢問框，如圖11.5.2所示。11.5.2制作刪除車輛后端文件

圖11.5.1

未引用layer.js核心庫文件時瀏覽器報錯圖11.5.2

刪除車輛時的詢問框子任務(wù)11.6ECharts的基本使用11.6.1了解ECharts

ECharts是一個基于JavaScript的開源可視化圖表庫，提供直觀、生動、可交互、可個性化定制的數(shù)據(jù)可視化圖表。

ECharts最初由百度團隊開源，并于2018年初捐贈給Apache軟件基金會（ApacheSoftwareFoundation，ASF），成為其孵化級項目。2021年1月26日晚，Apache軟件基金會官方宣布ECharts項目正式畢業(yè)。同年1月28日，ECharts5線上發(fā)布會舉行。

只需要打開C:\Windows\System32\drivers\etc下的hosts文件，添加如下DNS解析即可快速訪問。1. 32

echarts.apac**.org2. 0

cdn.jsdeli**.net

圖11.6.1所示為ECharts的首頁。單擊圖11.6.1中右邊的播放按鈕，可以看到非常精美的動畫展示。ECharts提供了豐富的圖表類型，是最常用的數(shù)據(jù)可視化工具之一。

圖11.6.2所示為ECharts提供的折線圖效果。

圖11.6.3所示為ECharts提供的柱狀圖效果。圖11.6.1

ECharts首頁展示圖11.6.2

ECharts提供的折線圖效果展示圖11.6.3

ECharts提供的柱狀圖效果展示11.6.2快速掌握ECharts應(yīng)用

在圖11.6.1中單擊“快速入門”按鈕，可以查看關(guān)于ECharts的詳細內(nèi)容。

首先是ECharts核心庫文件的下載。ApacheECharts提供了多種安裝方式，可以根據(jù)項目的實際情況選擇以下任意一種方式安裝。（1）從GitHub獲取并安裝。（2）從npm獲取并安裝。（3）從CDN獲取并安裝。（4）在線定制。

比較簡單的方式是直接下載ECharts核心庫文件，官網(wǎng)給出的鏈接在GitHub網(wǎng)站上。但在國內(nèi)直接訪問GitHub有時會很慢，甚至完全無法訪問。解決方法也是在hosts文件中添加DNS解析。那么如何找到比較好用的DNS呢？方法很簡單，打開“站長工具”，找到“DNS查詢”，然后在其中輸入要查詢的域名，最后單擊“檢測”按鈕，就可以找到合適的DNS了，如圖11.6.4所示。圖11.6.4

DNS查詢

這里生成的是柱狀圖，橫軸是圖表的類別，縱軸是各類別對應(yīng)的數(shù)據(jù)。將鼠標指針移至某一柱條上，會顯示當前柱條的詳細情況。ECharts提供了豐富的格式和選項，可以制作出很多非常精美的圖表。圖11.6.5

生成一個簡單的ECharts圖表子任務(wù)11.7ECharts圖表數(shù)據(jù)異步加載11.7.1異步加載ECharts數(shù)據(jù)

圖表數(shù)據(jù)異步加載的另外一種方法是，先設(shè)置好圖表的樣式，顯示一個空的直角坐標系，然后通過異步方式獲取數(shù)據(jù)后填入圖表。11.7.2制作后端接口文件

查看輸出的結(jié)果如圖11.7.1所示。單擊節(jié)點前面的“-”號可以折疊對象。如果無法安裝插件，則也可以在瀏覽器的調(diào)試工具（可以按鍵盤快捷鍵“F12”打開）中進入“網(wǎng)絡(luò)”面板，在過濾設(shè)置中選擇“全部”，然后在左邊的“名稱”中單擊getdata.php，查看返回結(jié)果，如圖11.7.2所示。在右側(cè)區(qū)域中單擊“預(yù)覽”按鈕可非常方便地查看JSON對象。單擊節(jié)點處的箭頭可以折疊或展開內(nèi)容。如果返回的內(nèi)容沒有這個箭頭，則說明數(shù)據(jù)格式不對。圖11.7.1

后端接口文件