現如今，Echarts在數據可視化方面早已升入化境，已經不再拘泥於簡單的餅圖柱狀圖，已然從平面直角座標系，擴展到了極座標系和地理座標系等等。
隨着地圖的使用越來越廣泛，統計圖與地圖結合的展示方式更加直觀，也更有視覺衝擊力。目前Echarts使用的是百度地圖，也可以自己註冊想要的地圖（GEOJSON格式），但終究不是在自己的地圖上進行統計圖的繪製，對於那些基於地圖開展業務的系統來說，很是不方便。
最近一個項目中需要在地圖上繪製熱力圖，地圖使用的是Arcgis的rest服務，Arcgis也提供了用於熱力圖繪製的API(HeatmapRenderer)，但效果不甚令人滿意。遂想到了Echarts，在Echarts提供的API中沒有找到針對Arcgis地圖的相關介紹，但在擴展下載中找到了wandergis提供的ArcGIS地圖擴展，這個擴展已經有人提供了散點圖和遷徙圖的Demo，效果很炫酷。於是準備拿來直接開幹，我準備好了數據，參照Demo和Echarts的API構造好了option，但熱力圖始終畫不出來，苦悶了很久，各種找bug，各種對比參數，無果。最後把大神寫的Echarts擴展文件main.js拿來研究，發現這樣一句代碼：
l=["bar","boxplot","candlestick","chord","effectScatter","funnel","gauge","lines","graph","line","map","parallel","pie","radar","sankey","scatter","treemap"]
而在echarts.js（3.0版本）中找到：
var COMPATITABLE_SERIES = [
'bar', 'boxplot', 'candlestick', 'chord', 'effectScatter',
'funnel', 'gauge', 'lines', 'graph', 'heatmap', 'line', 'map', 'parallel',
'pie', 'radar', 'sankey', 'scatter', 'treemap'
];
好傢伙，看來是main.js中沒有實現heatmap類型的統計圖功能，於是，在main.js中添加對heatmap的支持（當然，不僅僅是在l數組中添加heatmap那麼簡單，還有部分關鍵的實現代碼），OK，解決了。
下面來看看具體使用吧，其實大神的Demo中已經寫的很清楚了。
先給出文章中Demo的GitHub地址：點擊這裏
1.創建地圖容器
<style type="text/css">
html,body,#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
2.引入jquery,echarts以及echarts擴展文件
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<!--echartsExtent.js要在arcgis api前面引用，否則會報錯-->
<script type="text/javascript" src="js/echartsExtent.js"></script>
<script type="text/javascript">
/*
* 這個配置必須寫在加載arcgis api之前，否則不能生效
* location是一個絕對路徑，第一個斜槓前面會默認添加一級域名，所以後面要填上二級域名等等,
* 比如：http://localhost:8065/index.html，這種只需要寫"/js"即可；
* 而http://localhost:8065/EchartsHeatmapInArcgis/index.html這種就需要寫"/../js"或者"/EchartsHeatmapInArcgis/js"
*/
var dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "src",
"location": location.pathname.replace(/\/[^/]+$/, '') + "/js"
}]
};
</script>
Echarts擴展有兩個js文件，其中，Echarts3Layer.js用來創建用於繪製統計圖的圖層，echartsExtent.js用來完成統計圖的繪製。這兩個文件都必須在arcgis api引用前先引用，否則會報錯。
Echarts3Layer.js採用了模塊化編程，引用的時候有兩種方式。第一種方式是把文件直接放到arcgis api的init.js文件所在的目錄，這樣在加載的時候直接使用：
dojo.require("Echarts3Layer");
第二種方式是把文件放到項目中，這樣的話需要定義dojoConfig來指定文件路徑，路徑取名爲"src"，路徑值location爲：網站路徑+相對路徑；這裏必須強調一下，location必須要用 location.pathname.replace(/\/[^/]+$/, '') 取得網站路徑，否則在有二級域名的情況下直接使用文件相對路徑是無法找到文件的，這個虧吃過一次後會記得更清晰，哈哈。加載方法爲：
dojo.require("src/Echarts3Layer");
3.引入arcgis api
<link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css" />
<script src="https://js.arcgis.com/3.19/"></script>
到這一步後，整個頁面完整代碼爲：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在ArcGis地圖中繪製Echarts熱力圖</title>
<!--
作者：tsq
時間：2018-08-30
描述：在ArcGis地圖中繪製Echarts熱力圖 Demo
-->
<style type="text/css">
html,body,#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<!--
作者：tsq
時間：2018-08-29
描述：echartsExtent.js要在arcgis api前面引用，否則會報錯
-->
<script type="text/javascript" src="js/echartsExtent.js"></script>
<script type="text/javascript">
/*
* 這個配置必須寫在加載arcgis api之前，否則不能生效
* location是一個絕對路徑，第一個斜槓前面會默認添加一級域名，所以後面要填上二級域名等等,
* 比如：http://localhost:8065/index.html，這種只需要寫"/js"即可；
* 而http://localhost:8065/EchartsHeatmapInArcgis/index.html這種就需要寫"/../js"或者"/EchartsHeatmapInArcgis/js"
*/
var dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "src",
"location": location.pathname.replace(/\/[^/]+$/, '') + "/js"
}]
};
</script>
<script src="https://js.arcgis.com/3.19/"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
4.創建地圖map
首先加載arcgis的地圖模塊和我們的Echarts3Layer，必須等到“萬事俱備”的時候纔可以繼續我們的後續操作，否則將會有一系列報錯。“萬事俱備”意味着Dom樹加載完成，dojo庫以及所有依賴模塊也都加載完成。這裏使用dojo.ready()函數，不用擔心瀏覽器之間的差異。
dojo.require("esri.map");
dojo.require("src/Echarts3Layer");
var map,echartsLayer;
dojo.ready(function() {
//創建地圖
map = new esri.Map('map', {
basemap: 'dark-gray',
center: [120.15785586158, 30.269122098642],
zoom: 12,
navigationMode: "css-transform",
force3DTransforms: true,
logo: false,
fitExtent: true,
fadeOnZoom: true,
slider: false
});
});
在這裏，我使用的是"dark-gray"背景圖，關於地圖的創建不作過多闡述。
5.創建Echarts圖層
//地圖加載完成後初始化Echarts圖層
dojo.connect(map, 'onLoad', function (themap) {
//這裏在地圖上創建統計圖圖層，以後統計圖的繪製將從這裏進入
var overlay = new Echarts3Layer(map, echarts);
var chartsContainer = overlay.getEchartsContainer();
var myChart = overlay.initECharts(chartsContainer);
window.onresize = myChart.onresize;//似乎是然並卵，後面會介紹resize辦法
});
6.繪製統計圖
在Echarts官網Copy了一些示例數據，如有違反什麼制度侵權啥的請告知，本人將立馬整改。
var geoValue = [
{ name: "海門", value: 9 },
{ name: "鄂爾多斯", value: 12 },
{ name: "招遠", value: 12 },
{ name: "舟山", value: 12 },
{ name: "齊齊哈爾", value: 14 },
{ name: "鹽城", value: 15 },
{ name: "赤峯", value: 16 },
{ name: "青島", value: 18 },
{ name: "乳山", value: 18 },
{ name: "金昌", value: 19 },
{ name: "泉州", value: 21 },
{ name: "萊西", value: 21 },
{ name: "日照", value: 21 },
{ name: "膠南", value: 22 },
{ name: "南通", value: 23 },
{ name: "拉薩", value: 24 },
{ name: "雲浮", value: 24 },
{ name: "梅州", value: 25 },
{ name: "文登", value: 25 },
{ name: "上海", value: 25 },
{ name: "攀枝花", value: 25 },
{ name: "威海", value: 25 },
{ name: "承德", value: 25 },
{ name: "廈門", value: 26 },
{ name: "汕尾", value: 26 },
{ name: "潮州", value: 26 },
{ name: "丹東", value: 27 },
{ name: "太倉", value: 27 },
{ name: "曲靖", value: 27 },
{ name: "煙臺", value: 28 },
{ name: "福州", value: 29 },
{ name: "瓦房店", value: 30 },
{ name: "即墨", value: 30 },
{ name: "撫順", value: 31 },
{ name: "玉溪", value: 31 },
{ name: "張家口", value: 31 },
{ name: "陽泉", value: 31 },
{ name: "萊州", value: 32 },
{ name: "湖州", value: 32 },
{ name: "汕頭", value: 32 },
{ name: "崑山", value: 33 },
{ name: "寧波", value: 33 },
{ name: "湛江", value: 33 },
{ name: "揭陽", value: 34 },
{ name: "榮成", value: 34 },
{ name: "連雲港", value: 35 },
{ name: "葫蘆島", value: 35 },
{ name: "常熟", value: 36 },
{ name: "東莞", value: 36 },
{ name: "河源", value: 36 },
{ name: "淮安", value: 36 },
{ name: "泰州", value: 36 },
{ name: "南寧", value: 37 },
{ name: "營口", value: 37 },
{ name: "惠州", value: 37 },
{ name: "江陰", value: 37 },
{ name: "蓬萊", value: 37 },
{ name: "韶關", value: 38 },
{ name: "嘉峪關", value: 38 },
{ name: "廣州", value: 38 },
{ name: "延安", value: 38 },
{ name: "太原", value: 39 },
{ name: "清遠", value: 39 },
{ name: "中山", value: 39 },
{ name: "昆明", value: 39 },
{ name: "壽光", value: 40 },
{ name: "盤錦", value: 40 },
{ name: "長治", value: 41 },
{ name: "深圳", value: 41 },
{ name: "珠海", value: 42 },
{ name: "宿遷", value: 43 },
{ name: "咸陽", value: 43 },
{ name: "銅川", value: 44 },
{ name: "平度", value: 44 },
{ name: "佛山", value: 44 },
{ name: "海口", value: 44 },
{ name: "江門", value: 45 },
{ name: "章丘", value: 45 },
{ name: "肇慶", value: 46 },
{ name: "大連", value: 47 },
{ name: "臨汾", value: 47 },
{ name: "吳江", value: 47 },
{ name: "石嘴山", value: 49 },
{ name: "瀋陽", value: 50 },
{ name: "蘇州", value: 50 },
{ name: "茂名", value: 50 },
{ name: "嘉興", value: 51 },
{ name: "長春", value: 51 },
{ name: "膠州", value: 52 },
{ name: "銀川", value: 52 },
{ name: "張家港", value: 52 },
{ name: "三門峽", value: 53 },
{ name: "錦州", value: 54 },
{ name: "南昌", value: 54 },
{ name: "柳州", value: 54 },
{ name: "三亞", value: 54 },
{ name: "自貢", value: 56 },
{ name: "吉林", value: 56 },
{ name: "陽江", value: 57 },
{ name: "瀘州", value: 57 },
{ name: "西寧", value: 57 },
{ name: "宜賓", value: 58 },
{ name: "呼和浩特", value: 58 },
{ name: "成都", value: 58 },
{ name: "大同", value: 58 },
{ name: "鎮江", value: 59 },
{ name: "桂林", value: 59 },
{ name: "張家界", value: 59 },
{ name: "宜興", value: 59 },
{ name: "北海", value: 60 },
{ name: "西安", value: 61 },
{ name: "金壇", value: 62 },
{ name: "東營", value: 62 },
{ name: "牡丹江", value: 63 },
{ name: "遵義", value: 63 },
{ name: "紹興", value: 63 },
{ name: "揚州", value: 64 },
{ name: "常州", value: 64 },
{ name: "濰坊", value: 65 },
{ name: "重慶", value: 66 },
{ name: "台州", value: 67 },
{ name: "南京", value: 67 },
{ name: "濱州", value: 70 },
{ name: "貴陽", value: 71 },
{ name: "無錫", value: 71 },
{ name: "本溪", value: 71 },
{ name: "克拉瑪依", value: 72 },
{ name: "渭南", value: 72 },
{ name: "馬鞍山", value: 72 },
{ name: "寶雞", value: 72 },
{ name: "焦作", value: 75 },
{ name: "句容", value: 75 },
{ name: "北京", value: 79 },
{ name: "徐州", value: 79 },
{ name: "衡水", value: 80 },
{ name: "包頭", value: 80 },
{ name: "綿陽", value: 80 },
{ name: "烏魯木齊", value: 84 },
{ name: "棗莊", value: 84 },
{ name: "杭州", value: 84 },
{ name: "淄博", value: 85 },
{ name: "鞍山", value: 86 },
{ name: "溧陽", value: 86 },
{ name: "庫爾勒", value: 86 },
{ name: "安陽", value: 90 },
{ name: "開封", value: 90 },
{ name: "濟南", value: 92 },
{ name: "德陽", value: 93 },
{ name: "溫州", value: 95 },
{ name: "九江", value: 96 },
{ name: "邯鄲", value: 98 },
{ name: "臨安", value: 99 },
{ name: "蘭州", value: 99 },
{ name: "滄州", value: 100 },
{ name: "臨沂", value: 103 },
{ name: "南充", value: 104 },
{ name: "天津", value: 105 },
{ name: "富陽", value: 106 },
{ name: "泰安", value: 112 },
{ name: "諸暨", value: 112 },
{ name: "鄭州", value: 113 },
{ name: "哈爾濱", value: 114 },
{ name: "聊城", value: 116 },
{ name: "蕪湖", value: 117 },
{ name: "唐山", value: 119 },
{ name: "平頂山", value: 119 },
{ name: "邢臺", value: 119 },
{ name: "德州", value: 120 },
{ name: "濟寧", value: 120 },
{ name: "荊州", value: 127 },
{ name: "宜昌", value: 130 },
{ name: "義烏", value: 132 },
{ name: "麗水", value: 133 },
{ name: "洛陽", value: 134 },
{ name: "秦皇島", value: 136 },
{ name: "株洲", value: 143 },
{ name: "石家莊", value: 147 },
{ name: "萊蕪", value: 148 },
{ name: "常德", value: 152 },
{ name: "保定", value: 153 },
{ name: "湘潭", value: 154 },
{ name: "金華", value: 157 },
{ name: "岳陽", value: 169 },
{ name: "長沙", value: 175 },
{ name: "衢州", value: 177 },
{ name: "廊坊", value: 193 },
{ name: "菏澤", value: 194 },
{ name: "合肥", value: 229 },
{ name: "武漢", value: 273 },
{ name: "大慶", value: 279 }
];
var geoCoordMap = {
"海門": [121.15, 31.89],
"鄂爾多斯": [109.781327, 39.608266],
"招遠": [120.38, 37.35],
"舟山": [122.207216, 29.985295],
"齊齊哈爾": [123.97, 47.33],
"鹽城": [120.13, 33.38],
"赤峯": [118.87, 42.28],
"青島": [120.33, 36.07],
"乳山": [121.52, 36.89],
"金昌": [102.188043, 38.520089],
"泉州": [118.58, 24.93],
"萊西": [120.53, 36.86],
"日照": [119.46, 35.42],
"膠南": [119.97, 35.88],
"南通": [121.05, 32.08],
"拉薩": [91.11, 29.97],
"雲浮": [112.02, 22.93],
"梅州": [116.1, 24.55],
"文登": [122.05, 37.2],
"上海": [121.48, 31.22],
"攀枝花": [101.718637, 26.582347],
"威海": [122.1, 37.5],
"承德": [117.93, 40.97],
"廈門": [118.1, 24.46],
"汕尾": [115.375279, 22.786211],
"潮州": [116.63, 23.68],
"丹東": [124.37, 40.13],
"太倉": [121.1, 31.45],
"曲靖": [103.79, 25.51],
"煙臺": [121.39, 37.52],
"福州": [119.3, 26.08],
"瓦房店": [121.979603, 39.627114],
"即墨": [120.45, 36.38],
"撫順": [123.97, 41.97],
"玉溪": [102.52, 24.35],
"張家口": [114.87, 40.82],
"陽泉": [113.57, 37.85],
"萊州": [119.942327, 37.177017],
"湖州": [120.1, 30.86],
"汕頭": [116.69, 23.39],
"崑山": [120.95, 31.39],
"寧波": [121.56, 29.86],
"湛江": [110.359377, 21.270708],
"揭陽": [116.35, 23.55],
"榮成": [122.41, 37.16],
"連雲港": [119.16, 34.59],
"葫蘆島": [120.836932, 40.711052],
"常熟": [120.74, 31.64],
"東莞": [113.75, 23.04],
"河源": [114.68, 23.73],
"淮安": [119.15, 33.5],
"泰州": [119.9, 32.49],
"南寧": [108.33, 22.84],
"營口": [122.18, 40.65],
"惠州": [114.4, 23.09],
"江陰": [120.26, 31.91],
"蓬萊": [120.75, 37.8],
"韶關": [113.62, 24.84],
"嘉峪關": [98.289152, 39.77313],
"廣州": [113.23, 23.16],
"延安": [109.47, 36.6],
"太原": [112.53, 37.87],
"清遠": [113.01, 23.7],
"中山": [113.38, 22.52],
"昆明": [102.73, 25.04],
"壽光": [118.73, 36.86],
"盤錦": [122.070714, 41.119997],
"長治": [113.08, 36.18],
"深圳": [114.07, 22.62],
"珠海": [113.52, 22.3],
"宿遷": [118.3, 33.96],
"咸陽": [108.72, 34.36],
"銅川": [109.11, 35.09],
"平度": [119.97, 36.77],
"佛山": [113.11, 23.05],
"海口": [110.35, 20.02],
"江門": [113.06, 22.61],
"章丘": [117.53, 36.72],
"肇慶": [112.44, 23.05],
"大連": [121.62, 38.92],
"臨汾": [111.5, 36.08],
"吳江": [120.63, 31.16],
"石嘴山": [106.39, 39.04],
"瀋陽": [123.38, 41.8],
"蘇州": [120.62, 31.32],
"茂名": [110.88, 21.68],
"嘉興": [120.76, 30.77],
"長春": [125.35, 43.88],
"膠州": [120.03336, 36.264622],
"銀川": [106.27, 38.47],
"張家港": [120.555821, 31.875428],
"三門峽": [111.19, 34.76],
"錦州": [121.15, 41.13],
"南昌": [115.89, 28.68],
"柳州": [109.4, 24.33],
"三亞": [109.511909, 18.252847],
"自貢": [104.778442, 29.33903],
"吉林": [126.57, 43.87],
"陽江": [111.95, 21.85],
"瀘州": [105.39, 28.91],
"西寧": [101.74, 36.56],
"宜賓": [104.56, 29.77],
"呼和浩特": [111.65, 40.82],
"成都": [104.06, 30.67],
"大同": [113.3, 40.12],
"鎮江": [119.44, 32.2],
"桂林": [110.28, 25.29],
"張家界": [110.479191, 29.117096],
"宜興": [119.82, 31.36],
"北海": [109.12, 21.49],
"西安": [108.95, 34.27],
"金壇": [119.56, 31.74],
"東營": [118.49, 37.46],
"牡丹江": [129.58, 44.6],
"遵義": [106.9, 27.7],
"紹興": [120.58, 30.01],
"揚州": [119.42, 32.39],
"常州": [119.95, 31.79],
"濰坊": [119.1, 36.62],
"重慶": [106.54, 29.59],
"台州": [121.420757, 28.656386],
"南京": [118.78, 32.04],
"濱州": [118.03, 37.36],
"貴陽": [106.71, 26.57],
"無錫": [120.29, 31.59],
"本溪": [123.73, 41.3],
"克拉瑪依": [84.77, 45.59],
"渭南": [109.5, 34.52],
"馬鞍山": [118.48, 31.56],
"寶雞": [107.15, 34.38],
"焦作": [113.21, 35.24],
"句容": [119.16, 31.95],
"北京": [116.46, 39.92],
"徐州": [117.2, 34.26],
"衡水": [115.72, 37.72],
"包頭": [110, 40.58],
"綿陽": [104.73, 31.48],
"烏魯木齊": [87.68, 43.77],
"棗莊": [117.57, 34.86],
"杭州": [120.19, 30.26],
"淄博": [118.05, 36.78],
"鞍山": [122.85, 41.12],
"溧陽": [119.48, 31.43],
"庫爾勒": [86.06, 41.68],
"安陽": [114.35, 36.1],
"開封": [114.35, 34.79],
"濟南": [117, 36.65],
"德陽": [104.37, 31.13],
"溫州": [120.65, 28.01],
"九江": [115.97, 29.71],
"邯鄲": [114.47, 36.6],
"臨安": [119.72, 30.23],
"蘭州": [103.73, 36.03],
"滄州": [116.83, 38.33],
"臨沂": [118.35, 35.05],
"南充": [106.110698, 30.837793],
"天津": [117.2, 39.13],
"富陽": [119.95, 30.07],
"泰安": [117.13, 36.18],
"諸暨": [120.23, 29.71],
"鄭州": [113.65, 34.76],
"哈爾濱": [126.63, 45.75],
"聊城": [115.97, 36.45],
"蕪湖": [118.38, 31.33],
"唐山": [118.02, 39.63],
"平頂山": [113.29, 33.75],
"邢臺": [114.48, 37.05],
"德州": [116.29, 37.45],
"濟寧": [116.59, 35.38],
"荊州": [112.239741, 30.335165],
"宜昌": [111.3, 30.7],
"義烏": [120.06, 29.32],
"麗水": [119.92, 28.45],
"洛陽": [112.44, 34.7],
"秦皇島": [119.57, 39.95],
"株洲": [113.16, 27.83],
"石家莊": [114.48, 38.03],
"萊蕪": [117.67, 36.19],
"常德": [111.69, 29.05],
"保定": [115.48, 38.85],
"湘潭": [112.91, 27.87],
"金華": [119.64, 29.12],
"岳陽": [113.09, 29.37],
"長沙": [113, 28.21],
"衢州": [118.88, 28.97],
"廊坊": [116.7, 39.53],
"菏澤": [115.480656, 35.23375],
"合肥": [117.27, 31.86],
"武漢": [114.31, 30.52],
"大慶": [125.03, 46.58]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push(geoCoord.concat(data[i].value));
}
}
return res;
};
構建好option，要注意的是，backgroundColor必須設置成透明的，不然會遮擋住下面的地圖；geo中的map設爲空值，最好把show設爲false。
var option = {
title: {
text: '全國主要城市空氣質量',
subtext: '作者：喬二哥',
sublink: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
backgroundColor: 'rgba(128, 128, 128, 0)',
visualMap: {
min: 0,
max: 500,
show: true,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
},
textStyle: {
color: '#fff'
}
},
geo: {
map: '',
show: false,
label: {
emphasis: {
show: false
}
},
left: 0,
top: 0,
right: 0,
bottom: 0,
roam: false,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
type: 'heatmap', //effectScatter
coordinateSystem: 'geo',
data: convertData(geoValue),
pointSize: 10,
blurSize: 10
}]
};
繪圖的時候調用 overlay 的setOption方法，而不是前面的myChart。
overlay.setOption(option);
7. 最終的效果
可以調整visualMap的取值範圍，以及series的pointSize和blurSize來調整統計圖的效果，pointSize是點的大小，blurSize是模糊半徑。
下面是我把所有的值設置爲1，visualMap取值範圍設置爲0-2，pointSize設置爲10，blurSize設置爲8之後的效果：
8.添加窗口縮放方法 resize
這個resize方法僅僅是對統計圖和統計圖容器div進行了resize操作，如果還有其他內容在窗口大小發生改變時需要做調整，這個視情況自己擴展。
$(window).on("resize", function () {
resize();
});
function resize() {
if (echartsLayer) {
var myEchart = echartsLayer.getECharts(), //echarts對象
$myEchartContainer = $(echartsLayer.getEchartsContainer()), //echarts統計圖所在的div
myMap = echartsLayer.getMap(); //地圖
var $myMapContainer = $(myMap.container); //地圖所在div
var width = $myMapContainer.width(),
height = $myMapContainer.height(); //獲取地圖的寬高
$myEchartContainer.width(width); //設置統計圖容器的寬高爲地圖容器的寬高
$myEchartContainer.height(height);
myEchart.resize(); //調用echarts的resize方法
}
}
9.添加清空方法 clear
目前還沒想到比較好的clear辦法，在需要clear的時候我的處理是從新執行一次繪圖操作，並且傳入的data是一個空的二維數組，以達到清除的效果。如果哪位大神發現了真正的clear方法請告知，我也學習一下。
function clear() {
if (echartsLayer) {
var opt = option;
opt.series = [{
type: 'heatmap',
coordinateSystem: 'geo',
data: [[]], //傳入空數據，以達到清除原有統計圖的效果
pointSize: 10,
blurSize: 8
}];
echartsLayer.setOption(opt);
}
}
10.添加移除統計圖方法 remove
function remove() {
if (echartsLayer) {
var $echartsContainer = $(echartsLayer.getEchartsContainer());
//移除圖層容器以達到刪除統計的效果
$echartsContainer.remove();
}
}
11. 完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在ArcGis地圖中繪製Echarts熱力圖</title>
<!--
作者：tsq
時間：2018-08-30
描述：在ArcGis地圖中繪製Echarts熱力圖 Demo
-->
<style type="text/css">
html,
body,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<!--
作者：tsq
時間：2018-08-29
描述：echartsExtent.js要在arcgis api前面引用，否則會報錯
-->
<script type="text/javascript" src="js/echartsExtent.js"></script>
<script type="text/javascript">
/*
* 這個配置必須寫在加載arcgis api之前，否則不能生效
* location是一個絕對路徑，第一個斜槓前面會默認添加一級域名，所以後面要填上二級域名等等,
* 比如：http://localhost:8065/index.html，這種只需要寫"/js"即可；
* 而http://localhost:8065/EchartsHeatmapInArcgis/index.html這種就需要寫"/../js"或者"/EchartsHeatmapInArcgis/js"
*/
var dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "src",
"location": location.pathname.replace(/\/[^/]+$/, '') + "/js"
}]
};
</script>
<script src="https://js.arcgis.com/3.19/"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("src/Echarts3Layer");
var map, echartsLayer;
var geoCoordMap = {
"海門": [121.15, 31.89],
"鄂爾多斯": [109.781327, 39.608266],
"招遠": [120.38, 37.35],
"舟山": [122.207216, 29.985295],
"齊齊哈爾": [123.97, 47.33],
"鹽城": [120.13, 33.38],
"赤峯": [118.87, 42.28],
"青島": [120.33, 36.07],
"乳山": [121.52, 36.89],
"金昌": [102.188043, 38.520089],
"泉州": [118.58, 24.93],
"萊西": [120.53, 36.86],
"日照": [119.46, 35.42],
"膠南": [119.97, 35.88],
"南通": [121.05, 32.08],
"拉薩": [91.11, 29.97],
"雲浮": [112.02, 22.93],
"梅州": [116.1, 24.55],
"文登": [122.05, 37.2],
"上海": [121.48, 31.22],
"攀枝花": [101.718637, 26.582347],
"威海": [122.1, 37.5],
"承德": [117.93, 40.97],
"廈門": [118.1, 24.46],
"汕尾": [115.375279, 22.786211],
"潮州": [116.63, 23.68],
"丹東": [124.37, 40.13],
"太倉": [121.1, 31.45],
"曲靖": [103.79, 25.51],
"煙臺": [121.39, 37.52],
"福州": [119.3, 26.08],
"瓦房店": [121.979603, 39.627114],
"即墨": [120.45, 36.38],
"撫順": [123.97, 41.97],
"玉溪": [102.52, 24.35],
"張家口": [114.87, 40.82],
"陽泉": [113.57, 37.85],
"萊州": [119.942327, 37.177017],
"湖州": [120.1, 30.86],
"汕頭": [116.69, 23.39],
"崑山": [120.95, 31.39],
"寧波": [121.56, 29.86],
"湛江": [110.359377, 21.270708],
"揭陽": [116.35, 23.55],
"榮成": [122.41, 37.16],
"連雲港": [119.16, 34.59],
"葫蘆島": [120.836932, 40.711052],
"常熟": [120.74, 31.64],
"東莞": [113.75, 23.04],
"河源": [114.68, 23.73],
"淮安": [119.15, 33.5],
"泰州": [119.9, 32.49],
"南寧": [108.33, 22.84],
"營口": [122.18, 40.65],
"惠州": [114.4, 23.09],
"江陰": [120.26, 31.91],
"蓬萊": [120.75, 37.8],
"韶關": [113.62, 24.84],
"嘉峪關": [98.289152, 39.77313],
"廣州": [113.23, 23.16],
"延安": [109.47, 36.6],
"太原": [112.53, 37.87],
"清遠": [113.01, 23.7],
"中山": [113.38, 22.52],
"昆明": [102.73, 25.04],
"壽光": [118.73, 36.86],
"盤錦": [122.070714, 41.119997],
"長治": [113.08, 36.18],
"深圳": [114.07, 22.62],
"珠海": [113.52, 22.3],
"宿遷": [118.3, 33.96],
"咸陽": [108.72, 34.36],
"銅川": [109.11, 35.09],
"平度": [119.97, 36.77],
"佛山": [113.11, 23.05],
"海口": [110.35, 20.02],
"江門": [113.06, 22.61],
"章丘": [117.53, 36.72],
"肇慶": [112.44, 23.05],
"大連": [121.62, 38.92],
"臨汾": [111.5, 36.08],
"吳江": [120.63, 31.16],
"石嘴山": [106.39, 39.04],
"瀋陽": [123.38, 41.8],
"蘇州": [120.62, 31.32],
"茂名": [110.88, 21.68],
"嘉興": [120.76, 30.77],
"長春": [125.35, 43.88],
"膠州": [120.03336, 36.264622],
"銀川": [106.27, 38.47],
"張家港": [120.555821, 31.875428],
"三門峽": [111.19, 34.76],
"錦州": [121.15, 41.13],
"南昌": [115.89, 28.68],
"柳州": [109.4, 24.33],
"三亞": [109.511909, 18.252847],
"自貢": [104.778442, 29.33903],
"吉林": [126.57, 43.87],
"陽江": [111.95, 21.85],
"瀘州": [105.39, 28.91],
"西寧": [101.74, 36.56],
"宜賓": [104.56, 29.77],
"呼和浩特": [111.65, 40.82],
"成都": [104.06, 30.67],
"大同": [113.3, 40.12],
"鎮江": [119.44, 32.2],
"桂林": [110.28, 25.29],
"張家界": [110.479191, 29.117096],
"宜興": [119.82, 31.36],
"北海": [109.12, 21.49],
"西安": [108.95, 34.27],
"金壇": [119.56, 31.74],
"東營": [118.49, 37.46],
"牡丹江": [129.58, 44.6],
"遵義": [106.9, 27.7],
"紹興": [120.58, 30.01],
"揚州": [119.42, 32.39],
"常州": [119.95, 31.79],
"濰坊": [119.1, 36.62],
"重慶": [106.54, 29.59],
"台州": [121.420757, 28.656386],
"南京": [118.78, 32.04],
"濱州": [118.03, 37.36],
"貴陽": [106.71, 26.57],
"無錫": [120.29, 31.59],
"本溪": [123.73, 41.3],
"克拉瑪依": [84.77, 45.59],
"渭南": [109.5, 34.52],
"馬鞍山": [118.48, 31.56],
"寶雞": [107.15, 34.38],
"焦作": [113.21, 35.24],
"句容": [119.16, 31.95],
"北京": [116.46, 39.92],
"徐州": [117.2, 34.26],
"衡水": [115.72, 37.72],
"包頭": [110, 40.58],
"綿陽": [104.73, 31.48],
"烏魯木齊": [87.68, 43.77],
"棗莊": [117.57, 34.86],
"杭州": [120.19, 30.26],
"淄博": [118.05, 36.78],
"鞍山": [122.85, 41.12],
"溧陽": [119.48, 31.43],
"庫爾勒": [86.06, 41.68],
"安陽": [114.35, 36.1],
"開封": [114.35, 34.79],
"濟南": [117, 36.65],
"德陽": [104.37, 31.13],
"溫州": [120.65, 28.01],
"九江": [115.97, 29.71],
"邯鄲": [114.47, 36.6],
"臨安": [119.72, 30.23],
"蘭州": [103.73, 36.03],
"滄州": [116.83, 38.33],
"臨沂": [118.35, 35.05],
"南充": [106.110698, 30.837793],
"天津": [117.2, 39.13],
"富陽": [119.95, 30.07],
"泰安": [117.13, 36.18],
"諸暨": [120.23, 29.71],
"鄭州": [113.65, 34.76],
"哈爾濱": [126.63, 45.75],
"聊城": [115.97, 36.45],
"蕪湖": [118.38, 31.33],
"唐山": [118.02, 39.63],
"平頂山": [113.29, 33.75],
"邢臺": [114.48, 37.05],
"德州": [116.29, 37.45],
"濟寧": [116.59, 35.38],
"荊州": [112.239741, 30.335165],
"宜昌": [111.3, 30.7],
"義烏": [120.06, 29.32],
"麗水": [119.92, 28.45],
"洛陽": [112.44, 34.7],
"秦皇島": [119.57, 39.95],
"株洲": [113.16, 27.83],
"石家莊": [114.48, 38.03],
"萊蕪": [117.67, 36.19],
"常德": [111.69, 29.05],
"保定": [115.48, 38.85],
"湘潭": [112.91, 27.87],
"金華": [119.64, 29.12],
"岳陽": [113.09, 29.37],
"長沙": [113, 28.21],
"衢州": [118.88, 28.97],
"廊坊": [116.7, 39.53],
"菏澤": [115.480656, 35.23375],
"合肥": [117.27, 31.86],
"武漢": [114.31, 30.52],
"大慶": [125.03, 46.58]
};
var geoValue = [{
name: "海門",
value: 9
},
{
name: "鄂爾多斯",
value: 12
},
{
name: "招遠",
value: 12
},
{
name: "舟山",
value: 12
},
{
name: "齊齊哈爾",
value: 14
},
{
name: "鹽城",
value: 15
},
{
name: "赤峯",
value: 16
},
{
name: "青島",
value: 18
},
{
name: "乳山",
value: 18
},
{
name: "金昌",
value: 19
},
{
name: "泉州",
value: 21
},
{
name: "萊西",
value: 21
},
{
name: "日照",
value: 21
},
{
name: "膠南",
value: 22
},
{
name: "南通",
value: 23
},
{
name: "拉薩",
value: 24
},
{
name: "雲浮",
value: 24
},
{
name: "梅州",
value: 25
},
{
name: "文登",
value: 25
},
{
name: "上海",
value: 25
},
{
name: "攀枝花",
value: 25
},
{
name: "威海",
value: 25
},
{
name: "承德",
value: 25
},
{
name: "廈門",
value: 26
},
{
name: "汕尾",
value: 26
},
{
name: "潮州",
value: 26
},
{
name: "丹東",
value: 27
},
{
name: "太倉",
value: 27
},
{
name: "曲靖",
value: 27
},
{
name: "煙臺",
value: 28
},
{
name: "福州",
value: 29
},
{
name: "瓦房店",
value: 30
},
{
name: "即墨",
value: 30
},
{
name: "撫順",
value: 31
},
{
name: "玉溪",
value: 31
},
{
name: "張家口",
value: 31
},
{
name: "陽泉",
value: 31
},
{
name: "萊州",
value: 32
},
{
name: "湖州",
value: 32
},
{
name: "汕頭",
value: 32
},
{
name: "崑山",
value: 33
},
{
name: "寧波",
value: 33
},
{
name: "湛江",
value: 33
},
{
name: "揭陽",
value: 34
},
{
name: "榮成",
value: 34
},
{
name: "連雲港",
value: 35
},
{
name: "葫蘆島",
value: 35
},
{
name: "常熟",
value: 36
},
{
name: "東莞",
value: 36
},
{
name: "河源",
value: 36
},
{
name: "淮安",
value: 36
},
{
name: "泰州",
value: 36
},
{
name: "南寧",
value: 37
},
{
name: "營口",
value: 37
},
{
name: "惠州",
value: 37
},
{
name: "江陰",
value: 37
},
{
name: "蓬萊",
value: 37
},
{
name: "韶關",
value: 38
},
{
name: "嘉峪關",
value: 38
},
{
name: "廣州",
value: 38
},
{
name: "延安",
value: 38
},
{
name: "太原",
value: 39
},
{
name: "清遠",
value: 39
},
{
name: "中山",
value: 39
},
{
name: "昆明",
value: 39
},
{
name: "壽光",
value: 40
},
{
name: "盤錦",
value: 40
},
{
name: "長治",
value: 41
},
{
name: "深圳",
value: 41
},
{
name: "珠海",
value: 42
},
{
name: "宿遷",
value: 43
},
{
name: "咸陽",
value: 43
},
{
name: "銅川",
value: 44
},
{
name: "平度",
value: 44
},
{
name: "佛山",
value: 44
},
{
name: "海口",
value: 44
},
{
name: "江門",
value: 45
},
{
name: "章丘",
value: 45
},
{
name: "肇慶",
value: 46
},
{
name: "大連",
value: 47
},
{
name: "臨汾",
value: 47
},
{
name: "吳江",
value: 47
},
{
name: "石嘴山",
value: 49
},
{
name: "瀋陽",
value: 50
},
{
name: "蘇州",
value: 50
},
{
name: "茂名",
value: 50
},
{
name: "嘉興",
value: 51
},
{
name: "長春",
value: 51
},
{
name: "膠州",
value: 52
},
{
name: "銀川",
value: 52
},
{
name: "張家港",
value: 52
},
{
name: "三門峽",
value: 53
},
{
name: "錦州",
value: 54
},
{
name: "南昌",
value: 54
},
{
name: "柳州",
value: 54
},
{
name: "三亞",
value: 54
},
{
name: "自貢",
value: 56
},
{
name: "吉林",
value: 56
},
{
name: "陽江",
value: 57
},
{
name: "瀘州",
value: 57
},
{
name: "西寧",
value: 57
},
{
name: "宜賓",
value: 58
},
{
name: "呼和浩特",
value: 58
},
{
name: "成都",
value: 58
},
{
name: "大同",
value: 58
},
{
name: "鎮江",
value: 59
},
{
name: "桂林",
value: 59
},
{
name: "張家界",
value: 59
},
{
name: "宜興",
value: 59
},
{
name: "北海",
value: 60
},
{
name: "西安",
value: 61
},
{
name: "金壇",
value: 62
},
{
name: "東營",
value: 62
},
{
name: "牡丹江",
value: 63
},
{
name: "遵義",
value: 63
},
{
name: "紹興",
value: 63
},
{
name: "揚州",
value: 64
},
{
name: "常州",
value: 64
},
{
name: "濰坊",
value: 65
},
{
name: "重慶",
value: 66
},
{
name: "台州",
value: 67
},
{
name: "南京",
value: 67
},
{
name: "濱州",
value: 70
},
{
name: "貴陽",
value: 71
},
{
name: "無錫",
value: 71
},
{
name: "本溪",
value: 71
},
{
name: "克拉瑪依",
value: 72
},
{
name: "渭南",
value: 72
},
{
name: "馬鞍山",
value: 72
},
{
name: "寶雞",
value: 72
},
{
name: "焦作",
value: 75
},
{
name: "句容",
value: 75
},
{
name: "北京",
value: 79
},
{
name: "徐州",
value: 79
},
{
name: "衡水",
value: 80
},
{
name: "包頭",
value: 80
},
{
name: "綿陽",
value: 80
},
{
name: "烏魯木齊",
value: 84
},
{
name: "棗莊",
value: 84
},
{
name: "杭州",
value: 84
},
{
name: "淄博",
value: 85
},
{
name: "鞍山",
value: 86
},
{
name: "溧陽",
value: 86
},
{
name: "庫爾勒",
value: 86
},
{
name: "安陽",
value: 90
},
{
name: "開封",
value: 90
},
{
name: "濟南",
value: 92
},
{
name: "德陽",
value: 93
},
{
name: "溫州",
value: 95
},
{
name: "九江",
value: 96
},
{
name: "邯鄲",
value: 98
},
{
name: "臨安",
value: 99
},
{
name: "蘭州",
value: 99
},
{
name: "滄州",
value: 100
},
{
name: "臨沂",
value: 103
},
{
name: "南充",
value: 104
},
{
name: "天津",
value: 105
},
{
name: "富陽",
value: 106
},
{
name: "泰安",
value: 112
},
{
name: "諸暨",
value: 112
},
{
name: "鄭州",
value: 113
},
{
name: "哈爾濱",
value: 114
},
{
name: "聊城",
value: 116
},
{
name: "蕪湖",
value: 117
},
{
name: "唐山",
value: 119
},
{
name: "平頂山",
value: 119
},
{
name: "邢臺",
value: 119
},
{
name: "德州",
value: 120
},
{
name: "濟寧",
value: 120
},
{
name: "荊州",
value: 127
},
{
name: "宜昌",
value: 130
},
{
name: "義烏",
value: 132
},
{
name: "麗水",
value: 133
},
{
name: "洛陽",
value: 134
},
{
name: "秦皇島",
value: 136
},
{
name: "株洲",
value: 143
},
{
name: "石家莊",
value: 147
},
{
name: "萊蕪",
value: 148
},
{
name: "常德",
value: 152
},
{
name: "保定",
value: 153
},
{
name: "湘潭",
value: 154
},
{
name: "金華",
value: 157
},
{
name: "岳陽",
value: 169
},
{
name: "長沙",
value: 175
},
{
name: "衢州",
value: 177
},
{
name: "廊坊",
value: 193
},
{
name: "菏澤",
value: 194
},
{
name: "合肥",
value: 229
},
{
name: "武漢",
value: 273
},
{
name: "大慶",
value: 279
}
];
var convertData = function(data) {
var res = [];
for(var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if(geoCoord) {
res.push(geoCoord.concat(data[i].value));
}
}
return res;
};
var option = {
title: {
text: '全國主要城市空氣質量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
backgroundColor: 'rgba(128, 128, 128, 0)',
visualMap: {
min: 0,
max: 2,
show: false,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
},
textStyle: {
color: '#fff'
}
},
geo: {
map: '',
show: false,
label: {
emphasis: {
show: false
}
},
left: 0,
top: 0,
right: 0,
bottom: 0,
roam: false,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
type: 'heatmap', //effectScatter
coordinateSystem: 'geo',
data: convertData(geoValue),
pointSize: 10,
blurSize: 8
}]
};
dojo.ready(function() {
//創建地圖
map = new esri.Map('map', {
basemap: 'dark-gray',
center: [120.15785586158, 30.269122098642],
zoom: 5,
navigationMode: "css-transform",
force3DTransforms: true,
logo: false,
fitExtent: true,
fadeOnZoom: true,
slider: false
});
//地圖加載完成後初始化Echarts圖層
dojo.connect(map, 'onLoad', function(themap) {
//這裏在地圖上創建統計圖圖層，以後統計圖的繪製將從這裏進入
var overlay = new Echarts3Layer(map, echarts);
var chartsContainer = overlay.getEchartsContainer();
var myChart = overlay.initECharts(chartsContainer);
//window.onresize = myChart.onresize;
echartsLayer = overlay;
$(window).on("resize", function() {
resize();
});
overlay.setOption(option);
setTimeout(function() {
clear();
}, 1000);
});
});
function resize() {
if(echartsLayer) {
var myEchart = echartsLayer.getECharts(), //echarts對象
$myEchartContainer = $(echartsLayer.getEchartsContainer()), //echarts統計圖所在的div
myMap = echartsLayer.getMap(); //地圖
var $myMapContainer = $(myMap.container); //地圖所在div
var width = $myMapContainer.width(),
height = $myMapContainer.height(); //獲取地圖的寬高
$myEchartContainer.width(width); //設置統計圖容器的寬高爲地圖容器的寬高
$myEchartContainer.height(height);
myEchart.resize(); //調用echarts的resize方法
}
}
function clear() {
if(echartsLayer) {
var opt = option;
opt.series = [{
type: 'heatmap',
coordinateSystem: 'geo',
data: [
[]
], //傳入空數據，以達到清除原有統計圖的效果
pointSize: 10,
blurSize: 8
}];
echartsLayer.setOption(opt);
}
}
function remove() {
if(echartsLayer) {
var $echartsContainer = $(echartsLayer.getEchartsContainer());
//移除圖層容器以達到刪除統計的效果
$echartsContainer.remove();
}
}
</script>
</body>
</html>
至此，已經介紹完了Arcgis Echarts熱力圖基本的使用。其中，要特別注意幾點：
1.Echarts3Layer.js路徑
2.option背景設置透明
3.使用overlay而非myChart
原文地址：http://www.cnblogs.com/qiaoge0923/p/9562304.html
