ECharts數(shù)據(jù)可視化實戰(zhàn)-ECharts常用圖表_第1頁
ECharts數(shù)據(jù)可視化實戰(zhàn)-ECharts常用圖表_第2頁
ECharts數(shù)據(jù)可視化實戰(zhàn)-ECharts常用圖表_第3頁
ECharts數(shù)據(jù)可視化實戰(zhàn)-ECharts常用圖表_第4頁
ECharts數(shù)據(jù)可視化實戰(zhàn)-ECharts常用圖表_第5頁
已閱讀5頁，還剩95頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

ECharts常用圖表目錄1快速上手第一個ECharts實例掌握繪制各種餅圖掌握繪制各種柱狀圖2掌握繪制各種折線圖342.ECharts中最常用圖表本章節(jié)將介紹在ECharts中作三大圖表的制作方法：快速上手第一個ECharts圖表；各種柱狀圖的制作方法及注意事項；各種折線圖的制作方法及注意事項；各種餅圖的制作方法及注意事項。1.獲取ECharts庫文件2.1.1準備工作方法2：由cdn（ContentDeliveryNetwork，內(nèi)容分發(fā)網(wǎng)絡(luò)，它是使用戶就近獲取所需內(nèi)容，并且降低網(wǎng)絡(luò)擁塞的一種網(wǎng)絡(luò)技術(shù)，由美國麻省理工學院提出）引入，如：<scriptsrc="echarts.js"></script>。其優(yōu)點：無需下載文件，不必在本地電腦中保存ECharts庫文件，直接通過網(wǎng)絡(luò)引用即可。前兩種方法較常用。較常用。方法1：最直接的方法是在

ECharts官網(wǎng)（）中挑選適合您的版本進行下載，不同的打包下載應(yīng)用于不同的開發(fā)者功能與體積的需求，或者也可在線定制；開發(fā)環(huán)境建議下載源代碼版本，它包含了常見的錯誤提示和警告。較常用。2.1.1準備工作2.1.1準備工作1.獲取ECharts2.1.1準備工作方法3：也可在

ECharts的

GitHub

上下載最新的

release

版本，解壓出來的文件夾里的

dist

目錄里可以找到最新版本的ECharts庫。方法4：在構(gòu)建大型應(yīng)用時，推薦使用NPM方法進行安裝，執(zhí)行如下命令即可。npminstallecharts2.新建項目2.1.1準備工作

VSCode跟其它編輯器不太一樣，本身沒有新建項目的菜單或命令選項，所以要首先創(chuàng)建一個空的文件夾。新建項目的目的是為了方便文件管理。新建項目的步驟如下。

(1)選定一個磁盤目錄創(chuàng)建一個新文件夾或者直接使用已有的文件夾。

(2)打開VSCode，點擊“文件”菜單，選擇“打開文件夾”菜單選項，找到剛創(chuàng)建或者需要使用的文件夾，再點擊“選擇文件夾”按鈕，就可在VSCode的左側(cè)導航欄中發(fā)現(xiàn)引入的文件夾以及里面已有的文件。

(3)創(chuàng)建HTML網(wǎng)頁文件。選定要添加文件的目錄，右鍵“新建文件”，或者在VSCode的資源管理器中單擊“新建文件”按鈕，也可新建一個文件。文件命名時需要添加后綴。比如創(chuàng)建HTML文件時，應(yīng)命名為“XXXX.html”。2.1.1準備工作VSCode常用快捷鍵(1)！+enter回車鍵或tab鍵：快速生稱html代碼模板；(2)Vue+enter回車鍵或tab鍵：快速生稱vue代碼模板。(3)Shift+alt+向下的方向鍵：向下復制當前行；(4)Shift+alt+向上的方向鍵：向上復制當前行；(5)Ctrl+s：保存；(6)Shift+alt+f：格式化代碼；(7)Ctrl+f：查找和替換；(8)Ctrl+/：注釋當前行或當前選中的一段代碼；(9)Ctrl+d：快速選中的與第一個選中的單詞相同別的單詞，以便于快速修改替換。

3.

配置VSCode2.1.1準備工作

(1)將默認瀏覽器修改為Chrome谷歌瀏覽器。

大部分計算機的默認瀏覽器都是IE或者其他瀏覽器，但在進行網(wǎng)頁或者其他前端程序開發(fā)時，通常推薦使用谷歌Chrome瀏覽器。

修改默認瀏覽器的方法：選擇文件→首選項→設(shè)置，在搜索欄輸入“open-in-browser.default”后，再在出現(xiàn)的編輯框輸入“Chrome”。重啟VSCode，即可將默認瀏覽器修改為Chrome谷歌瀏覽器，如圖2-4所示。

3.

配置VSCode2.1.1準備工作

3.

配置VSCode2.1.1準備工作(2)安裝VSCode微軟官方LivePreviewextension插件。

在VSCode的活動欄中，單擊擴展（Ctrl+Shift+X），再在文本框中搜索“LivePreviewextension”，然后點擊“安裝”按鈕。

在VSCode中安裝好LivePreviewextension插件之后，會發(fā)現(xiàn)在打開HTML文件的狀態(tài)下右上角多了一個預覽按鈕，點擊預覽按鈕后，會在編輯器內(nèi)出現(xiàn)一個內(nèi)置的Web窗口。這個插件不需要另外打開瀏覽器，它可直接在Vscode里面預覽HTML頁面，并且自動實時更新，不再需要不停地Ctrl+S來保存查看，如圖2-5所示，此時VSCode編輯器與瀏覽器似乎成為一個整體。注意，安裝好LivePreviewextension插件后，文件名不能使用中文，否則出現(xiàn)“Filenotfound”錯誤。2.1.1準備工作2.1.2創(chuàng)建第一個ECharts圖表

獲取ECharts庫文件后，創(chuàng)建ECharts圖表只需如下五個步驟。

（1）在.html文件中，引入echarts.js庫文件。ECharts的引入方式像JavaScript庫文件一樣，使用script標簽引入即可，如代碼2-1所示，此處，需要注意echarts.js庫文件的存放路徑，如果找不到存放路徑那么將無法顯示圖表。代碼2-1中最下面兩行代碼，通過CDN方式引入庫文件，這種引入方式的好處：不需下載echarts.js庫文件。但需實時連接網(wǎng)絡(luò)。代碼2-1引入ECharts庫文件<!--引入ECharts腳本--><scripttype="text/javascript"src="js/echarts.js"></script><!--也可以通過CDN引入ECharts文件--><scriptsrc="/echarts/5.3.0/echarts.js"></script>2.1.2創(chuàng)建第一個ECharts圖表

（2）準備一個具備大?。╳eight與height）的div容器。ECharts圖形是基于DOM進行繪制的，所以在繪制圖形前要先繪制一個DOM容器div來承載圖形，當添加了div容器后，需要設(shè)置它的基本屬性：寬（weight）與高（height）。這兩個屬性決定了繪制的圖表大小。繪制一個div容器，并設(shè)置容器的樣式，如代碼2-2所示，容器可以設(shè)置的樣式并不僅限于寬與高，還可以設(shè)置其他屬性，如定位等。代碼2-2

繪制div容器，并為容器設(shè)置樣式<body><!---為ECharts準備一個具備大小（寬、高）的DOM-><divid="main"style="width:600px;height:400px"></div></body>2.1.2創(chuàng)建第一個ECharts圖表

（3）使用init()方法初始化容器。通過步驟（1）引入echarts.js庫文件后，會自動創(chuàng)建一個全局變量echarts，全局變量echarts有若干方法。基于準備好的DOM，通過echarts.init()方法可以初始化ECharts實例，如代碼2-3所示。代碼2-3

初始化容器<body><!---為ECharts準備一個具備大?。▽捀撸┑腄OM-><divid="main"style="width:600px;height:400px"></div><script>//基于準備好的DOM，初始化ECharts實例varmyChart=echarts.init(document.getElementById("main"));</script></body>2.1.2創(chuàng)建第一個ECharts圖表

（4）設(shè)置圖形配置項和數(shù)據(jù)。option的設(shè)置是ECharts中的重點和難點，option的配置項參數(shù)等設(shè)置決定了繪制出的是什么樣的圖形。在第3章中將會對option的配置項參數(shù)進行詳細的說明，此處通過配置option項繪制一個簡單的柱狀圖，如代碼2-4所示。代碼2-4

設(shè)置圖形配置項option和數(shù)據(jù)2.1.2創(chuàng)建第一個ECharts圖表

（5）使用指定的配置項和數(shù)據(jù)，顯示渲染圖表。在繪制ECharts圖表的過程中，setOption是執(zhí)行繪制動作的方法，為初始化的myChart設(shè)置option進行圖表繪制，如代碼2-5所示。代碼2-5

使用指定的配置項option和數(shù)據(jù)并渲染圖表//使用指定的配置項和數(shù)據(jù)顯示圖表myChart.setOption(option);最后，簡單圖表繪制的完整代碼如代碼2-6所示。代碼2-6簡單圖表繪制的完整代碼。2.1.2創(chuàng)建第一個ECharts圖表2.1.2創(chuàng)建第一個ECharts圖表

通過以上5個步驟，在網(wǎng)頁中創(chuàng)建ECharts圖表后，需要用網(wǎng)頁打開。在VS

Code中右鍵單擊需要打開的網(wǎng)頁文件名，在彈出的快捷菜單中，依次單擊“OpenWith”→“WebBrowser”，即可在VS

Code中內(nèi)置的瀏覽器打開該網(wǎng)頁，也可以在計算機中雙擊要運行的網(wǎng)頁文件，直接使用操作系統(tǒng)中默認的瀏覽器打開該網(wǎng)頁。有時為了調(diào)試方便，還可以復制該網(wǎng)頁文件的完整地址，將它粘貼到指定的瀏覽器的地址欄中打開。

繪制完成后的ECharts圖表如圖2-6所示。2.1.2創(chuàng)建第一個ECharts圖表2繪制各種柱狀圖目錄1快速上手第一個ECharts實例繪制各種餅圖繪制各種折線圖342.2繪制柱狀圖

柱狀圖是最常用的三大圖表之一。柱狀圖由一系列長度不等的縱向或橫向條紋來表示數(shù)據(jù)分布的情況，一般用橫軸表示數(shù)據(jù)類型，縱軸表示分布情況。ECharts提供了各種各樣的柱狀圖。本節(jié)通過實例介紹ECharts中比較常用和重要的幾種柱狀圖：標準柱狀圖；堆積柱狀圖；條形圖；瀑布圖。2.2.1繪制標準柱狀圖柱狀圖是數(shù)據(jù)分析中最為常用的圖表之一，柱狀圖的核心思想是對比。它的適用場合是二維數(shù)據(jù)集（每個數(shù)據(jù)點包括兩個值X和Y），但只有一個維度需要比較。例如，年銷售額就是二維數(shù)據(jù)：“年份”和“銷售額”，但只需要比較“銷售額”這一個維度。柱狀圖利用柱子的高度，反映數(shù)據(jù)的差異。肉眼對高度差異很敏感，辨識效果非常好。通常來說，柱狀圖的X軸是時間維，用戶習慣性認為存在時間趨勢。如果遇到X軸不是時間維的情況，建議用不同的顏色區(qū)分每根柱子，改變用戶對時間趨勢的關(guān)注。柱狀圖的局限在于只適用中小規(guī)模的數(shù)據(jù)集。2.2.1繪制標準柱狀圖2.2.1繪制標準柱狀圖2.2.1繪制標準柱狀圖2.2.1繪制標準柱狀圖2.2.1繪制標準柱狀圖2.2.1繪制標準柱狀圖2.2.1繪制標準柱狀圖2.2.1繪制標準柱狀圖2.2.1繪制標準柱狀圖下圖對標準柱狀圖中的各種組件進行了簡單注解。一張圖表一般包含如下組件：用于顯示數(shù)據(jù)的網(wǎng)格區(qū)域，這是最主要的部分；X坐標軸，Y坐標軸（包括坐標軸標簽、坐標軸刻度、坐標軸名稱、坐標軸分隔線、坐標軸箭頭）；主標題；副標題；圖例；數(shù)據(jù)標簽。這些組件都在圖表中扮演著特定的角色，表達了特定的信息。當然這些組件并不是必備的，當信息足夠清晰時，可以精簡部分組件，使得圖表更加簡潔。在后面的章節(jié)中，會對各種組件做詳細的介紹。2.2.1繪制標準柱狀圖2.2.2繪制堆積柱狀圖堆積柱狀圖中，每一根柱子上的值分別代表不同的數(shù)據(jù)大小，各個分層的數(shù)據(jù)總和等于整根柱子的高度。它適合少量類別的對比，并且對比信息特別清晰。堆積柱狀圖的優(yōu)點：可以形象地展示一個大分類包含的每個小分類的數(shù)據(jù)，以及各個小分類的占比情況，顯示的單個項目與整體之間的關(guān)系，圖表更加清晰。當需要直觀地對比整體數(shù)據(jù)時，不適合用簇狀柱形圖而適合用堆積柱形圖。下列代碼是使用ECharts繪制堆積柱狀圖的關(guān)鍵代碼。2.2.2繪制堆積柱狀圖2.2.2繪制堆積柱狀圖2.2.2繪制堆積柱狀圖2.2.2繪制堆積柱狀圖3.2.2繪制堆積柱狀圖2.2.2繪制堆積柱狀圖

在圖2-9所示的堆積柱狀圖中，每天的數(shù)據(jù)有4根柱子，其中，第2根柱子是堆疊的，由郵件營銷、聯(lián)盟廣告、視頻廣告3種不同類型的廣告組成，第2根柱子的長度代表這3種不同的廣告的總和。第4根柱子也是堆疊的，由百度、谷歌、必應(yīng)、其他共4種不同類型的搜索引擎組成，而第3根柱子則是第4根子中的4種搜索引擎的總和。2.2.3繪制標準條形圖條形圖又稱橫向柱狀圖，它屬柱狀圖的一種。當維度分類較多、并且維度字段名稱又較長時，不再適合使用普通的柱狀圖，應(yīng)該將多指標柱狀圖更改為單指標的條形圖，能有效提高數(shù)據(jù)對比的清晰度。條形圖相比柱形圖的優(yōu)勢在于能夠橫向布局，方便展示較長的維度項名稱。必須按照數(shù)值大小降序排列，以提升條形圖的閱讀體驗。其實，條形圖只是在普通柱狀圖的基礎(chǔ)上，將它的x軸和y軸的數(shù)據(jù)互換位置而已。下列代碼是使用ECharts繪制標準條形圖的關(guān)鍵代碼。2.2.3繪制標準條形圖2.2.3繪制標準條形圖2.2.3繪制標準條形圖以上代碼運行結(jié)果如下圖所示；在下圖中，最上面的兩根柱子代表在2011年、2012年的世界人口數(shù)；其它柱子分別表示世界部分國家在2011年、2012年的人口數(shù)；由于柱子較多，所以適合使用條形圖。2.2.3繪制標準條形圖2.2.4繪制瀑布圖瀑布圖其實也是柱狀圖的一種特例。瀑布圖的核心是按照維度/指標下鉆分解，如：公司收入各用途分解、公司年利潤按分公司分解、業(yè)績按銷售團隊分解。瀑布圖相對于餅圖的優(yōu)點在于：拆解項較多時，瀑布圖通過數(shù)字的標記仍可清晰辨識，而餅圖在分解項大于5時就不易辨別。其實，它也一種特殊的堆積柱狀圖，特殊部分在于，它的堆積部分的顏色與背景顏色是一樣的，所以顯示出來了又不可見而已。柱狀圖還有很多其它變種，比如：當橫坐標變成連續(xù)的分組，就可以制作直方圖(與柱形圖主要差別在于，直方圖一般不同數(shù)據(jù)系列沒有間距)。當組別劃分無限細化，就可以繪制概率分布曲線或者稱為密度曲線，最常見的就是正態(tài)分布圖。限于編幅，這里不再舉例。2.2.4繪制瀑布圖2.2.4繪制瀑布圖2.2.4繪制瀑布圖上述代碼運行結(jié)果如右圖所示?？梢钥吹?，從第二根柱子開始，它們首尾相接，好像銀河直下的瀑布，所以形象地稱之為瀑布圖。其實，非常容易理解，房租、水電費、交通費、伙食費、日用品，這五項加總就是總費用，從而構(gòu)成了人們在深圳的最低生活費用。2.2.4繪制瀑布圖從代碼看出，它與一般柱狀圖的差別不大，最為關(guān)鍵的代碼是itemStyle這一段代碼塊，設(shè)置了柱子堆疊部分或堆疊部分邊框的顏色，讓每根柱子的堆疊部分的顏色變?yōu)橥该魃?。如果改變一下代碼，讓顏色不透明：barBorderColor:‘rgba(20,20,0,0.5)’，color:‘rgba(0,220,0,0.8)’則所另可看到右圖，此時，但這樣看不到瀑布的效果。2.2繪制柱狀圖小結(jié)柱形圖擅長表達類目間的對比，柱狀圖的目的是將對比信息放大，直觀呈現(xiàn)出來。由于直觀，柱狀圖適合做結(jié)論的表達。柱狀圖一般不用在時間維度的變化。柱狀圖的數(shù)據(jù)系列和點不宜過多，否則建議改變圖表形式。柱子間的合理的寬度和間隙應(yīng)該：單個柱子的寬度不小于柱間間隙的兩倍。柱形最好從大到小排序。目錄繪制各種柱狀圖1快速上手第一個ECharts實例23繪制各種折線圖繪制各種餅圖42.3.1繪制標準折線圖折線圖也是最為常用的三大圖表之一，核心思想是趨勢變化。它是信息最為明了的圖表，也是各種圖表中最容易解讀的圖表。折線圖是點、線連在一起的圖表，可反映事物的發(fā)展趨勢和分布情況；適合在單個數(shù)據(jù)點不那么重要的情況下表現(xiàn)變化趨勢、增長幅度。它和時間是好朋友。所謂標準折線圖，是指：一條X軸，一條Y軸，X軸與Y軸組成區(qū)域內(nèi)的一些點、線、以及這些點、線或坐標軸上的文字描述。請看下列代碼繪制標準折線圖。2.3.1繪制標準折線圖2.3.1繪制標準折線圖2.3.1繪制標準折線圖2.3.1繪制標準折線圖上述代碼運行結(jié)果如右圖所示。這是一條簡單的折線圖，只有一條折線，圖表中只有數(shù)據(jù)網(wǎng)格、標題、圖例、X軸、Y軸，圖表顯得非常簡潔。代碼中已做了相應(yīng)注釋，后面章節(jié)會詳細介紹各種組件，在此不再贅述。2.3.2繪制堆積面積圖和堆積折線圖堆積折線圖的意思：第二條線的數(shù)值=本身的數(shù)值+第一條線的數(shù)值，第三條的數(shù)值=本身的數(shù)值+第二條線圖上的數(shù)值，依此類推。堆積區(qū)域圖與堆積折線圖唯一不同的地方在于每條折線的下面是否有填充區(qū)域。在折線圖中添加區(qū)域圖，屬于組合圖形中的一種，區(qū)域圖又稱面積圖，它強調(diào)數(shù)量隨時間變化的趨勢，可引起人們對總值趨勢的關(guān)注。例如，表示隨時間而變化的利潤的數(shù)據(jù)時，可以繪制折線圖并在其中添加區(qū)域圖以強調(diào)總利潤。拿本例的數(shù)據(jù)舉例(以周三數(shù)據(jù)為例，手機456，冰箱391，空調(diào)331，電視333，其它432):堆積圖實際顯示的是:手機=456,冰箱=391+456=847,空調(diào)=331+847=1178，電視=333+1178=1511，其它=432+1511=1943)。在ECharts中，實現(xiàn)堆積的重要參數(shù)為stack。只要將stack的值設(shè)置為相同，兩組數(shù)據(jù)就會堆積；相反，如果將stack的值不相同，就不會堆積。2.3.2繪制堆積面積圖和堆積折線圖2.3.2繪制堆積面積圖和堆積折線圖2.3.2繪制堆積面積圖和堆積折線圖2.3.2繪制堆積面積圖和堆積折線圖2.3.2繪制堆積面積圖和堆積折線圖如果需要實現(xiàn)堆積折線圖(StackedLineChart)，只要在上面的堆積面積圖的代碼中，注釋掉series中的每組數(shù)據(jù)中的如下代碼即可：//areaStyle:{normal:{}}，為節(jié)省篇幅，就不再羅列代碼。堆積折線圖的效果圖如右圖所示。2.3.2繪制堆積折線圖標準折線圖的缺陷之一是它必須要表現(xiàn)從A點到B點間的穩(wěn)定的緩慢的變化。它對于表現(xiàn)溫度這樣的數(shù)據(jù)是沒有問題的。有一些事物會較長時期停留在某個值上，然后突然出現(xiàn)增長或者減小。比如：公共汽車票價一般會保持幾個月到幾年不變，然后某天突然加價或降價，名勝風景區(qū)的門票價格可能也會在一段時間內(nèi)維持在同一價格，諸如此類的還有不少，如：油價、稅率、郵票價、某些商品價格等。ECharts中的折線圖中，有一種較為特殊的圖表，稱為階梯圖（StepLine）能夠幫助完成這種特殊圖形的制作。請看下列代碼。很容易理解，這是景區(qū)A、景區(qū)B和景區(qū)C三種不同旅游景點門票在一段時期內(nèi)的價格波動，不過它們的價格波動不像一般的商品，波動不是連續(xù)平滑的，而是一種階梯狀、鋸齒狀。2.3.3繪制階梯圖2.3.3繪制階梯圖2.3.3繪制階梯圖2.3.3繪制階梯圖可以看出，景區(qū)A、景區(qū)B和景區(qū)C三種不同旅游景點門票在幾年之內(nèi)的價格波動，不過它們的價格波動不像一般的商品，波動不是連續(xù)平滑的，而是一種階梯狀、鋸齒狀。2.3.繪制折線圖小結(jié)折線圖擅長表達趨勢。折線圖是點、線連在一起的圖表，可反映事物的發(fā)展趨勢和分布情況。適合在單個數(shù)據(jù)點不那么重要的情況下表現(xiàn)變化趨勢、增長幅度。如果一定要展示多條折線，最好不要同時展示超過5條。根據(jù)7±2法則，一般人的短時記憶容量約為7個加減2個，即5-9之間。如果一定要用雙Y軸，確保這兩個指標是有關(guān)系的。比如市場份額雖然增加了，但是收入?yún)s在下滑。這可以提醒決策者，是否要修改市場戰(zhàn)略。目錄1繪制各種柱狀圖快速上手第一個ECharts實例2繪制各種折線圖3繪制各種餅圖42.4.繪制餅圖餅圖的核心思想是分解。適用于對比幾個數(shù)據(jù)在其形成的總和中所占的百分比時最為有用，整個餅代表總和，單個數(shù)據(jù)用扇區(qū)代表。餅圖經(jīng)常表示一組數(shù)據(jù)的占比。為了表示占比，餅圖需要數(shù)值維度?？梢杂蒙让?、圓環(huán)、或者多圓環(huán)嵌套。商務(wù)類的匯報中應(yīng)用較多。本節(jié)將介紹：標準餅圖、圓環(huán)圖、嵌套餅圖、南丁格爾玫瑰圖。2.4.1繪制標準餅圖標準餅圖是最簡單的餅圖，其它餅圖是在它的基礎(chǔ)上轉(zhuǎn)化而來。下面以一個實例來說明標準餅圖的繪制方法。WHO在一份統(tǒng)計調(diào)查報告中指出：在影響健康壽命的各類因素中，生活方式（飲食、運動及生活習慣）占60%，遺傳因素占15%，社會因素占10%，醫(yī)療條件占8%，氣候環(huán)境占7%，因此，“健康壽命60%取決于自己”。下面的代碼繪制一個標準餅圖來表示上面的結(jié)論。2.4.1繪制標準餅圖2.4.1繪制標準餅圖2.4.1繪制標準餅圖課程思政

2022年5月14日，在2022清華五道口首席經(jīng)濟學家論壇上，清華大學中國經(jīng)濟思想與實踐研究院院長李稻葵出席并演講。李稻葵舉例計算，中國的人口是美國4倍，暫且把美國死于新冠疫情的人數(shù)乘以4，即假如沒有做好防疫工作，過去中國會有400萬生命的損失。而疫情主要影響的是中老年人和有基礎(chǔ)病的人，假設(shè)抗疫工作沒有做好，會使得失去的生命在60、65歲左右，而每一個生命的挽回，相當于讓每個人多增加了10天的壽命?！斑^去兩年的偉大勝利，為每一個百姓的平均壽命延長了十天。”2.4.1繪制標準餅圖餅圖在不同版本的ECharts下運行，會有一些細微的差別。餅圖中最主要的參數(shù)：1、center，圓心坐標，它可以是像素點表示的絕對值，也可以是數(shù)組類型。默認值為['50%','50%']。百分比計算時按照公式來計算：min(width,height)*50%，其中的width和height分別div中所設(shè)置的寬度和高度。2、radius，半徑，它可以是像素點表示的絕對值，也可以是數(shù)組類型。默認值為[0,'75%']，支持絕對值（px）和百分比。百分比計算時按照公式來計算：min(width,height)/2*75%，其中的width和height分別div中所設(shè)置的寬度和高度。如果用形如[內(nèi)半徑，外半徑]數(shù)組表示的話，則可以繪制一個環(huán)形圖；如果內(nèi)半徑為0，則可繪制一個標準的餅圖。2.4.1繪制標準餅圖3、clockWise，餅圖中各個數(shù)據(jù)項（item）是否按照順時針順序顯示，它是一個布爾類型，取值只有兩個：false和true。默認值為true。4、startAngle，餅圖的第一個數(shù)據(jù)項（item）開始顯示時的角度,默認值為90度，有效輸入范圍：[-360,360]。5、minAngle，最小角度，默認值為0度，可用于防止某數(shù)據(jù)項（item）的值過小而影響交互。這個參數(shù)要謹慎使用。2.4.2繪制圓環(huán)圖環(huán)形圖也是用來表示相應(yīng)數(shù)據(jù)項占該數(shù)據(jù)系列總和的比例。圓環(huán)圖是在圓環(huán)中顯示數(shù)據(jù)，其中每個圓環(huán)代表一個數(shù)據(jù)項（item）。圓環(huán)圖跟標準餅圖同屬于餅圖這一種圖表大類，只不過更加美觀，當然也更有吸引力。圓環(huán)圖就好像是在標準餅圖的中心打了一個孔，或者可以看成在餅圖上疊放了一個空白圓圈。其實，在ECharts中創(chuàng)建圓環(huán)圖非常簡單，只要在標準餅圖代碼修改一個語句，也就是將語句：radius:‘66%’,修改為：radius:[‘45%’,‘75%’]，就可由一個標準餅圖變?yōu)橐粋€圓環(huán)圖，修改后的半徑是有兩個數(shù)值的數(shù)組，分別代表圓環(huán)的內(nèi)、外半徑。運行結(jié)果如下圖。2.4.2繪制圓環(huán)圖2.4.3繪制嵌套餅圖標準餅圖（單層餅圖）能夠反映各類數(shù)據(jù)之間的比例關(guān)系，但日常業(yè)務(wù)中往往會遇到每個類別中再嵌套多個類別的情況，此時需要借助嵌套餅圖來進行展示。所謂嵌套餅圖，其實就是兩種甚至更多餅圖的嵌套，其外層是一個圓環(huán)圖，內(nèi)層是一個標準餅圖或圓環(huán)圖。它能夠反映一類事物的占比情況：大類中套有小的分類，研究它們的人口或GDP占比時，就可以使用嵌套餅圖。如：廣東省有廣州市、深圳市、珠海市、中山市等，而每個市又有許多區(qū)，如珠海市又分為香洲區(qū)、金灣區(qū)、斗門區(qū)。2.4.3繪制嵌套餅圖某大學有三個學院，每個學院的各專業(yè)的學生人數(shù)分布情況如下：各學院的總學生數(shù)：1-計算機學院：1200人，2-機器人學院：900人，3-財金學院：600人。各學院的專業(yè)名稱及其相應(yīng)的學生數(shù)：計算機學院：1-軟件技術(shù):800人，1-大數(shù)據(jù)與人工智能：400人；機器人學院：2-工業(yè)機器人技術(shù)：400人，2-機電一體化技術(shù)：300人，2-應(yīng)用電子技術(shù)：200人；財金學院：3-投資與理財：400，3-財務(wù)管理：200人。在下列代碼中實現(xiàn)以上數(shù)據(jù)的嵌套餅圖。運行的圖表如下圖所示。2.4.3繪制嵌套餅圖2.4.3繪制嵌套餅圖2.4.3繪制嵌套餅圖2.4.3繪制嵌套餅圖2.4.3繪制嵌套餅圖2.4.4繪制南丁格爾玫瑰圖在克里米亞戰(zhàn)爭期間（1853年7月-1855年12月），倫敦慈善醫(yī)院的護士長南丁格爾女士，發(fā)現(xiàn)戰(zhàn)地醫(yī)院的衛(wèi)生條件惡劣導致很多士兵死亡。因此，她開始研究傷員的死亡和衛(wèi)生環(huán)境的關(guān)系，并試圖用統(tǒng)計數(shù)據(jù)說服維多利亞女王改善軍事醫(yī)院的衛(wèi)生條件。但是她也擔心，女王那么忙，沒有時間看她那厚厚的報告和那些復雜的表格數(shù)據(jù)。于是，她設(shè)計了一種色彩繽紛又生動有趣的圖表，巧妙地展示了部隊醫(yī)院季節(jié)性的死亡率。圖表打動了當時的最高層，包括軍方人士和維多利亞女王本人，于是醫(yī)療改良提案得到了支持。受傷戰(zhàn)士的死亡率從高達42%，戲劇性地降至2.5%，挽救了幾十萬士兵的生命。她自己常昵稱這類圖為雞冠花圖（CoxcombChart），這種長得像餅圖又不是餅圖，有著極坐標的統(tǒng)計圖，是一種圓形的柱狀圖，因為外形很像一朵綻放的玫瑰，這種圖表也被稱為“南丁格爾玫瑰圖”

（Nightingalerosediagram），又名極坐標區(qū)域圖（Polarareadiagram）。對照柱狀圖，由于圓形有周期的特性，所以南丁格爾玫瑰圖適用于表示一個周期內(nèi)的時間概念，比如星期、月份。2.4.4繪制南丁格爾玫瑰圖在ECharts中繪制南丁格爾玫瑰圖時，參數(shù)與前面的餅圖沒有差別，只是它有一個特殊的參數(shù)roseType，稱為南丁格爾玫瑰圖模式，可使用的值有兩種：'radius'（半徑）,'area'（面積）。當使用半徑模式時，以各個item的值作為扇形半徑，一般來說，半徑模式可能造成較大的失真；當使用面積模式時，以各個item的值作為扇形的面積，一般來說，面積模式的失真較小。2.4.4繪制南丁格爾玫瑰圖某高校的數(shù)據(jù)如下，使用南丁格爾玫瑰圖來展示。各個學院的學生人數(shù)（半徑模式）：計算機：2000人，大數(shù)據(jù)：1500人，外國語：1200人，機器人：1100人，建工：1000人，機電：900人，藝術(shù)：800人，財經(jīng)：700人。各個學院的學生人數(shù)（面積模式）：計算機：2000人，大數(shù)據(jù)：1500人，外國語：1200

溫馨提示

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

最新文檔

評論

0/150

提交評論