<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>arcgis api 4.x结合Echarts4实现统计图</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.10/esri/css/main.css">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script src="http://localhost/arcgis_js_api/library/4.10/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"esri/Basemap",
"esri/layers/TileLayer"
], function(Map, MapView, SceneView, Basemap, TileLayer) {
layer = new TileLayer({
url:"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
//url: "http://server.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer"
});
basemap = new Basemap({
baseLayers: [layer]
});
map = new Map({//加载arcgis在线地图
//basemap: "streets"
basemap: basemap
});
view = new MapView({//创建二维视图
//view = new SceneView({//创建三维视图
container: "viewDiv",
map: map,
zoom: 10,
center: [113.5471688551954, 23.03987923328639] // longitude, latitude
});
//视图加载完成
view.when(function(){
//监听地图变化事件,对应刷新统计图位置
view.watch("extent", function () {
relocatePopup();
});
view.watch("rotation", function () {
relocatePopup();
});
//地图加载完,初始化统计图
echartsMapInit();
});
//初始化写入统计图的数据
function echartsMapInit(){
echartsInfos = [];
echartsInfos.push({
//地图坐标
x: 113.3684,
y: 23.1323,
content: '<div id="info1" style="height:150px;width:300px;position:absolute;"></div>',
//div的id唯一标识
id:"info1",
echartsObj:null,
option:{
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '3%',
containLabel: true,
//y2: 140
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
},
axisLabel:{
interval:0,//横轴信息全部显示
rotate:-30,//-30度角倾斜显示
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//这里是为了突出显示加上的
}
}
}
],
yAxis : [
{
type : 'value',
splitLine: {
lineStyle: {
// 使用深浅的间隔色
//color: ['#0087ED']
color: ['#0087ED']
}
},
nameTextStyle: {
color: ['#FFFFFF']
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//这里是为了突出显示加上的
}
}
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
}
});
echartsInfos.push({
x: 113.5937,
y: 23.0857,
content: '<div id="info2" style="height:150px;width:300px;position:absolute;"></div>',
id:"info2",
echartsObj:null,
option:{
title: {
text: ''
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
//data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
data:['视频广告','直接访问','搜索引擎'],
textStyle:{
color: ['#FFFFFF']
},
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '10%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日'],
nameTextStyle: {
color: ['#FFFFFF']
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//这里是为了突出显示加上的
}
}
}
],
yAxis : [
{
type : 'value',
nameTextStyle: {
color: ['#FFFFFF']
},
axisLine:{
lineStyle:{
color:'#FFFFFF',
width:1,//这里是为了突出显示加上的
}
}
}
],
series : [
/*{
name:'邮件营销',
type:'line',
stack: '总量',
areaStyle: {},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
areaStyle: {},
data:[220, 182, 191, 234, 290, 330, 310]
},*/
{
name:'视频广告',
type:'line',
stack: '总量',
areaStyle: {},
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
areaStyle: {normal: {}},
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {normal: {}},
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
});
for (var i = 0; i < echartsInfos.length; i++) {
var echartsInfo = echartsInfos[i];
//坐标转换
var mapPoint = {
x: echartsInfo.x,
y: echartsInfo.y,
spatialReference: view.spatialReference
};
var screenPoint = view.toScreen(mapPoint);
var obj = {};
obj.x =screenPoint.x;
obj.y =screenPoint.y;
obj.content = echartsInfo.content;
obj.id = echartsInfo.id;
obj.option = echartsInfo.option;
obj.echartsObj = echartsInfo.echartsObj;
echartsInfos[i].echartsObj = loadEchartsMap(obj);
//刷新统计图窗口位置
//positionEchartsMap(obj);
}
}
function loadEchartsMap(obj){
//动态添加气泡窗口DIV
$("#viewDiv").append(obj.content);
//统计图加载
var dom = document.getElementById(obj.id);
var myChart = echarts.init(dom);
myChart.setOption(obj.option);
//刷新统计图窗口位置
positionEchartsMap(obj);
return myChart;
}
//刷新统计图窗口位置
function positionEchartsMap(obj){
$('#'+obj.id).css('transform', 'translate3d(' + obj.x + 'px, ' + obj.y + 'px, 0)');
//动态改变echarts统计图div大小
switch(view.zoom) {
case 0:
case 1:
case 2: