一、前言

在本專欄或文集中，我曾多次使用ECharts繪制圖表、進行可視化，也漸漸積累了30多個實例，本文對此前用過的所有圖表和代碼進行整理并分享，以給想繪制精美圖表的人一點綿薄的幫助。其中全部實例已上傳ECharts3官網的個人主頁，如果覺得網頁上一個個代碼查看太麻煩，可以看評論區，去某號后臺自取，全部代碼和原圖輕松到手，媽媽再也不用擔心你的圖丑破天際了，(逃)。

一只“治愈”的貓(微博)

二、喵喵喵

2.1、bug/詞云/韋恩圖

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

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

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

2.2、JavaScript語法

“//”：可注釋掉一行代碼，類似python中的“#”；

“/*....*/”：可將中間多行、整塊的代碼注釋掉，類似python里的三引號('''....''')；

導出圖片(saveAsImage)，數據視圖(dataView)，動態類型切換(magicType)，數據區域縮放(brush)，重置(restore)五個工具。均在圖表的右上角，導出圖片均添加了，其他不需要的可以用“//”注釋掉。

其他內容，可參考官網“配置項”詳細內容，新手可以對照簡單的圖表實例，一點點啃。

2.3、教程

W3Cschool：《ECharts教程》

以上教程都沒怎么完整看過，還是推薦新手簡單熟悉后，對照官網實例進行鉆研。其中ECharts有2.0版和3.0版：ECharts2 官網：實例、ECharts3 官網：實例。其中，官網實例里圖表很多，點開可能會卡，+10s 就好了......

三、實例

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

3.1.1 金字塔圖

備注：張佳瑋138萬+知乎關注者的分布情況。

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

3.1.2 柱形圖和餅圖(組合圖)

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

注意：組合圖只需在series下面多加幾個“{...}”的數據集，然后移動到合適位置進行展示即可。本實例原本是ECharts2里的，局部修改后也搬到ECharts3里的。此外每個實例均可“切換主題”，改變配色方案。

3.1.3 分布地圖

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

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

3.1.4 南丁格爾玫瑰圖

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

注意：南丁格爾玫瑰圖有面積模式和半徑模式，具體區別有待專業人士指導，自己完全是那么好看用的那個。

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

3.1.5 餅圖

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

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

3.1.6 散點圖

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

3.2.1 日歷熱圖(calendar heatmap)

備注：老樹畫畫歷年發布微博情況。

鏈接：三年圖：

3.2.2 散點圖

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

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

3.3.1 柱形圖

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

3.4.1 氣泡圖

備注：我的簡書一月記之點贊分布圖。

注意：此處的時間為時間戳，而非一般的小時、分鐘、秒數。氣泡大小代表點贊用戶自身的粉絲數。

備注：我的簡書一月記之關注分布圖。

注意：氣泡大小統一。

3.4.2 單軸氣泡圖

備注：我的簡書一月記之20170827-20170829復盤。

注意：20170828當天粉絲數猛然增長，單日漲粉170人次，同樣的獲贊數也增長了很多，于是復盤下前后三天的反饋信息，細分到每小時的情況。ECharts里還有事件流的圖表，或許更合適這類復盤，但了解的還不錯。

3.5.1 柱形圖和玫瑰圖(組合圖)

備注：簡書熱門文章之年度月份分布情況。

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

3.6.1 柱形圖和餅圖(組合圖)

備注：簡書26萬用戶數據之ID分布情況。

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

3.6.2 瀑布圖

備注：簡書26萬用戶信息之粉絲分布情況。

注意：data里總數值和凈數值。前者從0開始。

3.6.3 金字塔圖和餅圖(組合圖)

備注：簡書26萬用戶信息之粉絲情況。

3.7.1 瀑布圖

備注：我的簡書兩月記之獲贊數變化情況。

注意：同上的瀑布圖。

3.7.2 折線圖(一)

備注：我的簡書兩月記之粉絲數和獲贊數每日變化情況。

3.7.3 折線圖(二)

備注：我的簡書兩月記之粉絲數每日變化情況。

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

3.7.4 折線圖(三)

備注：我的簡書兩月記之Top5 文章獲贊情況。

四、小結

以上所有實例均已上傳至ECharts3官網的個人主頁，如果覺得網頁上一個個代碼查看太麻煩，可以看評論區，去某號后臺自取，全部代碼和原圖輕松到手，媽媽再也不用擔心你的圖丑破天際了(逃)。

總結

以上是生活随笔為你收集整理的echarts 卡_图表太丑怎么破，ECharts神器带你飞！的全部內容，希望文章能夠幫你解決所遇到的問題。

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