ECharts做為數據展現的一種更靈活直觀的方式，Echarts 每種圖表制作的適用場景以及優劣勢

 

https://echarts.apache.org/zh/index.html            Apache ECharts首頁

https://echarts.apache.org/examples/zh/index.html         Examples - Apache ECharts所有實例

vintage

dark

macarons

infographic

shine

 

 https://www.makeapie.com/

https://www.runoob.com/w3cnote/html5-canvas-eccharts.html

ECharts 教程：    https://www.runoob.com/echarts/echarts-tutorial.html

ECharts 下載：    https://github.com/apache/incubator-echarts

ECharts 官網：    https://www.echartsjs.com/zh/index.html

HTML5 Canvas 教程：    https://www.runoob.com/html/html5-canvas.html

ZRender：    https://www.runoob.com/w3cnote/html5-canvas-zrender.html

 

 

 

ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，

用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，

用於關系數據可視化的關系圖、treemap、旭日圖

，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖，儀表盤，並且支持圖與圖之間的混搭。

官方網址：https://echarts.baidu.com/

源碼：  https://github.com/xwjie/SpringBootEChart

展示：   https://github.com/xwjie/SpringBootEChart

 https://airubby.github.io/echarts-example/

 

 

echarts 一頁多圖表自適應

有圖片的myChart變成全局的，然后調用 

window.addEventListener("resize", function () {
    myChart1.resize(); 
    myChart2.resize()
    myChart3.resize()
    myChart4.resize()
    myChart5.resize()
    myChart6.resize()
    myChart7.resize(); 
 });

 

方案：

eval-echarts

基於echarts前后端封裝 
springboot2.x+jquery1.11.x+echarts3.x
附demo 可以直接在項目中使用

介紹

• 對echarts前端js對象option進行封裝，前端只需要傳接口url和div的id
• 后台提供對應的java數據結構，每種圖形對應自己的抽象模板類，整個數據對象拼接的過程都已經封裝好
• 極大的方便了開發人員，只需關注業務代碼和sql語句的實現即可

特點

• 1.使用多種設計模式保證代碼的擴展性和解耦
• 2.項目整體架構已經搭建完成
• 3.自己可以動手擴展相關echarts圖形實現代碼
• 4.目前支持7種圖形 折線圖，柱狀圖，條線圖，餅狀圖，環形圖，雷達圖，區域圖
• 5.新增主題設置
• 6.持續更新

項目目錄

• eval-core -----相關實現核心代碼
• eval-demo -----springboot簡易demo 代碼持續更新中

環境

jdk8 
springboot2.x 
jquery1.11x 
echarts3.x

ECharts是產品中的一種報表類型，它以圖形的方式展現指標數據，並通過簡單的設置實現報表互動。

ECharts做為數據展現的一種更靈活直觀的方式，基於用戶對數據更易於理解、對決策更具科學依據的需求，對不同業務背景下的數據進行處理，可以實現對數據多角度、多層次的分析。

Smartbi ECharts圖形特性：

豐富的可視化類型

多種數據格式無需轉換直接使用

千萬數據的前端展現

移動端優化

多渲染方案，跨平台使用

深度的交互式數據探索

多維數據的支持以及豐富的視覺編碼手段

動態數據

絢麗的特效

 

Echarts 每種圖表制作的適用場景以及優劣勢

 

目錄

• 一、柱狀（條形）圖
• 二、折線（面積）圖
• 三、餅（圓環）圖
• 四、地圖
• 五、雷達（面積）圖
• 七、漏斗圖
• 八、詞雲圖
• 九、散點（氣泡）圖
• 十、雙軸圖

一、柱狀（條形）圖

• 效果圖：
  
• 適用場景：
  • 主要是二維數據集（每個數據點包括兩個值 x 和 y ），但是只有一個維度需要進行比較，用於顯示一段時間內的數據變化或顯示各項之間的比較情況。
  • 適用於枚舉的數據，比如地域之間的關系，數據沒有必然的連續性。
• 優勢：
  • 柱狀圖利用柱子的高度，反映數據的差異，肉眼對高度的差異很敏感。
• 劣勢：
  • 柱狀圖的局限在於只適用中小規模的數據集。
    
    

二、折線（面積）圖

• 效果圖：
  
• 適用場景：
  • 折線圖適合二維的大數據集，還適合多個二維數據集的比較，一般用來表示趨勢的變化，橫軸一般為日期字段。
• 優勢：
  • 容易反應出數據變化的趨勢。
    
    

三、餅（圓環）圖

• 效果圖：
  
• 適用場景：
  • 顯示各項的大小與各項總和的所占比例，適用簡單的占比比例圖，在不要求數據精細的情況下適用。
• 優勢：
  • 明確顯示數據的比例情況，尤其適合渠道來源等場景。
• 劣勢：
  • 不會具體的數值，只是整體的占比情況。
    
    

四、地圖

• 效果圖：
  
• 地圖類型：
  • 行政地圖（面積圖）、行政地圖（氣泡圖）、GIS地圖（點狀圖）、GIS地圖（熱力圖）、GIS地圖（散點圖）、GIS地圖 （地圖+柱狀/餅圖/條形圖）
• 適用場景：
  • 主要適用於有空間位置的數據集，一般分成行政地圖（氣泡圖，面積圖）和GIS地圖，行政地圖一般有省份、城市數據就夠了；而細化到具體區域，只要有數據，可做區域，全國甚至全球的地圖。
• 優劣勢：
  • 特殊情況下使用，涉及到行政區域時。
    
    

五、雷達（面積）圖

• 效果圖：
  
• 適用場景：
  • 雷達圖適用於多維數據（四維以上），一般是用來表示某個數據字段的綜合情況，數據點一般6個左右，太多的話辨別起來有些困難。
• 優勢：
  • 主要用來了解公司各項數據指標的變動情形及其好壞的趨向。
• 劣勢：
  • 理解成本較高。
    
    

七、漏斗圖

• 效果圖：
  
• 適用場景：
  • 漏斗圖適用於業務流程多的流程分析，顯示各流程的轉化率。
• 優勢：
  • 在網站分析中，通常用於轉化率比較，它不僅能展示用戶從網站到購買的最終轉化率，還可以展示每個步驟的轉化率，能夠直觀地發現和說明問題所在。
• 劣勢：
  • 單一漏斗圖無法評估網站某個關鍵流程中各步驟轉化率的好壞。
    
    

八、詞雲圖

• 效果圖：
  
• 適用場景：
  • 顯示詞頻，可以用來做一些用戶畫像，用戶標簽的工作。
• 優勢：
  • 很酷很炫，很直觀的圖表。
• 劣勢：
  • 使用場景單一，一般用來做詞頻。
    
    

九、散點（氣泡）圖

• 效果圖：
  
• 適用場景：
  • 顯示若干數據系列中各數值之間的關系，類似 XY 軸，判斷兩變量之間是否存在某種關聯；
  • 散點圖適用於三維數據集，但是其中只有兩維數據是需要比較的，另外，散點圖還可以看出極值的分布情況。
• 優勢：
  • 對於處理值的分布和數據點的分簇區域（通過設置橫縱項的輔助線）。
  • 散點圖都很理想，如果數據集中包含非常多的點，那么散點圖便是最佳圖表類型。
• 劣勢：
  • 在點狀圖中顯示多個序列，看上去非常混亂。
    
    

十、雙軸圖

• 效果圖：
  
• 適用場景：
  • 柱狀圖 + 折線圖的搭配，使用情況有很多，比如數量級相差很大的情況，數據同環比分析對比等情況。
• 優勢：
  • 通用，屬於圖表混搭使用，比如上圖的 柱狀圖 + 折線圖 混搭，圖表展現很直觀。

 

 

Smartbi ECharts圖形類型-柱圖

以實際的業務需求和美觀性為出發點，柱圖衍生出多種不同形態的子圖：堆積柱圖、瀑布圖、普通橫條圖、堆積橫條圖、3D柱圖，用來更好的表現和滿足不同的數據對比分析需求。

Smartbi ECharts圖形類型-線圖

以實際的業務需求和美觀性為出發點，線圖衍生出多種不同形態的子圖：標准折線圖、標准面積圖、堆積面積圖，用來更好的表現和滿足不同的數據對比分析需求。

Smartbi ECharts圖形類型-餅圖

以實際的業務需求和美觀性為出發點，餅圖衍生出多種不同形態的子圖：標准餅圖、標准環形圖、南丁格爾玫瑰圖，用來更好的表現和滿足不同的數據對比分析需求。

Smartbi ECharts圖形類型-油量圖

油量圖是指以油量表的形式來展現指標數據。包含一個圓形的表盤和一個指針，表盤上有相應的刻度表示數值的范圍，指針指向當前數值，可直觀的表現出某個指標的進度或實際情況。

油量圖特點說明如下:

優勢：

1）直觀的展示某個指標的進度或實際情況。

2）圓形結構更有效利用空間。

劣勢：數據場景比較單一。

數據要求：一個或多個指標值。

適用場景：顯示單一的數據。

不適用場景：

1）不適合比較不同的變量。

不適合表示趨勢。

Smartbi ECharts圖形類型-地圖

以實際的業務需求和美觀性為出發點，地圖衍生出多種不同形態的子圖：標准地圖、航線圖、3D航線圖，用來更好的表現和滿足不同的數據對比分析需求。

Smartbi ECharts圖形類型-散點圖

用兩組數據構成多個坐標點，考察坐標點的分布，判斷兩變量之間是否存在某種關聯或總結坐標點的分布模式。

散點圖用來研究變量之間的關系。

散點圖的特點說明如下：

優勢：研究兩變量之間的關系，或區間分布模式。

劣勢：適用范圍較窄。

數據要求：一個或兩個維度，兩個度量；分類字段，散點圖通常用於比較跨類別的聚合數據。

適用場景：銷售量和折扣之間的關系；收入和消費之間的關系；社會現象關系的研究等 。

Smartbi ECharts圖形類型-聯合圖

聯合圖是指以線圖、柱圖、面積圖或者散點圖任意兩兩組合（雙線圖、雙柱圖、雙面積圖、雙散點圖亦包含在內）的表現形式來展現兩個或兩個以上數據指標情況。

Smartbi ECharts圖形類型支持如下兩種類型的聯合圖：

單Y軸聯合圖：只有一個Ｙ軸的聯合圖。

雙Y軸聯合圖：有兩個Ｙ軸的聯合圖。

Smartbi ECharts圖形類型-雷達圖

雷達圖又稱戴布拉圖或蜘蛛網圖，它從一個中心點向外輻射出多條坐標軸（4條以上），每一個分類數據都占有一條數值坐標軸，並連接各坐標軸上同一系列的值構成一個個不規則多邊形。在任何一個軸上靠近圖形中心的點表示一個較低的數值，靠近圖形邊緣的點表示一個較高的數值。

雷達圖通常用於在同一組坐標軸上比較不同實體的性能，也可用於表示和同一個項目相關的多個不同的因素。

雷達圖的特點說明如下：

優勢：使用者能對各項指標的變動情形及好壞趨向一目了然。

劣勢：

1) 雷達圖上多邊形過多會使可讀性下降。如果有五個以上要評估的事物，相應的多邊形輪廓和填充區域，都會產生覆蓋和混亂，使得數據難以閱讀。

2) 分類數據變量過多，也會造成可讀性下降，因為一個變量對應一個坐標軸，這樣會使坐標軸過於密集。因此，要限制雷達圖的變量數量。

數據要求：維度的數據量不宜過多，度量不多於5個。

適用場景：

1) 雷達圖適用於比較類的需求，主要被應用在與其他數據的比較，公司的優勢和廣告調查等方面。

2) 雷達圖用於顯示各衡量指標的綜合水平以及指標間的平衡性，常用於企業經營狀況和財務分析。

不適用場景：數據類別過多。

Smartbi ECharts圖形類型-關系圖

關系圖使用圓圈和連線表示節點與節點之間的關系。

下圖是一個關系圖示例，展示人物之間的關系。每個節點的顏色表示他們的類型，圓圈大小表示每個人的聲望大小，圓圈越大，聲望越大。

Smartbi ECharts圖形類型-熱力圖

熱力圖是指用x軸和y軸表示的兩個分類字段確定數值點的位置，通過相應位置的矩形顏色去表現數值的大小，顏色深代表的數值大。

熱力圖的特點說明如下：

優勢：好看、易於理解，數據信息更直觀有效。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://edu.cnblogs.com/

高等軟工課程總結
引言
開學伊始，“軟件工程”這個概念對我來說很陌生。充滿未知，對它有着莫名的惶恐。從一次一次的失敗中我的確學到了很多,其他只是拷貝別人代碼所學習不到的知識,要避免再次的失敗,唯有付出更多的時間在繼續學習軟件工程的知識,當然也不只是需求分析和編碼方面的知識,要保證一個軟件項目的正常執行,一定要學習項目管理知識,知道如何推行你的項目在給定的時間內以優秀的質量滿足客戶的實際需求。總體來講，這學期的軟工課程在軟件工程開發上給予我極其寶貴的經驗，讓我收獲頗豐。當然也給過自己很多寶貴的經驗和教訓，自己反思了很多也收獲了很多。

軟件工程是個很有深度的領域,在這次實踐中所感悟最深的是, “紙上得來終覺淺，絕知此事要躬行!”在這短短的時間里，讓我深深的感覺到自己在實際應用中所學來專業知識的匱乏。讓我真真領悟到“學無止境”這句話的涵義。對於知識有沒有徹底的理解,不能光靠一張嘴說,也不不能憑感覺.自己感覺掌握了就行,不去實踐.軟件工程是門實踐的科學.一定要而且只有在實踐上實現了才能說你掌握了這個知識點.而不是光會說,這個這個應該是這樣的,沒有自己去實踐,程序運行的結果只是簡單的copy書上的或是google來的答案.這樣是要不得的! 我深深的體會到了自己在專業知識方面的欠缺和不足，也意識到了自己作為計算機軟件專業的學生，要想在以后的職業中嶄露頭角，除了要有過硬的理論知識，健康的體魄之外，還必須具備良好的心理素質，是自己在以后的途中無論經歷什么樣的困難，都立於不敗之地。

我個人覺得知識是一定實踐的,不實踐怎么能知道實際的運行結果是否和我們的預期一樣呢?在實踐中學到的知識是受益終身的。

課程感悟
所在小組共4人，組內划分功能模塊並分配工作，分工明確。在這個工程中，溝及時通，合理分配以及按時完成對軟件正常的整體開發進度都是極為重要的。在這些過程中，我不僅知道了職業生涯所需具備的專業知識，而且讓我深深體會到一個團隊中的各個成員合作的重要性，要善於團隊合作，善於利用別人的智慧，這才是大智慧。靠單一的力量是很難完成一個大項目的，在進行團隊合作的時候，還要耐心聽取每一個成員的意見，是我們的組合達到更加完美。在幾個能力比較強的同學，特別是組長的帶領下，我真的學到了很多東西，在此感謝他們的帶領，感謝他們不嫌棄我的年紀輕以及經驗不足帶來工作上的不協調。
讓我明白工作中需要能力，素質，知識之外，更重要的是學會了如何去完成一個任務，懂得了享受工作。當遇到問題，冷靜，想辦法一點一點的排除障礙，到最后獲取成功，一種自信心就由然而生，這應該就是工作的樂趣。

項目感悟
我所在團隊所做的任務是社區疫情防控系統。從剛開始我們對社區疫情防控的了解僅僅只停留在健康寶這一個單一形式的防控手段，但隨着課程的深入，從需求分析了解到我們整個社區疫情防控系統的最終目的是做出一個具體到社區的疫情管理系統，到評審分析階段，對整個系統該分成幾個模塊該分成幾個流程有了清醒的認知，再到設計階段，從類與數據流的視角看待整個系統，從而完整的確定了我們整個系統的流程，確定了我們整個系統的最終設計及其最核心類圖。雖然我的經驗尚淺，對軟件工程的了解還不夠深入，但老師的講解讓我明白了軟件工程這一學科並不是一個僅僅寫代碼的學科，它重點在於要求我們對整個系統有一個宏觀的把控，對整個工程有一個嚴格化的管理，保證軟件能夠有條不紊的開發。

結語
雖然這門課結束了，但是學習的腳步不能結束。慢慢的碼農路才剛剛開始，學習之路還很長，我覺着那句話說的很對：一直堅持，收獲就不會太少。貴在堅持，別輕易言棄。

最后,感謝我和我一起奮斗的伙伴們。感謝給予我們諄諄教導的老師和助教,謝謝你們!你們辛苦了！