【課程簡介】

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

【主講內(nèi)容】

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

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

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

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

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

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

echarts基本使用

5分鐘上手echarts

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

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

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

2.初始化 echarts

3.設(shè)置配置項

4.生成圖表

適當(dāng)增加樣式

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

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

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

如何配置echarts圖表

1、參考官方教程

2、參考官方配置項手冊

案例中小試牛刀

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

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

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

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

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

主要是修改

xAxis （X軸配置）

yAxis （Y軸配置）

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

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

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

1.去掉 yAxis 中的 data

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

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

4.將 yAxis 中的 max 修改為 9，表示只顯示 10 個國家

讓數(shù)據(jù)動起來

1.讓數(shù)據(jù)動起來的原理很簡單，只需要利用定時器，間隔一段時間，修改 series 中的數(shù)據(jù)即可。

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

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

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

?設(shè)置國旗

案例中，適合使用label來設(shè)置，label配置項的具體語法是：

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

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

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

3.通過 axios 庫，將數(shù)據(jù)取出來，代碼參見 這里。

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

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

其他補充

1.去掉 xAxis 軸

2.去掉 yAxis 的軸線和刻度

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

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

?

總結(jié)

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

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