Cómo utilizar ECharts dinámicamente para identificar puntos en un mapa
Primero, las coordenadas del mapa en ECharts deben almacenarse en un atributo geoCoord, que es un objeto de diccionario JS compuesto por pares clave/valor. La clave representa el nombre del punto y el valor. representa sus coordenadas, que se componen de longitud y latitud, que es una matriz, como [136.00, 32.00], que representa las coordenadas de a.
Los mapas se pueden utilizar para descargar imágenes, acercar y alejar, arrastrar y soltar, etc. Hoy hablamos principalmente de cómo se implementa su tipo de mapa (tipo: "mapa").
Elementos a los que los mapas tipo gráficos deben prestar atención
title: title, que muestra el nombre representado por este mapa
title: {
texto: 'Tsingda.Cloud ilumina China',
subtexto: 'Tsingda.Cloud',
subenlace Nube',
x: 'centro' ,
y: arriba',
textStyle: {
color: '#fff'
}
}
Caja de herramientas: Caja de herramientas, que muestra algunas herramientas de visualización, acercamiento, alejamiento y visualización de conjuntos de datos
caja de herramientas: {
mostrar: verdadero,
característica: {
marca: { mostrar: verdadero },
dataView: { mostrar: verdadero, solo lectura: falso },
restaurar: { show : true },
saveAsImage: { show: true }
}
}
legend: el icono para se mostrará cuando la serie Cuando hay varios mapas, este valor se utiliza para mostrar iconos para varios mapas horizontal o verticalmente
leyenda: {
x: 'left',
y :top',
datos: ['online', 'offline'], //En línea y fuera de línea corresponden a los nombres de las series
selectedMode: false, // cursor seleccionado
textStyle: {
color: '#fff'
}
}
serie: visualización de mapas, utilizada para mostrar que los mapas aparecen uno encima del otro, se pueden definir varios, las relaciones están primero en la parte superior, etc.
serie: [
//Predeterminado
{
nombre: 'plantilla subyacente',
tipo : 'mapa',
mapType: 'China',
datos: provinciaMap,
geoCoord: fuente,
itemStyle: {
normal: {
color: bgColor,
borderColor: "#eee",
etiqueta: {
mostrar: verdadero,
textStyle: {
color: "#fff"
}
}
}
}, énfasis: { color: "rgba(128, 128, 128, 0.5)"
}
}
}.}
},
}]
markPoint: identificador de punto, utilizado para identificar puntos en el mapa, generalmente almacenado en objetos geoCoord, esto El objeto es un diccionario, como se mencionó al principio del artículo.
markPoint: {//Marca dinámica
large: true, //Esta opción se desactivará automáticamente al pasar el mouse
symbolSize: 2,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(37, 140, 249, 0.8)',
color: onColor
}
},
datos: []
}
< El objeto de datos en p>markPoint es un mapa, donde se trata de una matriz de caracteres que almacena las claves en geoCoord.setOption: agrega el objeto de mapa al objeto de mapa especificado
var myChart = echarts.init(document.getElementById('main'));
var option={};
myChart.setOption(option);
Construir dinámicamente marcadores de puntos markPoint en el mapa
La idea es usar geoCoord y markPoint dinámicamente pague los puntos que se marcarán en el objeto de datos, para que pueda marcar puntos dinámicamente en el mapa
$.get ("/map/GetOffMap", function (data) {
para (var i en datos) {
opción.series[0].geoCoord[datos[i].Longitude"_" datos[i].Latitud] = [ parseFloat(_" datos[i] ].latitud)].
= [ parseFloat(datos[i].longitude), parseFloat(datos[i].latitud)];
option.series[1].markPoint.data.push({ nombre: datos[i] .longitude "_ " datos[i].latitud });
}
myChart.setOption(opción);