一、開篇
首先這里要感謝一下我的公司，因為公司需求上面的新穎(奇葩)的需求，讓我有幸可以學習到一些好玩有趣的前端技術，前端技術中好玩而且比較實用的我想應該要數前端的數據可視化這一方面，目前市面上的數據可視化的框架琳琅滿目，例如：D3.js、hightcharts.js、echarts.js…………。由於公司對這個項目的需求是1、開發時間短，所以也就限制了D3.js的使用。2、要盡量的減少開發的成本，所以也就不能使用hightcharts.js(hightcharts是一款個人免費，商業付費的框架)。所以在再三的比對之下最終選擇了echarts.js
二、echarts.js的優勢與總體情況
echarts.js作為國內的IT三巨頭之一的百度的推出一款相對較為成功的開源項目，總體上來說有這樣的一些優點
1、echarts.js容易使用
echarts.js的官方文檔比較詳細，而且官網中提供大量的使用示例供大家使用
2、echarts.js支持按需求打包
echarts.js官網提供了在線構建的工具，可以在線構建項目時，選擇項目所需要使用到的模塊，從而達到減小JS文件的體積
3、echarts.js開源
4、支持中國地圖功能
這個在其他的一些框架中是沒有的，所以為這個功能點個贊
但是echarts.js也存在着一些不好的地方，比如說：
1、echarts.js的體積較大
一個基礎的echarts.js都要400K左右，相對於D3.js和hightcharts.js來說都是比較大的
2、echarts.js的可定制性差
說到echarts.js的定制性差，其實不止是包括echarts.js，hightcharts.js也是如此，因為這一類型的數據可視化框架主要是高度的進行分裝，所以你在使用的時候只需要設置一下配置就可以了，但是如果是出現了要繪制配置中不支持的圖表怎么辦，那么你就只能放棄，嘗試着使用其他的框架了
總的來說:從大的方向上面來看，echarts.js還是值得去了解學習使用的，因為echarts.js得到了百度團隊的重視，在git上面的更新也是比較的頻繁，所以不會出現一些比較嚴重的bug之類的，最后這款框架一點就是框架的配置文件相當的詳細，但是交互API文檔雖然有說明，但是還是沒有示例來舉證，這個可能就是我認為的一個不足之處吧
三、echarts的應用
首先要說明一點是，echarts這個框架的配置內容很是多，所以不要嘗試着把這個框架中的方法都給記住，這是不太可能的事。但是由於這個框架的配置文件參數比較多，所以我們就需要來學習一下echarts是怎樣來對其進行分類的
1、首先echarts的圖形化呈現主要是通過配置方法來實現的(setOption),然后是對圖形標簽進行初始化，最后把配置方法(setOption)賦值到初始化圖形中，詳細的配置文件請戳這里，這里我就來介紹一下關於配置文件的學習的經驗之談，比較常見的配置大致如下圖：
上面用紅色方框標出來的就是echarts的基礎配置，也是我認為的學習echarts一定要掌握的配置，其他的一些配置比如什么時間軸.visualMap組件之類，我認為這些異曲同工，所以這一部分也就是只有在當你的業務需要使用的時候才加入，也就是說，這一部分的知識我認為到時候現炒現賣就可以了（更正：圖標懸停的提示內容應該更正為鼠標懸停的提示內容），下面我就來講解一下echarts.js的使用，首先我在官網中下載默認的精簡版，下載地址如下：http://echarts.baidu.com/builder.html，直接下載即可（建議在開發期間使用源碼版，方便調試）
3.1 echarts.js入門基礎小項目1
HTML和JavaScript代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts.js案例一</title> <script type="text/javascript" src='echarts.js'></script> </head> <body> <div id="chart" style="width:400px;height:400px;"></div> </body> <script type="text/javascript"> // 初始化圖表標簽 var myChart = echarts.init(document.getElementById('chart')); var options={ //定義一個標題 title:{ text:'測試成績' }, legend:{ data:['銷量'] }, //X軸設置 xAxis:{ data:['60分','70分','80分','90分','100分'] }, yAxis:{ }, //name=legend.data的時候才能顯示圖例 series:[{ name:'銷量', type:'bar', data:['12','32','45','21','1'] }] }; myChart.setOption(options); </script> </html>
運行效果如下圖，如果需要在線觀看的請戳這里
注意事項：這里案例是最基礎，但是里面還是有一個知識點來的，就是在使用echarts.js的時候一定要配置xAxis,yAxis,series這三個參數，如果是不想設置的話也要初始化可以將其設置為空JSON就可以了，要不然會出項報錯，同時要保證在echarts.init之前的對象是有寬高的，要不然也會出現錯誤
3.2 echarts.js多系列綜合使用DEMO
在講解這個案例之前，首先我們來假設一個命題，假設要統計一個商店一周的購買金額和一周的銷售金額，其中的購買金額用柱狀圖表示，銷售金額用折線圖表示，然后還要標出一周中最大值和最小值，同時還要求出銷售和購買的平均數，購買金額分別是[200,312,431,241,175,275,369]，銷售金額[321,432,543,376,286,298,400]
這個問題其實也不是很難，想一想，其實也就是一個把多個 系列圖表應用到一個畫布上面的過程，為了簡短文章的篇幅，所以把不貼出全部的代碼，僅貼出主要的其中關鍵的代碼，代碼如下：
series:[{ name:'購買金額', type:'bar', data:[200,312,431,241,175,275,369], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine:{ data:[ {type:'average',name:'平均值',itemStyle:{ normal:{ color:'green' } }} ] } },{ name:'銷售金額', type:'line', data:[321,432,543,376,286,298,400], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine:{ data:[ {type:'average',name:'平均值',itemStyle:{ normal:{ color:'blue' } }} ] } }]
實現效果：
如需看完整的代碼請戳這里，自行fork下來
3.3 echarts.js響應式實現
echarts響應式在echarts官網上面的介紹比較詳細，這里原理跟CSS3的媒體查詢有點類似，但是echarts.js的響應除了支持媒體查詢的在不同情況下面的相應還支持，根據長寬比來相應的方法，但是在官方文檔中還是有一點缺陷的，比如：一個是案例中的響應式沒有涉及到處理series之外的響應，另外一個是按照DEMO中去做，會發現每次都要刷新頁面才能出現響應的結果，所以下面我將寫一個簡單的案例來解決這些問題，數據樣式與上面的例子一樣
這里就把所有的JS代碼貼出來：
var echart=echarts.init(document.getElementById('main1')); var option={ baseOption:{ title:{ text:'模擬商店一周銷售情況', subtext:'虛擬數據' }, legend:{ data:['購買金額','銷售金額'] }, xAxis:{ data:['周一','周二','周三','周四','周五','周六','周日'] }, yAxis:{ }, tooltip:{ show:true, formatter:'系列名:{a}<br />類目:{b}<br />數值:{c}' }, series:[{ name:'購買金額', type:'bar', data:[200,312,431,241,175,275,369], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine:{ data:[ {type:'average',name:'平均值',itemStyle:{ normal:{ color:'green' } }} ] } },{ name:'銷售金額', type:'line', data:[321,432,543,376,286,298,400], markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine:{ data:[ {type:'average',name:'平均值',itemStyle:{ normal:{ color:'blue' } }} ] } }] }, media:[ { //小與1000像素時候響應 query:{ maxWidth:1000 }, option:{ title:{ show:true, text:'測試一下' } } } ] }; //每次窗口大小改變的時候都會觸發onresize事件，這個時候我們將echarts對象的尺寸賦值給窗口的大小這個屬性，從而實現圖表對象與窗口對象的尺寸一致的情況 window.onresize = echart.resize; echart.setOption(option);
效果展示：原本是想要展示GIF的，但是錄制的時候卡頓太嚴重所以也就只能發一下在無刷新的時候對比圖片
3.4 echarts的API交互
首先我們來理清官方文檔中的API的分類，大致的API可以分成這樣的四類
這里我們就來解釋一下echarts對象里面主要是包括一些銷毀對象(dispose)，注冊地圖(registerMap)，初始化對象(echarts.init),關聯對象(connect)，屬於全局屬性的設置，echartsInstance這個是包含echarts圖中的某些屬性的獲取或者設置，獲取寬高(getWidth、getHeight),獲取配置(getOption)，設置配置(setOption)等操作action和events這兩個操作在上圖中已經很明白了，所以就不多做解釋，具體的使用方法要與業務進行掛鈎才有意義，所以在這里就不提供DEMO了，我相信大家看一下文檔都能夠看懂個究竟。
四、echarts常見問題解決
1、當X軸上面要渲染的數據太多的時候就會出現只渲染出來一部分，但是圖表中的數據顯示(比如說柱狀圖中的每個柱子)又會自動的進行寬度的縮放，所以會導致X軸與圖中的信息不相匹配的問題，解決的方法是在X軸設置axisLabel :{ interval:0 }這個屬性問題就可以解決了，Y軸的使用方法相同
2、為了使echart圖表隨着瀏覽器的大小發生響應式變化，所以需要在設置配置之前添加 window.onresize = echart.resize; 具體參照3.3 示例
內容持續更新中，敬請期待
五、總結
雖然echarts在同類型的數據可視化框架中還算是比較的簡單易用的，但是在入手的時候可能也會有一些比較麻煩的地方困擾着你，比如文檔這么多我怎么看，實例已經比較齊全了我還需要看API文檔嗎，這些問題我想在這里統一的說一下，其實echarts的學習無外乎就是先了解一下框架大致上的分類，然后是在將全部的API閱讀以便，使對框架有一個全局的認識，然后在通過實踐去深入學習，示例只不過是這一步的一個輔助而已，只有扎扎實實的通過學習API一步一個腳印去了解學習，才能做到在使用的時候心中有底。以上的文章是博主在學習和項目中使用echarts的一些體會，希望對大家有幫助