導讀：折線圖是一種基礎圖表，適合表示數據的變化趨勢，常用于時間序列數據的表示。

作者：王大偉

來源：大數據DT（ID：hzdashuju）

在正式學習之前，先來了解一個ECharts官網提供的很好用的功能。該功能可以實時顯示代碼的效果，使用方法說明如下。

首先，打開ECharts官網，在“實例”菜單中選擇任意一個圖，如圖4-1所示。

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

▲圖4-1 ECharts實例

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

▲圖4-2 ECharts代碼有誤時的界面

大家應該已經發現了，可視化設置的大部分參數都在option中，這樣可以幫我們省去很多額外的工作，方便快速調試。當我們調試出滿意的可視化時，將option加入框架中即可。本文演示的代碼和可視化結果圖都是基于這個在線工具實現的。

01?基礎折線圖

在ECharts中，繪制折線圖需要將series中的type設置為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軸分別為類別（星期）和數值，可視化效果如圖4-3所示。

▲圖4-3 基礎折線圖

當我們在series中加入參數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}] };

可視化結果如圖4-4所示。

▲圖4-4 基礎折線圖（曲線）

02?多條折線圖

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

▲圖4-5 多條折線圖

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

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

通過觀察可以發現，series中并列了三個字典結構，分別存放A~C產品的數據，我們加入了legend圖例，目的是為了區分A～C產品的數據。需要注意的是，A～C產品數據的name字段內容需要和legend中的內容一一對應。

03?堆疊折線圖

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

▲圖4-6 堆疊折線圖

具體實現代碼如下：

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

其中，areaStyle用于對區域填充色彩，如果沒有該參數，區域將不會有填充色，感興趣的讀者可以刪除該參數看看效果。堆疊的順序自上到下和數據的順序相反，例如代碼數據中的順序是ABC，可視化圖中自上到下的順序是CBA。

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

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

可視化結果如圖4-7所示。

▲圖4-7 堆疊柱狀圖優化版

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

本文摘編自《ECharts數據可視化：入門、實戰與進階》，經出版方授權發布。

延伸閱讀《ECharts數據可視化》

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

轉載請聯系微信：DoctorData

推薦語：ECharts官方推薦，系統全面、由淺入深、注重實操，帶領讀者快速從新人到高手。

歡迎加入《ECharts數據可視化》讀者群????

劃重點????

干貨直達????

• 什么是數字孿生？有哪些關鍵能力？
  

• 5G重要應用！三大運營商、華為、騰訊都在布局，現在了解還不晚

• 給2020劃重點：最火的10個關鍵詞和28個書單
  

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

更多精彩????

在公眾號對話框輸入以下關鍵詞

查看更多優質內容！

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

大數據?|?云計算?|?數據庫?|?Python?|?可視化

AI?|?人工智能?|?機器學習?|?深度學習?|?NLP

5G?|?中臺?|?用戶畫像?|?1024?|?數學?|?算法?|?數字孿生

據統計，99%的大咖都完成了這個神操作

????

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。