導(dǎo)讀：折線圖是一種基礎(chǔ)圖表，適合表示數(shù)據(jù)的變化趨勢，常用于時(shí)間序列數(shù)據(jù)的表示。

作者：王大偉

來源：大數(shù)據(jù)DT（ID：hzdashuju）

在正式學(xué)習(xí)之前，先來了解一個(gè)ECharts官網(wǎng)提供的很好用的功能。該功能可以實(shí)時(shí)顯示代碼的效果，使用方法說明如下。

首先，打開ECharts官網(wǎng)，在“實(shí)例”菜單中選擇任意一個(gè)圖，如圖4-1所示。

https://echarts.apache.org/exampl-es/zh/editor.html?c=area-stack

▲圖4-1 ECharts實(shí)例

可以看到，左邊顯示的是option，也就是ECharts的具體配置，右邊是對應(yīng)的可視化圖。當(dāng)我們改變左邊的代碼時(shí)，右邊的可視化也會實(shí)時(shí)改變。當(dāng)左邊的代碼有誤時(shí)，右邊則不會顯示可視化，如圖4-2所示。

▲圖4-2 ECharts代碼有誤時(shí)的界面

大家應(yīng)該已經(jīng)發(fā)現(xiàn)了，可視化設(shè)置的大部分參數(shù)都在option中，這樣可以幫我們省去很多額外的工作，方便快速調(diào)試。當(dāng)我們調(diào)試出滿意的可視化時(shí)，將option加入框架中即可。本文演示的代碼和可視化結(jié)果圖都是基于這個(gè)在線工具實(shí)現(xiàn)的。

01?基礎(chǔ)折線圖

在ECharts中，繪制折線圖需要將series中的type設(shè)置為line，代碼如下所示：

option?=?{xAxis:?{type:?'category',data:?['Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat',?'Sun']},yAxis:?{type:?'value'},series:?[{data:?[450,?232,?301,?734,?1090,?830,?500],type:?'line'}] };

其中，series中的data值序列長度需要和xAxis中的data值序列長度一致，x軸和y軸分別為類別（星期）和數(shù)值，可視化效果如圖4-3所示。

▲圖4-3 基礎(chǔ)折線圖

當(dāng)我們在series中加入?yún)?shù)smooth: true后，可以得到較為光滑的折線（曲線）。代碼如下所示：

option?=?{xAxis:?{type:?'category',data:?['Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat',?'Sun']},yAxis:?{type:?'value'},series:?[{data:?[450,?232,?301,?734,?1090,?830,?500],type:?'line',smooth:?true}] };

可視化結(jié)果如圖4-4所示。

▲圖4-4 基礎(chǔ)折線圖（曲線）

02?多條折線圖

至此我們就學(xué)會了如何繪制單條折線圖，當(dāng)然我們還會遇到繪制多條折線圖的情況，如圖4-5所示。

▲圖4-5 多條折線圖

此時(shí)我們在上面單條折線圖的代碼中做少量修改即可，具體代碼如下：

option?=?{xAxis:?{type:?'category',data:?['Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat',?'Sun']},yAxis:?{type:?'value'},legend:?{data:?['A產(chǎn)品銷量',?'B產(chǎn)品銷量','C產(chǎn)品銷量'],left:?'right' },series:?[{name:'A產(chǎn)品銷量',data:?[550,?232,?311,?764,?1090,?830,?500],type:?'line',smooth:?true},{name:'B產(chǎn)品銷量',data:?[420,?162,?121,?474,?720,?640,?230],type:?'line',smooth:?true},{name:'C產(chǎn)品銷量',data:?[850,?432,?501,?934,?1190,?930,?600],type:?'line',smooth:?true}] };

通過觀察可以發(fā)現(xiàn)，series中并列了三個(gè)字典結(jié)構(gòu)，分別存放A~C產(chǎn)品的數(shù)據(jù)，我們加入了legend圖例，目的是為了區(qū)分A～C產(chǎn)品的數(shù)據(jù)。需要注意的是，A～C產(chǎn)品數(shù)據(jù)的name字段內(nèi)容需要和legend中的內(nèi)容一一對應(yīng)。

03?堆疊折線圖

有時(shí)候，我們需要使用堆疊折線圖來反映不同項(xiàng)的累加情況，此時(shí)可以通過在ECharts的series的每項(xiàng)數(shù)據(jù)中加入stack和areaStyle參數(shù)實(shí)現(xiàn)，可視化結(jié)果如圖4-6所示。

▲圖4-6 堆疊折線圖

具體實(shí)現(xiàn)代碼如下：

option?=?{xAxis:?{type:?'category',data:?['Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat',?'Sun']},yAxis:?{type:?'value'},legend:?{data:?['A產(chǎn)品銷量',?'B產(chǎn)品銷量','C產(chǎn)品銷量'],left:?'right'},series:?[{name:'A產(chǎn)品銷量',data:?[550,?232,?311,?764,?1090,?830,?500],type:?'line',smooth:?true,stack:?'總量',areaStyle:?{}},{name:'B產(chǎn)品銷量',data:?[420,?162,?121,?474,?720,?640,?230],type:?'line',smooth:?true,stack:?'總量',areaStyle:?{}},{name:'C產(chǎn)品銷量',data:?[850,?432,?501,?934,?1190,?930,?600],type:?'line',smooth:?true,stack:?'總量',areaStyle:?{}}] };

其中，areaStyle用于對區(qū)域填充色彩，如果沒有該參數(shù)，區(qū)域?qū)⒉粫刑畛渖?#xff0c;感興趣的讀者可以刪除該參數(shù)看看效果。堆疊的順序自上到下和數(shù)據(jù)的順序相反，例如代碼數(shù)據(jù)中的順序是ABC，可視化圖中自上到下的順序是CBA。

為了方便辨識堆疊總量數(shù)據(jù)信息，可以在最上層的數(shù)據(jù)中加入label參數(shù)，同時(shí)加入tooltip方便查閱數(shù)據(jù)，修改后的代碼如下：

option?=?{xAxis:?{type:?'category',data:?['Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat',?'Sun']},yAxis:?{type:?'value'},legend:?{data:?['A產(chǎn)品銷量',?'B產(chǎn)品銷量','C產(chǎn)品銷量'],left:?'right' },tooltip:?{trigger:?'axis',axisPointer:?{type:?'cross',label:?{backgroundColor:?'#6a7985'}}},series:?[{name:'A產(chǎn)品銷量',data:?[550,?232,?311,?764,?1090,?830,?500],type:?'line',smooth:?true,stack:?'總量',areaStyle:?{}},{name:'B產(chǎn)品銷量',data:?[420,?162,?121,?474,?720,?640,?230],type:?'line',smooth:?true,stack:?'總量',areaStyle:?{}},{name:'C產(chǎn)品銷量',data:?[850,?432,?501,?934,?1190,?930,?600],type:?'line',smooth:?true,stack:?'總量',label:?{normal:?{show:?true,position:?'top'}},areaStyle:?{}}] };

可視化結(jié)果如圖4-7所示。

▲圖4-7 堆疊柱狀圖優(yōu)化版

關(guān)于作者：王大偉，畢業(yè)于華東理工大學(xué)，碩士學(xué)歷，目前就職于平安金融壹賬通，從事數(shù)據(jù)挖掘算法工作，擅長ECharts、Python、自然語言處理、數(shù)據(jù)分析挖掘、機(jī)器學(xué)習(xí)。曾獲微軟最有價(jià)值專家（MVP）榮譽(yù)稱號。

本文摘編自《ECharts數(shù)據(jù)可視化：入門、實(shí)戰(zhàn)與進(jìn)階》，經(jīng)出版方授權(quán)發(fā)布。

延伸閱讀《ECharts數(shù)據(jù)可視化》

長按上方二維碼了解及購買

轉(zhuǎn)載請聯(lián)系微信：DoctorData

推薦語：ECharts官方推薦，系統(tǒng)全面、由淺入深、注重實(shí)操，帶領(lǐng)讀者快速從新人到高手。

歡迎加入《ECharts數(shù)據(jù)可視化》讀者群????

劃重點(diǎn)????

干貨直達(dá)????

• 什么是數(shù)字孿生？有哪些關(guān)鍵能力？
  

• 5G重要應(yīng)用！三大運(yùn)營商、華為、騰訊都在布局，現(xiàn)在了解還不晚

• 給2020劃重點(diǎn)：最火的10個(gè)關(guān)鍵詞和28個(gè)書單
  

• 官方出品！手把手教你在華為HMS平臺開發(fā)App

更多精彩????

在公眾號對話框輸入以下關(guān)鍵詞

查看更多優(yōu)質(zhì)內(nèi)容！

PPT?|?讀書?|?書單?|?硬核?|?干貨?|?講明白?|?神操作

大數(shù)據(jù)?|?云計(jì)算?|?數(shù)據(jù)庫?|?Python?|?可視化

AI?|?人工智能?|?機(jī)器學(xué)習(xí)?|?深度學(xué)習(xí)?|?NLP

5G?|?中臺?|?用戶畫像?|?1024?|?數(shù)學(xué)?|?算法?|?數(shù)字孿生

據(jù)統(tǒng)計(jì)，99%的大咖都完成了這個(gè)神操作

????

總結(jié)

以上是生活随笔為你收集整理的手把手教你用ECharts画折线图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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