一.簡介
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
二.特點
1.豐富的可視化類型
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖，儀表盤，並且支持圖與圖之間的混搭。
除了已經內置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，只需要傳入一個renderItem函數，就可以從數據映射到任何你想要的圖形，更棒的是這些都還能和已有的交互組件結合使用而不需要操心其它事情。
你可以在下載界面下載包含所有圖表的構建文件，如果只是需要其中一兩個圖表，又嫌包含所有圖表的構建文件太大，也可以在在線構建中選擇需要的圖表類型后自定義構建。
2.多種數據格式無需轉化可以直接使用
ECharts 內置的 dataset 屬性（4.0+）支持直接傳入包括二維表，key-value 等多種格式的數據源，通過簡單的設置 encode 屬性就可以完成從數據到圖形的映射，這種方式更符合可視化的直覺，省去了大部分場景下數據轉換的步驟，而且多個組件能夠共享一份數據而不用克隆。
為了配合大數據量的展現，ECharts 還支持輸入 TypedArray 格式的數據，TypedArray 在大數據量的存儲中可以占用更少的內存，對 GC 友好等特性也可以大幅度提升可視化應用的性能。
3.千萬數據的前端展示
通過增量渲染技術（4.0+），配合各種細致的優化，ECharts 能夠展現千萬級的數據量，並且在這個數據量級依然能夠進行流暢的縮放平移等交互。
幾千萬的地理坐標數據就算使用二進制存儲也要占上百 MB 的空間。因此 ECharts 同時提供了對流加載（4.0+）的支持，你可以使用 WebSocket 或者對數據分塊后加載，加載多少渲染多少！不需要漫長地等待所有數據加載完再進行繪制。
4.跨平台
ECharts 支持以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。VML 可以兼容低版本 IE，SVG 使得移動端不再為內存擔憂，Canvas 可以輕松應對大數據量和特效的展現。不同的渲染方式提供了更多選擇，使得 ECharts 在各種場景下都有更好的表現。
除了 PC 和移動端的瀏覽器，ECharts 還能在 node 上配合 node-canvas 進行高效的服務端渲染（SSR）。從 4.0 開始我們還和微信小程序的團隊合作，提供了 ECharts 對小程序的適配！
5.多維數據的支持以及豐富的視覺編碼手段
ECharts 3 開始加強了對多維數據的支持。除了加入了平行坐標等常見的多維數據可視化工具外，對於傳統的散點圖等，傳入的數據也可以是多個維度的。配合視覺映射組件 visualMap 提供的豐富的視覺編碼，能夠將不同維度的數據映射到顏色，大小，透明度，明暗度等不同的視覺通道。
6.動態數據
ECharts 由數據驅動，數據的改變驅動圖表展現的改變。因此動態數據的實現也變得異常簡單，只需要獲取數據，填入數據，ECharts 會找到兩組數據之間的差異然后通過合適的動畫去表現數據的變化。配合 timeline 組件能夠在更高的時間維度上去表現數據的信息。
7.絢麗的特效
ECharts 針對線數據，點數據等地理數據的可視化提供了吸引眼球的特效。
三.代碼實現【柱狀圖】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ECharts入門</title> 6 </head> 7 <body> 8 <!-- 為ECharts准備一個具備大小（寬高）的DOM容器--> 9 <div id='main' style='width:800px;height:600px;'></div> 10 <!-- 引入ECharts文件 --> 11 <script src='js/echarts.js'></script> 12 <script> 13 //基於准備好的DOM，初始化echarts實例 14 var myChart =echarts.init(document.getElementById('main')); 15 //指定圖表的配置項和數據 16 var option = { 17 title:{ 18 text:'稽查工單熱詞top10', 19 textStyle:{ 20 color:'blue' 21 }, 22 subtext:'測試' 23 }, 24 //提示框組件 25 tooltip:{ 26 //坐標軸觸發，主要用於柱狀圖，折線圖等 27 trigger:'axis' 28 }, 29 //圖例 30 legend:{ 31 data:['頻度'] 32 }, 33 toolbox:{ 34 show:true, 35 feature:{ 36 mark:{show:true}, 37 dataView:{show:true,readOnly:false}, 38 magicType:{show:true,type:['line','bar']}, 39 restore:{show:true}, 40 saveAsImage:{show:true} 41 } 42 }, 43 calculable:true, 44 //橫軸 45 xAxis:{ 46 type:'category', 47 name:'高頻詞匯', 48 data:["稽查","流程","核實","問題","現場","質量","管理","用戶","系統","整改"], 49 axisLabel:{ 50 show:true, 51 textStyle:{ 52 fontSize:16 53 } 54 } 55 }, 56 //縱軸 57 yAxis:{ 58 type:'value', 59 name:'次數', 60 axisLabel:{ 61 show:true, 62 textStyle:{ 63 fontSize:16 64 } 65 } 66 }, 67 //系列列表。每個系列通過type決定自己的圖表類型 68 series:[{ 69 name:'次數', 70 type:'bar', 71 itemStyle:{ 72 normal:{ 73 color:function(params){ 74 var colorList = [ 75 '#CC252B','#B5C334','#FCCE10','#E87C25','#27727B', 76 '#FE8463','#9BCA63','#44D866','#F3A43B','#60C0DD' 77 ]; 78 return colorList[params.dataIndex] 79 }, 80 label:{ 81 show:true, 82 position:'top', 83 formatter:'{c}', 84 fontSize:16 85 } 86 } 87 }, 88 data:[236, 216, 186, 152, 132, 122, 121, 110, 101, 86] 89 //, 90 /*markPoint:{ 91 data:[ 92 {type:'max',name:'最大值'}, 93 {type:'min',name:'最小值'} 94 ] 95 } , 96 markLine:{ 97 data:[ 98 {type:'average',name:'平均值'} 99 ] 100 } */ 101 }] 102 }; 103 //使用剛指定的配置項和數據顯示圖表 104 myChart.setOption(option); 105 </script> 106 </body> 107 </html>
四.結果展示
