ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <!--為ECharts准備一個具備大小(寬高)的Dom--> 9 <div id="main" style="height:400px;"></div> 10 <!--ECharts單文件引入--> 11 <script src="echarts-all.js"></script> 12 <script type="text/javascript"> 13 //基於准備好的dom,初始化echarts圖表 14 var myChart=echarts.init(document.getElementById('main')); 15 16 //圖表使用 17 var option = { 18 tooltip : {//提示框,鼠標懸浮交互時的信息提示 19 trigger: 'item',//觸發類型,默認數據觸發,可選為:'axis' 20 formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示內容格式 21 }, 22 legend: {//圖例,每個圖表最多僅有一個圖例 23 orient : 'vertical',//布局方式,默認為水平布局,可選為:'horizontal'|'vertical' 24 x : 'left',//水平安放位置,默認為全圖居中,可選為:'center'|'left'|'right'|{number}(x坐標,單位px) 25 data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']//圖例內容數組,數組項通常為{string},每一項代表一個系列的name，默認布局到達邊緣會自動分行(列),傳入空字符串''可實現手動分行(列) 26 }, 27 toolbox: {//工具箱,每個圖表最多僅有一個工具箱 28 show : true,//顯示策略,默認只是false.可選為:true顯示|false隱藏 29 feature : {//啟用功能,目前支持feature，工具箱自定義功能回調處理. 30 mark : {show: true},//輔助線標志,此處啟用. 31 dataView : {//打開數據視圖，可設置更多屬性 32 show: true, 33 readOnly: false//readOnly默認數據視圖為只讀,可指定readOnly為false打開編輯功能 34 }, 35 magicType : {//動態類型切換,支持直角系下的折線圖,柱狀圖,堆積,平鋪轉換 36 show: true, 37 type: ['pie', 'funnel'],//餅圖,漏斗圖 38 option: {//圖表選項,包含圖表實例任何可配置選項:公共選項,組件選項,數據選項 39 funnel: {//漏斗圖配置 40 x: '25%', 41 width: '50%', 42 funnelAlign: 'center', 43 max: 1548 44 } 45 } 46 }, 47 restore : {show: true},//還原,復位原始圖表 48 saveAsImage : {show: true}//保存圖片IE8-不支持,上圖icon最右,可設置更多屬性. 49 } 50 }, 51 calculable : true,//是否啟用拖拽重計算特性,默認關閉 52 series : [//驅動圖表生成的數據內容數組,數組中每一項為一個系列的選項及數據 53 { 54 name:'訪問來源',//系列名稱 55 type:'pie',//圖表類型,折線圖line,散點圖scatter,柱狀圖bar,餅圖pie,雷達圖radar 56 radius : ['50%', '70%'],//半徑,支持絕對值px和百分比,百分比計算比,min(width, height)/2*75%,傳數組實現環形圖,[內半徑,外半徑] 57 itemStyle : {//圖形樣式,可設置圖表內圖形的默認樣式和強調樣式（懸浮時樣式） 58 normal : {//默認樣式 59 label : { 60 show : false 61 }, 62 labelLine : { 63 show : false 64 } 65 }, 66 emphasis : {//強調樣式 67 label : { 68 show : true, 69 position : 'center',//標簽顯示位置,地圖標簽不可指定位置 70 textStyle : { 71 fontSize : '30', 72 fontWeight : 'bold' 73 } 74 } 75 } 76 }, 77 data:[ 78 {value:335, name:'直接訪問'}, 79 {value:310, name:'郵件營銷'}, 80 {value:234, name:'聯盟廣告'}, 81 {value:135, name:'視頻廣告'}, 82 {value:1548, name:'搜索引擎'} 83 ] 84 } 85 ] 86 }; 87 88 //為echats對象加載數據 89 myChart.setOption(option); 90 </script> 91 </body> 92 </html>