eCharts logran perforar el mapa de provincia de la ciudad




<% @ Page language = "java" contentType = "text / html; charset = UTF-8" 
	pageEncoding = "UTF-8" %> 
<! DOCTYPE html> 
<html> 
<head> 
<meta charset = "UTF-8 "> 
<title> Insertar el título </ title> 
<! -这些都是需要导入的frasco包-> 
<script src =" js / echarts.min.js "> </ script> 
<script src =" JS / china.js "> </ script> 
<script src =" js / provincia / anhui.js "> </ script> 
<script src =" js / provincia / aomen.js "> </ script> 
<script src = "js / provincia / beijing.js"> </ script> 
<script src = "js / provincia / chongqing.js"> </ script> 
<script src = "js / Provincia / fujian.js"> </ script> 
<script src = "js / Provincia / gansu.js"> </ script> 
<script src = "js / Provincia / guangdong.js"> < / script>
<script src = "js / Provincia / guangxi.js"> </ script> 
<script src = "js / Provincia / hainan.js"> </ script> 
<script src = "js / provincia / hebei.js"> </ script> 
<script src = "js / provincia / heilongjiang.js"> </ script> 
<script src = "js / provincia / henan.js"> </ script> 
<script src = "js / provincia / Hubei js "> </ script> 
<script src =" js / provincia / hunan.js "> </ script> 
<script src =" js / provincia / jiangsu.js "> </ script> 
<script src =" js /province/jiangxi.js "> </ script> 
<script src =" js / provincia / jilin.js "> </ script> 
<script src =" js / provincia / liaoning.js "></ script> 
<script src = "js / provincia / neimenggu.js"> </ script> 
<script src = "js / Provincia / ningxia.js"> </ script> 
<script src = "js / provincia / Qinghai js "> </ script>
<script src = "js / Provincia / shandong.js"> </ script>  
<script src = "js / provincia / Shanghai js "> </ script>
<script src = "js / Provincia / shanxi.js"> </ script> 
<script src = "js / provincia / shanxi1.js"> </ script> 
<script src = "js / provincia / sichuan.js"> </ script> 
<script src = "js / provincia / taiwan.js"> </ script> 
<script src = "js / provincia / Tianjin js "> </ script> 
<script src =" js / provincia / xianggang.js "> </ script> 
<script src =" js / provincia / xinjiang.js "> </ script> 
<script src =" js /province/xizang.js "> </ script> 
<script src =" js / provincia / yunnan.js "> </ script> 
<script src =" js / provincia / zhejiang.js"> </ script> 
<script src = "JS / jquery-1.12.1.js"> </ script> 
</ head> 
<body> 
	<div id = estilo "principal" = "width: 800px; altura: 600px; "> </ div> 
	<- - preparar un eCharts incluye el tamaño Dom (anchura y altura) de!> 
	<Script type = "text / JavaScript"> 
	initChina (); // esta función es realizada por China para cargar el mapa
	función initChina () { 
	
	
	
	       		var MYCHART = echarts.init (document.querySelector ( '# principal')) 
	       		// inicializar un método por el echarts.init eCharts ejemplo 
		
		       	myChart.setOption ({ 
		       		// mapa generado por un simple setOption método, designado los datos de CI y el gráfico 
				del título: { 
					texto: '19 de febrero de perfil epidemia', 
				}, // título 
				// color de fondo de 
				la backgroundColor: '# f9f9f9', 
				visualMap: [{// mapa colorear 
					tipo: 'continuo' // color continuos 
					piezas: [// código de colores de acuerdo con el valor 
						
						{GT: 100}, 
						{gt: 10, LTE: 99}, 
						{gt: 0, LTE :. 9} 
					] 
				}], @ visiualMap 
				
				Series: {  
					tipo: 'Mapa', // tipo de gráfico
					mapa: 'china', china // mapa 
					etiqueta: { 
						// set cubierta
						Mostrar: true 
					}, // Lable 
					
				} // Serie 
			
		}) // myChart.setOption 
		myChart.on ( 'Click', function (param) { 
			//alert(param.name) 
			// por eventos de clic del ratón, se ejecutará la ciudad () la función, cuando los parámetros de param.name, es el nombre de la provincia, para que pueda cargar la identidad de cada mapa 
			var = str_p param.name; 
			contenido // parámetro PARAM contiene son: 
	        eje //param.name:X el valor del 
	        valor //param.data:Y eje 
	        valor //param.value:Y eje 
	        //param.type: clic evento de clic son   
	        los nombres de //param.seriesName:legend 
	        //param.seriesIndex: serie No. (serie de varios patrón actual es un patrón de varios) 
	        //param.dataIndex: secuencia numérica (eje X punto actual es los primeros puntos) 

			City (str_p); 
tipo <script = "text / javascript ">	     
		})
	} 
		
	    
</ Script> 
	    
	    // función de Búsqueda ciudad AJAX asíncrona		    	 
		función Ciudad (Provincia) { 
			
	    	
	    		
	    		
	    			
	       			//console.log(cities) 
	       			var = MYCHART echarts.init (document.querySelector ( '# principal')) 
	       			myChart.setOption ({ 
	       				título: { 
	       					text: Provincia + 'división de datos', 
	       					subtexto: 'fuente de datos de red', 
	       					a la izquierda: 'Centro' 
	       				}, // título 
	       				// color de fondo de 
	       				la backgroundColor: '# f7f7f7', 
	       				
	       				Serie: { 
	       					tipo: 'Mapa', / / tipos de gráficos 
	       					mAP: provincia, // provincias 
	       					eTIQUETA: { 
	       						set // cubriendo 
	       						show:verdadera 
	       					} 
	       				} // Serie 
	       			}) // MYCHART.setOption
	       			
	       			myChart.on ( 'Click', function (param) { 
	       			            initChina (); // ejecutar esta función initChina por clic del ratón, puede cargar un mapa de China nuevo 

	       			        }) 
	    	
	    
	    	
	    } // función Ciudad 
	</ script> 

	
</ body> 
< / html>

　　Prepare un nodo de DOM (tal como se eCharts representación contenedor), se puede crear un eCharts en el ejemplo anterior. Cada instancia de un exclusivo eCharts un nodo DOM. eCharts en el tipo de serie ( series.type) es el tipo de gráfico. Serie Tipo ( series.type) por lo menos: Línea (diagrama de línea), bar (gráfico de barras), PIE (gráfico), la dispersión (gráfico de dispersión), el gráfico (diagrama), árbol (árbol), un mapa (mapa), en eCharts se explican en detalle en la página web oficial de los componentes relevantes

eCharts logran perforar el mapa de provincia de la ciudad

Supongo que te gusta