ArcGIS API for JavaScript 3.x 加载echarts饼状图_arcgis api for javascript3.x echarts-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_29808089/article/details/108457739

本文介绍如何在ArcGIS API for JavaScript 3.x版本中集成Echarts库，展示如何创建并加载一个饼状图，详细阐述了地图与饼图结合的实现步骤和技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml">

	<head runat="server">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>地图图表控件-饼状图</title>
		<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.15/3.15/chart/echarts.min.js"></script>
		<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.15/3.15/chart/macarons.js"></script>
		<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.15/3.15/dijit/themes/claro/claro.css" />
		<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.15/3.15compact/esri/css/esri.css">
		<script src="http://portal.smartxspace.com/arcgis_js_api/library/3.15/3.15/init.js" type="text/javascript"></script>
		<style>
	      #info {
	        top: 40px;
	        color: #444;
	        height: auto;
	        font-family: arial;
	        /*right: 20px;*/
	        margin: 5px;
	        padding: 10px;
	        position: absolute;
	        width: 80px;
	        z-index: 40;
	        border: solid 2px #666;
	        border-radius: 4px;
	        background-color: #fff;
	      }
	      #info1{
	      	margin-top: 10px;
	      	width: 30px;
	      	height: 15px;
	      	border-radius: 2px;
	      	float: left;
	      }
	      #font{
	      	margin-top: 8px;
	      	font-size: 13px;
	      	float: right;
	      }
	      button {
	        display: block;
	      }
    	</style>
	</head>

	<body>
		<div id="map" style="width:100%;height:100%;"></div>
		<div style="position:absolute;top: 20px;margin-left: 50%;">GDP饼状统计图</div>
		<div id="info" style="">
			<div id="info1" style="background-color:#c54b4b ;"></div><span id="font">2014年</span>
			<div id="info1" style="background-color:#8CC474 ;"></div><span id="font">2015年</span>
			<div id="info1" style="background-color:#AA6FAD ;"></div><span id="font">2016年</span>
			<div id="info1" style="background-color:#e7ea29 ;"></div><span id="font">2017年</span>
		</div>
	</body>

</html>

<script>
	var map;
	require(["esri/map", "esri/graphic",'esri/geometry/Point',"esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","chart/chartlayer"], function(Map, Graphic,Point,SimpleFillSymbol,SimpleLineSymbol,chartlayer) {
		var startExtent = new esri.geometry.Extent(114.309, 30.578, 115, 37,
			new esri.SpatialReference({
				wkid: 4326
			}));
		map = new Map("map", {
			extent: startExtent,
			center: [114.309, 30.578], //地图加载后，初始位置
			zoom: 12, //放大级别，值越大放大的比例就越大
			slider: false,
			maxZoom: 16, //地图最大缩放级别
			minZoom: 11, //地图最小缩放级别
			logo: false //不显示Esri的logo
		});
		//加载地图服务
		var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer");
		map.addLayer(myTiledMapServiceLayer); //添加到地图中

		var chartLayer = new chartlayer({
			"id": "chartLayer",
			"size": 150
		});
		map.addLayer(chartLayer);
		var optionselectItems = [{
			name: "GDP2014",
			color: "#c54b4b"
		}, {
			name: "GDP2015",
			color: "#8CC474"
		}, {
			name: "GDP2016",
			color: "#AA6FAD"
		}, {
			name: "GDP2017",
			color: "#e7ea29"
		}];

		var hash = [{
			GDP2014: 677,//洪山区
			GDP2015: 744,
			GDP2016: 827,
			GDP2017: 920,
			UNIT: "亿",
			x: 114.352,
			y: 30.499
		}, {
			GDP2014: 786,//汉阳区
			GDP2015: 860,
			GDP2016: 830,
			GDP2017: 896,
			UNIT: "亿",
			x: 114.226,
			y: 30.554
		}, {
			GDP2014: 827,//江汉区
			GDP2015: 935,
			GDP2016: 1010,
			GDP2017: 1150,
			UNIT: "亿",
			x: 114.275,
			y: 30.603
		}, {
			GDP2014: 496,//青山区
			GDP2015: 460,
			GDP2016: 464,
			GDP2017: 457,
			UNIT: "亿",
			x: 114.401,
			y: 30.635
		}]
		for(var i = 0; i < hash.length; i++) {
			var pt = new Point(hash[i].x, hash[i].y);
			var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
				new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
					new dojo.Color([255, 255, 255]), 2), new dojo.Color([255, 0, 255]));
			var graphicattr = {
				OBJECTID: i
			};
			var graphic = new Graphic(pt, symbol, graphicattr, null);
			chartLayer.add(graphic);
		}

		
		chartLayer.callbackDraw = setChartData;
		chartLayer.fidname = "OBJECTID";
		chartLayer.show();
		chartLayer._refresh(true);

		function setChartData(divID, gra) {
			var chartData = [];
			for(var i = 0; i < hash.length; i++) {
				chartData.push({
					value: hash[gra.attributes.OBJECTID][optionselectItems[i].name],
					name: optionselectItems[i].name
				});
			}
			var divobj = dojo.byId(divID);
			var myChart = echarts.init(divobj, thememacarons);
			// 指定图表的配置项和数据
			option = {
				color:["#c54b4b","#8CC474","#AA6FAD","#e7ea29"],
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c}亿"
				},
				series: [{
					name: 'GDP统计',
					type: 'pie',
					radius: '70%',
					center: ['50%', '50%'],
					data: chartData,
					itemStyle: {
						normal: {
							label: {
								show: false
							},
							labelLine: {
								show: false
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}
	});
</script>