【課程簡(jiǎn)介】

可視化是前端里一個(gè)幾乎可以不用寫網(wǎng)頁(yè)，但又發(fā)展得非常好的方向。在互聯(lián)網(wǎng)產(chǎn)品里，無(wú)論是C端中常見(jiàn)的雙十一購(gòu)物節(jié)可視化大屏，還是B端的企業(yè)中后臺(tái)管理系統(tǒng)都離不開(kāi)可視化。國(guó)家大力推動(dòng)的智慧城市、智慧社區(qū)中也有很多可視化的應(yīng)用。當(dāng)下企業(yè)需要在很多場(chǎng)景下使用可視化圖表來(lái)展示體現(xiàn)數(shù)據(jù)，比如營(yíng)銷數(shù)據(jù)，生產(chǎn)數(shù)據(jù)，用戶數(shù)據(jù)，使用圖形展示數(shù)據(jù)，可以讓數(shù)據(jù)更加直觀，數(shù)據(jù)特點(diǎn)更加突出。市場(chǎng)上對(duì)懂可視化的人才需求是越來(lái)越大，但是真正懂得的人并不多，本次課程將通過(guò)一個(gè)將全球GDP數(shù)據(jù)動(dòng)態(tài)排名的案例，帶大家體驗(yàn)ECharts數(shù)據(jù)可視化的魅力，增加前端工程師的競(jìng)爭(zhēng)力。

【主講內(nèi)容】

1.ECharts制作圖表+基本數(shù)據(jù)處理方法

2.如何配置圖表與Ajax獲取真實(shí)數(shù)據(jù)

3.應(yīng)用案例：實(shí)現(xiàn)全球GDP數(shù)據(jù)動(dòng)態(tài)排名

【教程推薦】ECharts項(xiàng)目實(shí)戰(zhàn)：全球GDP數(shù)據(jù)可視化

項(xiàng)目中用到的資料，老師已經(jīng)放到百度網(wǎng)盤了。

資料下載地址及密碼：鏈接：https://pan.baidu.com/s/1L22giISr-TIFgPRYUZ-qJA? 提取碼：ze49

echarts基本使用

5分鐘上手echarts

1.將 下載的 資料（GDP文件夾） 使用 vscode 或其他代碼編輯器打開(kāi)

2.查看官方 文檔 > 使用手冊(cè) ，根據(jù)這個(gè)手冊(cè)，可以學(xué)到，使用echarts大概分為4個(gè)步驟

1.創(chuàng)建一個(gè)具有寬高的盒子

2.初始化 echarts

3.設(shè)置配置項(xiàng)

4.生成圖表

適當(dāng)增加樣式

1、將body設(shè)置為全屏的

2、div的高度設(shè)為 100%

3、設(shè)置一個(gè)背景圖片（選配）

如何配置echarts圖表

1、參考官方教程

2、參考官方配置項(xiàng)手冊(cè)

案例中小試牛刀

1、圖表的標(biāo)題，要求標(biāo)題字體微軟雅黑、字體大小40，橙色，左右居中，距離頂部30像素。

2、調(diào)整網(wǎng)格（圖表區(qū)域），距離頂部 80px、距離右側(cè) 180px、

3、去掉圖例（legend）和輸入移入提示（tooltip）

動(dòng)態(tài)排序柱狀圖基本配置

參考 動(dòng)態(tài)排序柱狀圖 文檔，將動(dòng)態(tài)排序柱狀圖基本的配置加好。

主要是修改

xAxis （X軸配置）

yAxis （Y軸配置）

series （系列數(shù)據(jù)配置）

模擬GDP數(shù)據(jù)

?將這些數(shù)據(jù)展示在圖表中

1.去掉 yAxis 中的 data

2.將 series 系列中的 data 換成 上述數(shù)據(jù)

3.在 series 系列中，通過(guò) encode 來(lái)指定 X 軸 和 Y 軸分別使用哪一列數(shù)據(jù)

4.將 yAxis 中的 max 修改為 9，表示只顯示 10 個(gè)國(guó)家

讓數(shù)據(jù)動(dòng)起來(lái)

1.讓數(shù)據(jù)動(dòng)起來(lái)的原理很簡(jiǎn)單，只需要利用定時(shí)器，間隔一段時(shí)間，修改 series 中的數(shù)據(jù)即可。

2.比如間隔 1s ，隨機(jī)改變一下 series 中的 GDP 數(shù)據(jù)，來(lái)測(cè)試一下

設(shè)置柱子的背景色

通過(guò)series中的 itemStyle 可以設(shè)置每一個(gè)柱子的顏色，語(yǔ)法如下：

?設(shè)置國(guó)旗

案例中，適合使用label來(lái)設(shè)置，label配置項(xiàng)的具體語(yǔ)法是：

?Ajax獲取真實(shí)數(shù)據(jù)

1.真實(shí)數(shù)據(jù)來(lái)源于世界銀行。

2.老師已經(jīng)把數(shù)據(jù)下載，整理好，就是代碼文件夾中的 data.json

3.通過(guò) axios 庫(kù)，將數(shù)據(jù)取出來(lái)，代碼參見(jiàn) 這里。

將真實(shí)數(shù)據(jù)應(yīng)用到圖表中

這里只需要將前面那個(gè) for 循環(huán)放到 then 方法內(nèi)部，并修改數(shù)據(jù)為真實(shí)的數(shù)據(jù)即可，代碼參考這里。

其他補(bǔ)充

1.去掉 xAxis 軸

2.去掉 yAxis 的軸線和刻度

3.圖表右下角加入年（參考這個(gè)官方示例）

4.自由選擇修改一下字體顏色、背景圖片等等

?

總結(jié)

以上是生活随笔為你收集整理的ECharts项目实战：全球GDP数据可视化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。