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

下載本文檔

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

文檔簡(jiǎn)介

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

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

ECharts的

GitHub

上下載最新的

release

版本，解壓出來(lái)的文件夾里的

dist

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

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

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

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

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

3.

配置VSCode2.1.1準(zhǔn)備工作

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

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

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

3.

配置VSCode2.1.1準(zhǔn)備工作

3.

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

在VSCode的活動(dòng)欄中，單擊擴(kuò)展（Ctrl+Shift+X），再在文本框中搜索“LivePreviewextension”，然后點(diǎn)擊“安裝”按鈕。

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

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

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

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

繪制div容器，并為容器設(shè)置樣式<body><!---為ECharts準(zhǔn)備一個(gè)具備大?。▽挕⒏撸┑腄OM-><divid="main"style="width:600px;height:400px"></div></body>2.1.2創(chuàng)建第一個(gè)ECharts圖表

（3）使用init()方法初始化容器。通過(guò)步驟（1）引入echarts.js庫(kù)文件后，會(huì)自動(dòng)創(chuàng)建一個(gè)全局變量echarts，全局變量echarts有若干方法?；跍?zhǔn)備好的DOM，通過(guò)echarts.init()方法可以初始化ECharts實(shí)例，如代碼2-3所示。代碼2-3

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

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

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

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

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

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

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

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

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

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

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

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論