圖表太醜怎麼破，ECharts神器帶你飛！

1、前言

在本專欄或文集中，我曾屢次使用ECharts繪製圖表、進行可視化，也漸漸積累了30多個實例，本文對此前用過的全部圖表和代碼進行整理並分享，以給想繪製精美圖表的人一點綿薄的幫助。其中所有實例已上傳ECharts3官網的我的主頁，若是以爲網頁上一個個代碼查看太麻煩，可去微信號：牛衣古柳（ID：Deserts-X）後臺自取，所有代碼和原圖輕鬆到手，媽媽不再用擔憂你的圖醜破天際了，（逃）。

2、喵喵喵

2.一、bug/詞雲/韋恩圖

全部實例均是參考官網的做品實現的，本人對JavaScript此外無過多涉獵，如有不規範的地方，請批評性看待。實例中涉及動態交互的部分可能會有莫名其妙的地方，由於此前都是爲了拿到靜態圖表，若是你也只是想拿個圖，那問題卻是不大。

詞雲不是ECharts繪製的，而是由下面的網站生成的，可選擇多個主題、配色、形狀等等。

在線詞雲生成網站：HTML5 Word Cloud（有點卡，佈局也要多調試）

韋恩圖只能在ECharts2裏運行成功，故沒有搬到ECharts3裏：

2.二、JavaScript語法

「//」：可註釋掉一行代碼，相似python中的「#」；

「/*....*/」：可將中間多行、整塊的代碼註釋掉，相似python裏的三引號（'''....'''）；

toolbox：工具欄。內置有導出圖片（saveAsImage），數據視圖（dataView），動態類型切換（magicType），數據區域縮放（brush），重置（restore）五個工具。均在圖表的右上角，導出圖片均添加了，其餘不須要的能夠用「//」註釋掉。

其餘內容，可參考官網「配置項」詳細內容，新手能夠對照簡單的圖表實例，一點點啃。

2.三、教程

慕課網視頻：《Echarts3.0入門基礎與實戰》

W3Cschool：《ECharts教程》

以上教程都沒怎麼完整看過，仍是推薦新手簡單熟悉後，對照官網實例進行鑽研。其中ECharts有2.0版和3.0版：ECharts2 官網：實例、ECharts3 官網：實例。其中，官網實例裏圖表不少，點開可能會卡，+10s 就行了......

3、實例

講了這一車的話，對於不明真相的讀者來講，可能最好奇的就是到底都有哪些圖表呢，到底能把本身醜爆的圖碾壓到什麼程度呢，如下有針對性的羅列下部分實例和對應的文章：

3.一、《爬取張佳瑋138w+知乎關注者：數據可視化》

3.1.1 金字塔圖

備註：張佳瑋138萬+知乎關注者的分佈狀況。

注意：設置series裏的min和max爲數據集的最小值和最大值。缺點是上幾層文字顯示不佳。

連接：gallery.echartsjs.com/editor.html…

3.1.2 柱形圖和餅圖（組合圖）

備註：張佳瑋138萬+知乎關注者之100+關注者的性別狀況。

注意：組合圖只需在series下面多加幾個「{...}」的數據集，而後移動到合適位置進行展現便可。本實例本來是ECharts2裏的，局部修改後也搬到ECharts3裏的。此外每一個實例都可「切換主題」，改變配色方案。

連接：gallery.echartsjs.com/editor.html…

3.1.3 分佈地圖

備註：張佳瑋138萬+知乎關注者之1w+關注者國內分佈狀況。

注意：繪製時須要加載地圖腳本（/dep/echarts/map/js/china.js）。也須要將手頭的城市數據轉換成對應的經緯度。

連接：gallery.echartsjs.com/editor.html…

3.1.4 南丁格爾玫瑰圖

備註：張佳瑋138萬+知乎關注者之Top20學校和行業狀況。

注意：南丁格爾玫瑰圖有面積模式和半徑模式，具體區別有待專業人士指導，本身徹底是那麼好看用的那個。

連接：gallery.echartsjs.com/editor.html…

備註：張佳瑋138萬+知乎關注者之Top20公司和職業狀況。

連接：gallery.echartsjs.com/editor.html…

3.1.5 餅圖

備註：張佳瑋138萬+知乎關注者之認證信息。

注意：內圈和外圈數據要一致。外圈做爲內圈的細分。

連接：gallery.echartsjs.com/editor.html…

3.1.6 散點圖

備註：張佳瑋138萬+知乎關注者之優秀回答者貢獻狀況。

3.二、《爬取老樹畫畫所有微博數據：三千詩與畫》

3.2.1 日曆熱圖（calendar heatmap）

備註：老樹畫畫歷年發佈微博狀況。

連接：三年圖：

gallery.echartsjs.com/editor.html…

gallery.echartsjs.com/editor.html…

一年圖：gallery.echartsjs.com/editor.html…

3.2.2 散點圖

備註：老樹畫畫微博之評論、轉發與點贊狀況。

注意：可與上面單組數據對照，看看兩組數據時對應的代碼異同之處。

連接：gallery.echartsjs.com/editor.html…

3.三、《Gephi繪製微博轉發圖譜：以「@老婆孩子在天堂」爲例》

3.3.1 柱形圖

備註：一則微博轉發數隨時間變化狀況。

連接：gallery.echartsjs.com/editor.html…

3.四、《個人簡書一月記：數據可視化》

3.4.1 氣泡圖

備註：個人簡書一月記之點贊分佈圖。

注意：此處的時間爲時間戳，而非通常的小時、分鐘、秒數。氣泡大小表明點贊用戶自身的粉絲數。

連接：gallery.echartsjs.com/editor.html…

備註：個人簡書一月記之關注分佈圖。

注意：氣泡大小統一。

連接：gallery.echartsjs.com/editor.html…

3.4.2 單軸氣泡圖

備註：個人簡書一月記之20170827-20170829覆盤。

注意：20170828當天粉絲數猛然增加，單日漲粉170人次，一樣的獲贊數也增加了不少，因而覆盤下先後三天的反饋信息，細分到每小時的狀況。ECharts裏還有事件流的圖表，或許更合適這類覆盤，但瞭解的還不錯。

連接：gallery.echartsjs.com/editor.html…

3.五、《簡書=雞湯？爬取今日看點數據：1916篇簡書熱門文章可視化》

3.5.1 柱形圖和玫瑰圖（組合圖）

備註：簡書熱門文章之年度月份分佈狀況。

注意：相同年份設置爲同一顏色，顏色選擇很關鍵。

連接：gallery.echartsjs.com/editor.html…

3.六、《爬取簡書26萬+用戶信息：數據可視化》

3.6.1 柱形圖和餅圖（組合圖）

備註：簡書26萬用戶數據之ID分佈狀況。

注意：指定好各部分的顏色。不然容易混亂。

連接：gallery.echartsjs.com/editor.html…

3.6.2 瀑布圖

備註：簡書26萬用戶信息之粉絲分佈狀況。

注意：data裏總數值和淨數值。前者從0開始。

連接：gallery.echartsjs.com/editor.html…

3.6.3 金字塔圖和餅圖（組合圖）

備註：簡書26萬用戶信息之粉絲狀況。

連接：gallery.echartsjs.com/editor.html…

3.7 《個人簡書兩月記：數據可視化》

3.7.1 瀑布圖

備註：個人簡書兩月記之獲贊數變化狀況。

注意：同上的瀑布圖。

連接：gallery.echartsjs.com/editor.html…

3.7.2 折線圖（一）

備註：個人簡書兩月記之粉絲數和獲贊數每日變化狀況。

連接：gallery.echartsjs.com/editor.html…

3.7.3 折線圖（二）

備註：個人簡書兩月記之粉絲數每日變化狀況。

注意：折線和橫座標沒對齊，bug。

連接：gallery.echartsjs.com/editor.html…

3.7.4 折線圖（三）

備註：個人簡書兩月記之Top5 文章獲贊狀況。

連接：gallery.echartsjs.com/editor.html…

4、小結

以上全部實例均已上傳至ECharts3官網的我的主頁，若是以爲網頁上一個個代碼查看太麻煩，能夠去微信號：牛衣古柳（ID：Deserts-X）後臺自取，所有代碼和原圖輕鬆到手，媽媽不再用擔憂你的圖醜破天際了（逃）。