ECharts插件：官網下載echarts.js開發者可以選擇源碼。
下載地址：http://echarts.baidu.com/download.html
下載之后，echarts.js放在js文件夾，后續使用。
下載html模板：http://echarts.baidu.com/examples/index.html
在這里可以發現好多好用的模板。選擇一個自己喜歡的模板點擊進去，點擊Download
把下載的html文件打開，這時候html使用的是遠程的js文件，直接打開是有效果的，因為它可以訪問到，如果我們要放在程序中，盡量還是使用自己的本地的echarts.js，把下面截圖這些去掉，引用我們剛開始下載的echarts.js，
上圖注釋掉 ，添加
<script type="text/javascript" src="js/echarts.js"></script>
這時候打開html，就變成了我們想要的效果，喜歡哪個插件就去下載使用哪個插件吧。
下圖為替換好的效果圖
好了，自己想要的插件已經可以展示了，但是怎樣換成自己想要的數據呢？那我們要開始修改js了。每個html里面都有對應的js,這些js的作用就是把你想要展示的數據傳遞給插件，插件識別並且展示出效果。
我們拿地圖這個插件來講吧，它首先在地圖上面設置一些城市坐標，如下圖（好多城市，截圖沒有截完）
插件自帶的這些城市基本上能滿足需求，當然，你還可以自定義一些城市，同樣放置在這里，比如：
"女兒國":[101.05,23.08],
"烏雞國":[95.11,34.97],
"天竺":[122.02,37.93],
"四海八荒":[136.1,19.55],
把這些數據放在里面，同樣可以展示自己想要的效果。
接下來給對應城市賦值，值越大，則標記的圓點越大，在右邊的Top20排行越靠前，下面是模板賦值示例：
現在我們按照例子的方式給我們剛才自定義的幾個城市進行賦值，讓它們在地圖上面顯示出來。如果是后台穿過來的數據，可以通過for循環把值放到這個date里面賦值如下：
{name: "烏雞國", value: 400},
{name: "女兒國", value: 300},
{name: "四海八荒", value: 193},
{name: "天竺", value: 380},
賦值完畢，刷新頁面就可以了。效果如下圖，額......坐標位置的問題，大家自己調整哈。但是為什么不顯示“天竺”和“四海八荒”呢？因為我選擇的區域里面沒有“天竺”和“四海八荒”，這個是選中區域，對選中的區域進行top20展示的。
所以呢？我們框選全部區域如下圖：
發現框選全部區域之后，“女兒國”和“烏雞國”也沒有了，經過研究代碼發現，程序對選中的所有的值，取倒數30條（標題是Top20,但是程序里面是寫的30，此處可以手動修改下面會講），然后以從大到小的順序排序。
原代碼如下圖：
selectedItems是所有選擇的數據集合，maxBar是展示條數，maxBar=30則最多展示30條，maxBar=20則最多展示20條。我們拿30條來說，maxBar=30則通過for循環取selectedItems的前30條，因為selectedItems是按數據設置的value的值從小到大進行排序的，假如你選擇了40條，程序只展示前30條，那么最后10條最大的數據是展示不出來的，我們通過修改程序進行修復。修復方法如下：
for (var i = 0; i < Math.min(selectedItems.length, maxBar); i++) {
if(selectedItems.length-maxBar>0){
categoryData.push(selectedItems[selectedItems.length-maxBar+i].name);
barData.push(selectedItems[selectedItems.length-maxBar+i].value[2]);
}else{
categoryData.push(selectedItems[i].name);
barData.push(selectedItems[i].value[2]);
}
}
修復后效果如下圖：
圖中為什么沒有“四海八荒”呢？因為四海八荒設置的坐標太遠了，沒有框選到。
關於ECharts插件的使用，有不懂得可以查看ECharts的文檔，這里有關於ECharts的詳細解釋，閱讀參考文檔，再配合自己研究代碼，即可達到自己想要的效果。
附上文檔地址：http://echarts.baidu.com/api.html#echarts
完畢！