最近公司有个arcgis api for js的项目，需要用到百度echarts迁徙图效果，而百度那个效果实现是结合百度地图的，怎么才能跟arcgis api结合呢，网上搜索，终于在github找到了，github源代码地址：https://github.com/wandergis/arcgis-echarts；在此，非常感谢原创作者
实现思路：
1.自定义EchartsLayer类，为了把echarts迁徙图的渲染效果跟esri的地图map绑定在一起，比如渲染图效果的d放在map地图容器里面：
var div = this._echartsContainer = document.createElement(‘div‘); div.style.position = ‘absolute‘; div.id = "moveecharts_Map"; div.style.height = map.height + ‘px‘; div.style.width = map.width + ‘px‘; div.style.top = 0; div.style.left = 0; map.__container.appendChild(div);
地图的绑定系列事件：
/** * 绑定地图事件的处理方法 * * @private */ self._bindEvent = function() { self._map.on(‘zoom-end‘, function(e) { self.setOption(self._option); }); self._map.on(‘zoom-start‘, function(e) { self._ec.clear(); }); self._map.on(‘pan‘, function(e) { self._ec.clear(); }); self._map.on(‘pan-end‘, function(e) { self.setOption(self._option); }); self._ec.getZrender().on(‘dragstart‘, function(e) { self._map.disablePan(); //self._ec.clear(); }); self._ec.getZrender().on(‘dragend‘, function(e) { self._map.enablePan(); //self.setOption(self._option); }); self._ec.getZrender().on(‘mousewheel‘, function(e) { self._ec.clear(); self._map.emit(‘mouse-wheel‘, e.event) }); };
具体的可以看github源代码
2.echarts迁徙图的模拟数据构造，这里自己稍微修改了的，跟github源代码的构造数据不一致：
var option = { color: [‘gold‘, ‘aqua‘, ‘lime‘], tooltip: { trigger: ‘item‘, formatter: ‘{b}‘ }, dataRange: { show:false, min: 0, max: 100, calculable: true, color: [‘#ff3333‘, ‘orange‘, ‘yellow‘, ‘lime‘, ‘aqua‘], textStyle: { color: ‘#fff‘ } }, series: [ { name: ‘大连市‘, type: ‘map‘, roam: true, hoverable: false, mapType: ‘none‘, itemStyle: { normal: { borderColor: ‘rgba(100,149,237,1)‘, borderWidth: 0.5, areaStyle: { color: ‘#1b1b1b‘ } } }, data: [], markLine: { smooth: true, symbol: [‘none‘, ‘circle‘], symbolSize: 1, itemStyle: { normal: { color: ‘#fff‘, borderWidth: 1, borderColor: ‘rgba(30,144,255,0.5)‘ } }, data: [ [{ name: ‘大连基地‘ }, { name: ‘到达#1‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#2‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#3‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#4‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#5‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#6‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#7‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#8‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#9‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#10‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#11‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#12‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#13‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#14‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#15‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#16‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#17‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#18‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#19‘ }], [{ name: ‘大连基地‘ }, { name: ‘到达#20‘ }] ], }, geoCoord: { ‘大连基地‘: [121.939, 39.703], ‘到达#1‘: [121.563, 39.582], ‘到达#2‘: [121.579, 39.411], ‘到达#3‘: [121.715, 39.401], ‘到达#4‘: [121.746, 39.278], ‘到达#5‘: [121.613, 39.027], ‘到达#6‘: [121.768, 39.066], ‘到达#7‘: [121.921, 39.414], ‘到达#8‘: [121.941, 39.089], ‘到达#9‘: [122.088, 39.206], ‘到达#10‘: [122.214, 39.342], ‘到达#11‘: [121.979, 39.357], ‘到达#12‘: [121.091, 39.541], ‘到达#13‘: [122.397, 39.421], ‘到达#14‘: [122.649, 39.534], ‘到达#15‘: [122.955, 39.652], ‘到达#16‘: [122.512, 39.691], ‘到达#17‘: [122.183, 39.622], ‘到达#18‘: [122.288, 39.803], ‘到达#19‘: [122.119, 39.911], ‘到达#20‘: [122.133, 39.629] } }, { name: ‘大连市 Top10‘, type: ‘map‘, mapType: ‘none‘, data: [], markLine: { smooth: true, effect: { show: true, scaleSize: 1, period: 30, color: ‘#fff‘, shadowBlur: 10 }, itemStyle: { normal: { borderWidth: 1, lineStyle: { type: ‘solid‘, shadowBlur: 10 } } }, data: [ [{ name: ‘大连基地‘ }, { name: ‘到达#1‘, value: 95 }], [{ name: ‘大连基地‘ }, { name: ‘到达#2‘, value: 90 }], [{ name: ‘大连基地‘ }, { name: ‘到达#3‘, value: 80 }], [{ name: ‘大连基地‘ }, { name: ‘到达#14‘, value: 70 }], [{ name: ‘大连基地‘ }, { name: ‘到达#5‘, value: 60 }], [{ name: ‘大连基地‘ }, { name: ‘到达#16‘, value: 50 }], [{ name: ‘大连基地‘ }, { name: ‘到达#7‘, value: 40 }], [{ name: ‘大连基地‘ }, { name: ‘到达#18‘, value: 30 }], [{ name: ‘大连基地‘ }, { name: ‘到达#9‘, value: 20 }], [{ name: ‘大连基地‘ }, { name: ‘到达#20‘, value: 10 }] ] }, markPoint: { symbol: ‘emptyCircle‘, symbolSize: function (v) { return 10 + v / 10 }, effect: { show: true, shadowBlur: 0 }, itemStyle: { normal: { label: { show: false } }, emphasis: { label: { position: ‘top‘ } } }, data: [ { name: ‘到达#1‘, value: 95 }, { name: ‘到达#2‘, value: 90 }, { name: ‘到达#3‘, value: 80 }, { name: ‘到达#14‘, value: 70 }, { name: ‘到达#5‘, value: 60 }, { name: ‘到达#16‘, value: 50 }, { name: ‘到达#7‘, value: 40 }, { name: ‘到达#18‘, value: 30 }, { name: ‘到达#9‘, value: 20 }, { name: ‘到达#20‘, value: 10 } ] } } ] };
3.调用实现：
loadMoveEchartsMap: function (map) { var overlay = new moveEchartsMap.EchartsLayer(map, echarts); var chartsContainer = overlay.getEchartsContainer(); var myChart = overlay.initECharts(chartsContainer); window.onresize = myChart.onresize; overlay.setOption(option); }
