arcgis api 3.x for js 之 echarts 開源 js 庫實作地圖統計圖分析（附源碼下載下傳）

前面寫過一篇關于arcgis api for js實作地圖統計圖的，具體見：http://www.cnblogs.com/giserhome/p/6727593.html

那是基于dojo元件來實作圖表統計的，實作的效果一般；是以，本篇利用arcgis api for js結合echarts實作統計圖效果，效果比之前好看

前言

關于本篇功能實作用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，裡面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是線上例子：esri 官網線上例子，這個也是學習 arcgis api 3.x 的好素材。

内容概覽

1. 基于 arcgis api 3.x 結合 echarts 開源 js 庫實作地圖統計圖分析
2. 源代碼 demo 下載下傳

前面寫過一篇關于arcgis api 3.x for js 實作地圖統計圖的，具體見：這裡

那是基于 dojo 元件來實作圖表統計的，實作的效果一般；是以，本篇利用 arcgis api 3.x 結合 echarts 實作統計圖效果，效果比之前好看，效果圖如下：

實作的思路

自定義氣泡視窗 ChartInfoWindow，繼承 InfoWindowBase，為了 echarts 統計圖表展示在自定義的氣泡視窗裡面；自定義氣泡視窗 ChartInfoWindow 是為了适應地圖上同時展示多個圖表，地圖預設的氣泡視窗隻能顯示一個，不能同時顯示多個的；

定義 ChartInfoWindow 的樣式，具體樣式如下：

.myInfoWindow {
position: absolute;

z-index: 100;

-moz-box-shadow: 0 0 1em #26393D;

font-family: sans-serif;

font-size: 12px;

background-color: rgba(255, 255, 255, 0);

}

/*.dj_ie .myInfoWindow {*/

/*border: 1px solid rgba(255, 255, 255, 0);*/


/*}*/


.myInfoWindow .content {


position: relative;


color:#002F2F;


overflow: auto;


padding:2px 2px 2px 2px;


background-color: rgba(255, 255, 255, 0);


}      

• 構造模拟資料：

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載下傳，對本專欄感興趣的話，可以關注一波

GIS之家作品店鋪：GIS之家作品店鋪

GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢