最近做項目的時候，使用到了ECharts,所以在這里整理總結一下。
首先，ECharts是一個純JavaScript圖標庫，底層依賴於輕量級的Canvas類庫ZRender，基於BSD開源協議，是一款非常優秀的可視化前端框架。
官網地址：http://echarts.baidu.com/
1、首先在官網，選擇適合的版本下載
http://echarts.baidu.com/download.html
2、引入Echarts
<script src="js/echarts.js"></script>
3、繪制一個簡單的圖表
准備一個DOM容器
<div style="border:2px solid #666666; width:49%; height:450px; float:left" id="chartmain"></div>
4、創建一個簡單的雷達圖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>測試</title> <script src="F:\VScode測試\TESTfile\echarts.min.js"></script> <script type="text/javascript"> window.onload=function(){ //指定圖表的配置和數據 option={ //標題 title:{ text:'基礎雷達圖' }, tooltip:{}, legend:{ data:['預算分配（Allocated Budget）','實際開銷（Actual Spending）'] }, radarL:{ //shape:'circle', name:{ textStyle:{ color:'#fff', backgroundColor:'#999', borderRadius:3, padding:[3,5] } }, indicator:[ {name:'銷售（sales）',max:6500}, {name:'管理（Administration）',max:16000}, {name:'信息技術（Information Techology）',max:30000}, {name:'客服（Customer Support）',max:38000}, {name:'研發（Development）',max:52000}, {name:'市場（Marketing）',max:25000} ] }, series:[{ name:'預算 vs 開銷（Budget vs spending）', type:'radar', //areaStyle:{normal:{}}, data:[ { value:[4300,10000,28000,35000,50000,19000], name:'預算分配（Allocated Budget）' }, { value:[5000,14000,28000,31000,42000,24000], name:'實際開銷（Actual Spending）' } ] }] }; //獲取dom容器 var myChart = echarts.init(document.getElementById('chartmain')); //使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); } </script> </head> <body> <div style="border:2px solid #666666; width:49%; height:450px; float:left" id="chartmain"></div> </body> </html>
5、名詞解釋
基本名詞
| 名詞 | 描述 |
| chart | 是指一個完整的圖表，如折線圖，餅圖等“基本”圖表類型或由基本圖表組合而成的“混搭”圖表，可能包括坐標軸、圖例等 |
| axis | 直角坐標系中的一個坐標軸，坐標軸可分為類目型、數值型或時間型 |
| xAxis | 直角坐標系中的一個橫軸，通常默認為類目型 |
| yAxis | 直角坐標系中的一個縱軸，通常默認為數值型 |
| grid | 直角坐標系中除坐標軸外的繪圖網絡，用於定義直角系整體布局 |
| legend | 圖例，表述數據和圖形的關聯 |
| dataRange | 值域選擇，常用於展現地域數據時選擇值域范圍 |
| dataZoom | 數據區域縮放，常用於展現大量數據時選擇可視范圍 |
| roamController | 縮放漫游組件，搭配地圖使用 |
| toolbox | 輔助工具箱，輔助功能，如添加標線，框選縮放等 |
| tooltip | 氣泡提示框，常用於展現更詳細的數據 |
| timeline | 時間軸，常用於展現同一系列數據在事件維度上的多份數據 |
| series | 數據系列，一個圖標可能包含多個系列，每一個系列可能包含多個數據 |
圖表名詞
| 名詞 | 描述 |
| line | 折線圖，堆積折線圖，區域圖，堆積區域圖。 |
| bar | 柱形圖（縱向），堆積柱形圖，條形圖（橫向），堆積條形圖。 |
| scatter | 散點圖，氣泡圖。散點圖至少需要橫縱兩個數據，更高維度數據加入時可以映射為顏色或大小，當映射到大小時則為氣泡圖 |
| k | K線圖，蠟燭圖。常用於展現關系數據，外層為圓環圖，可體現數據占比關系，內層為各個扇形間互相連接的弦，可體現關系數據 |
| force | 力導布局圖。常用於展現復雜關系網絡聚類布局。 |
| map | 地圖。內置世界地圖、中國及中國34個省自治區地圖數據、可通過標准GeoJson擴展地圖類型。支持svg擴展類地圖應用，如室內地圖、運動場、物件構造等。 |
| heatmap | 熱力圖。用於展現密度分布信息，支持與地圖、百度地圖插件聯合使用。 |
| gauge | 儀表盤。用於展現關鍵指標數據，常見於BI類系統。 |
| funnel | 漏斗圖。用於展現數據經過篩選、過濾等流程處理后發生的數據變化，常見於BI類系統。 |
| evnetRiver | 事件河流圖。用於展示具有時間屬性的多個事件，以及事件隨時間的演化。 |
| treemap | 矩形式樹狀結構圖，簡稱：矩形樹圖。用於展示樹形數據結構，優勢是能最大限度展示節點的尺寸特征。 |
| venn | 韋恩圖。用於展示集合以及它們的交集。 |
| tree | 樹圖。用於展示樹形數據結構各節點的層級關系 |
| wordCloud | 詞雲是關鍵詞的視覺化描述，用於匯總用戶生成的標簽或一個網站的文字內容 |
PS：參考網站：https://echarts.apache.org/examples/zh/index.html#chart-type-bar