arcgis+echars
本文记录是和echarts关系图结合使用。
https://github.com/wandergis/arcgis-echarts3
上述地址是主要代码所在，这里只是记录整理一下。
首先，将上述github内代码下载下来，我们需要用到里面两个文件，dist/main.js和src/Echarts3Layer.js。
引入文件
页面中需引入这三个文件，注意：main.js一定要在dojo.js之前引入。
引入echarts3layer
在你的js代码中引入Echarts3Layer，我的是放置在和init.js同级目录下，所以以上引入，各位可根据自己的文件位置引入。
在map.on('load')时初始化echatrs图表信息，在option中,geo处设置为空即可。
map.on('load', function () {
overlay = new Echarts3Layer(map, echarts);
var chartsContainer = overlay.getEchartsContainer();
myChart = overlay.initECharts(chartsContainer);
var lineStyle = {
normal: {
color: '#FF6666',
width: 1,
opacity: 0.6,
curveness: 0.2
}
};
var data = [你的关系图或者其它任何图表的data];
option = {
tooltip: {
trigger: 'item'
},
geo: {
map: '',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
type: 'lines',
zlevel: 2,
lineStyle: lineStyle,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: 'image://../img/router.png',
symbolSize: 15
},
data: data.tGeoDt
}
, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
showEffectOn: 'emphasis',
symbol: 'image://../img/switch.png',
symbolSize: 20,
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: 'auto'
}
},
itemStyle: {
normal: {
color: '#fff'
}
},
data: data.vGeoDt,
tooltip: {
trigger: 'item',
formatter: function (param) {
return param.name + '：' + param.value + '<br/>' + '所属AS，interfaces数目';
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
overlay.setOption(option);
});
如此，刷新页面即可。
