arcgis+echars
本文記錄是和echarts關(guān)系圖結(jié)合使用。
https://github.com/wandergis/arcgis-echarts3
上述地址是主要代碼所在，這里只是記錄整理一下。
首先，將上述github內(nèi)代碼下載下來，我們需要用到里面兩個(gè)文件，dist/main.js和src/Echarts3Layer.js。
引入文件
頁面中需引入這三個(gè)文件，注意：main.js一定要在dojo.js之前引入。
引入echarts3layer
在你的js代碼中引入Echarts3Layer，我的是放置在和init.js同級(jí)目錄下，所以以上引入，各位可根據(jù)自己的文件位置引入。
在map.on('load')時(shí)初始化echatrs圖表信息，在option中,geo處設(shè)置為空即可。
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 = [你的關(guān)系圖或者其它任何圖表的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: '',
color: 'auto'
}
},
itemStyle: {
normal: {
color: '#fff'
}
},
data: data.vGeoDt,
tooltip: {
trigger: 'item',
formatter: function (param) {
return param.name + '：' + param.value + '<br/>' + '所屬AS，interfaces數(shù)目';
}
}
}
]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
overlay.setOption(option);
});
如此，刷新頁面即可。
