Prefacio
El ejemplo del sitio web oficial echartsGL tiene un gráfico de dispersión muy bueno, que ha realizado la visualización de más de decenas de millones de datos a través de la carga por lotes del servidor:
Domo puede mirar aquí .
De hecho, los datos del servidor se cargan en lotes y luego se presentan. Parece muy simple, pero no hay muchos hoyos.
Dos, conversión de datos
Descargue la demostración anterior del sitio web oficial, colóquela localmente, abra la consola, busque la dirección de solicitud de datos, modifique la demostración en la demostración ROOTPATHe intente ejecutarla localmente. A primera vista, se informó de un error. La interfaz no admite dominios cruzados. No hay forma más que simular los datos devueltos por la interfaz, mediante Float32Arrayel encapsulado de datos. El código central de la demostración es el siguiente:
myChart.appendData({
seriesIndex: 0,
data: data
});
Puede ver que el código central es el método de objeto de echarts llamado appendData;
El formato de datos de los datos, después de haber estado buscando a tientas durante mucho tiempo, finalmente lo descubrí:
supongamos que estos son mis metadatos ( 并非最终数据):
[
{
lat:131.222,
lon:31.3333,
num:12
}
]
Cada dato puede estar compuesto por la longitud, la latitud y el peso de este punto (indicado como num). Entonces necesitamos uno Float32Array, su formato de almacenamiento es el siguiente:
[131.22,31.33333,12,132.33,32.2222,24.....]
La función de conversión es la siguiente:
_Scatter.prototype._transform = function(data_arr){
const ret = new Float32Array(data_arr.length * 3);
data_arr.map((o, i) => {
ret[i + (i * 2)] = o.lon
ret[i + 1 + (i * 2)] = o.lat
ret[i + 2 + (i * 2)] = o.num || 0
})
return ret;
}
En este punto podemos liberar los datos.
Tres, usa mapbox
El soporte integrado para mapbox es compatible con echartsGL. mapboxglSimplemente configure el objeto raíz de mapbox debajo de la ventana . Nuestra biblioteca mapbox autoencapsulada. así es:
window.mapboxgl = SE;
Luego configure el mapa en las opciones de echarts. Reemplace el mapa vectorial original de Baidu con el servicio wmts cargado por maobox.
El esquema de configuración de estilo puede referirse al archivo oficial de mapbox.
const mapbox = {
style: g_config.styleUrl,
boxHeight: 20,
zoom: zoom || undefined,
center: center || undefined,
light: {
main: {
intensity: 1,
shadow: true,
shadowQuality: 'high'
},
ambient: {
intensity: 0.2
}
}
};
Inicialización del mapa (la forma de copiar la demostración, tenga en cuenta que será coordinateSystemreemplazada mapbox):
series: [{
name: '弱',
type: 'scatterGL',
progressive: 1e6,
coordinateSystem: 'mapbox',
symbolSize: 1,
zoomScale: 0.002,
blendMode: 'lighter',
large: true,
itemStyle: {
color: 'rgb(20, 15, 2)'
},
postEffect: {
enable: true
},
silent: true,
dimensions: ['lng', 'lat'],
data: new Float32Array()
}]
Datos de acceso. Encontré que echarts_gl informó un error.
Aquí estoy confundido. Al comprobar repetidamente que los datos de entrada son coherentes con la demostración, tengo que sospechar que se debe a la compatibilidad de echarts y maobox. Así que revisé los archivos oficiales y encontré el siguiente punto sospechoso.
¿No hay ninguna configuración relacionada con mapbox? ¿Solo mapbox3d? Así que busqué mapbox3D en el código fuente y obtuve el siguiente código fuente.
Resultó que el elemento de configuración de mapbox está configurado en 3d de forma predeterminada. Es decir, ahora el mapbox incorporado de echarts solo puede ser 3D. Al revisar los documentos, descubrí que hay un tipo de gráfico que es scatter3Despecíficamente adecuado para diagramas de dispersión en escenas tridimensionales. Las siguientes son varias demostraciones seleccionadas del sitio web oficial
Probé scatterGLvarias configuraciones. Cuando todos los pensamientos se pierdan, se typecambiará a scatter3D. ¡Algo mágico sucedió! Todo es normal.
Solo hay una oración wtf en este momento. Lo que más temo no es cómo corregir un error y quejarme no es normal. Pero después del cambio, descubrí que era normal.
Inventaré el motivo de este problema más tarde, cuando tenga tiempo. Déjame hablar primero de lo siguiente
Cuatro, use appendData
Según la demostración oficial del sitio web, escribí una interfaz para solicitar datos del servidor en lotes. Sin embargo, cuando se presentaron los datos, se encontró que las partículas no se cargaban lentamente como en la demostración, sino que appendDatalos datos originales se actualizaban cada vez . Hubo un efecto similar a los fuegos artificiales. Esta es una mejor solución y encontré rápidamente el elemento de configuración progressiveThreshold. Este es el gráfico de dispersión de configuración, cuando los datos alcancen este valor, los datos se actualizarán, porque los datos que solicito cada vez son 1000 puntos. No 100000 en la demostración y este elemento de configuración predeterminado es 100000.
const options_points = {
//--mapbox为上文配置
mapbox,
series: [Object.assign({
},common, {
progressiveThreshold: 1000,
symbolSize: 2,
itemStyle: {
color: 'rgb(200, 15, 2)'
}
})]
}
La aplicación que hago es para solicitar todos los datos dispersos de un día determinado. Los datos de un día se pueden cargar de esta manera. Sin embargo, pronto encontré otro problema.
4. Borre los datos de appendData y vuelva a agregar
Cuando cambio a otro día, obviamente necesito borrar los datos que se agregaron ese día y luego agregarlos nuevamente. Según la comprensión de echarts, sé que no existe una interfaz como clearData. Solo a través de setOptions, el atributo de datos correspondiente en la serie se puede establecer en el valor predeterminado. Así que continué llamando al siguiente método al reiniciar:
this.scatter.setOption({
series: [
{
data: new Float32Array()
}
]
});
El efecto fue tan bueno como esperaba (pensé). Todos los puntos del mapa están borrados. Así que conecté la lógica empresarial y comencé la búsqueda de datos al día siguiente. Cuando los datos del segundo día comenzaron a agregarse, en realidad volví a encender los fuegos artificiales ~~~
Piense en la estrategia de fusión automática de opciones de echarts. No creo que deje que echarts se dé cuenta de que necesito borrar los datos y agregar el modo de datos actual). Así que pensé en otras formas en que echarts sintió que era hora de borrar los datos nuevamente. Modifique el valor de algunos elementos de configuración, por lo que echarts tiene que borrar algunos estados.
Cuando probé N veces. Al final lo logré. . .
setOption({
series: [
{
progressive: 1e6,
progressiveThreshold: 1000 + Math.random(),
data: new Float32Array()
}
]
});
Así es. Es el atributo de ahora progressiveThreshold. Cada vez que necesito volver a adjuntar, configuro este atributo para que sea diferente del anterior. Eso es correcto Math.random(). Así eCharts sentirán la necesidad de actualizar el estado de los datos, por lo que puede pasar a la siguiente ronda de carga por lotes.
conclusión V
Escribiré esto primero hoy. Habrá hoyos en el seguimiento para compensar.