Visualización de datos
innovador:
concepto:
Herramienta: Biblioteca de gráficos E (los siete iconos más utilizados)
Los conceptos básicos de Echarts: temas de Echarts, efectos de animación, API de Echarts
Uso avanzado de Echarts:
Proyecto: Sistema de monitoreo en tiempo real de visualización de datos de plataforma de comercio electrónico
Implemente el módulo de funciones:
- Construcción en segundo plano: dado que los datos del gráfico se obtienen del servidor, es necesario crear un servidor en segundo plano.
- Combine Vue para desarrollar componentes de iconos (el proyecto se basa en el marco de Vue)
- WebSocket implementa el envío de datos (implementando el servidor para enviar datos como un cliente)
- Cambio de tema/fusión de páginas/cambio de pantalla completa. . .
Reserva de conocimiento: HTML, CSS, JS, Echarts, vue, vuex, enrutador, webpack, websocket
Proyecto: desarrollo paralelo front-end y back-end
Comando: npm run server/npm run start
Demostración del proyecto: 1. Este proyecto es un sistema de monitoreo en tiempo real para la visualización de datos de la plataforma de comercio electrónico.
2. Puede garantizar la adquisición de datos en tiempo real para su análisis.
3. Admite pantalla grande, resolución adaptable
4. Admite efectos de enlace, operación en un extremo, visualización de enlace multiterminal
El concepto de visualización de datos: muestra los datos de una forma más intuitiva, la relación entre los datos y los datos es clara de un vistazo (el texto no es tan bueno como la tabla, la tabla no es tan buena como la imagen), y la información oculta en los datos se puede encontrar (arriba o abajo)
Implementación de visualización: 1. Clase de informe (excel, crystal report) 2. BI de inteligencia empresarial (Microsoft BI, power-BI) 3. Clase de codificación (echarts.js, d3.js, biblioteca de visualización de datos)
Introducción a Echarts: una biblioteca de visualización de código abierto desarrollada por Baidu usando js para lograr una gran compatibilidad. Activo, solo que no puedes pensar en nada que él no pueda hacer, cientos de gráficos.
Visualización de datos: consiste en presentar datos a través de gráficos más intuitivos. Los iconos son solo una forma de presentación. El núcleo son los datos en sí. Los gráficos E admiten múltiples formatos de datos: como formato de datos clave-valor, tabla bidimensional, formato TypedArray. , Soporte de datos por convección: los beneficios de la transmisión de datos: solo para un gran tráfico de datos, los datos en sí toman mucho tiempo, cuántos datos se cargan, se representarán dinámicamente (representación de datos de transmisión en invierno) y solo los datos modificados se renderizará (tecnología de renderizado incremental)
Uso básico de Echarts-1 Histograma
Pasos de uso básicos: 1. Importe el archivo echarts.js 2. Prepare un cuadro para presentar el gráfico (detalles: el ancho y el alto son obligatorios)
3. Inicialice el objeto de instancia echarts (el parámetro del elemento dom echarts.init('dom') determina la posición de presentación final del gráfico) 4. Prepare los elementos de configuración (especialmente clave: determine el modo de visualización y los datos mostrados del gráfico, para para decirlo sin rodeos es un objeto) 5. Establezca el elemento de configuración en el objeto de instancia de Echarts (a través de .setOption (objeto de configuración) del objeto de instancia
Resumen del uso de elementos de configuración: 1. Excepto por los cambios de elementos de configuración, otros códigos son fijos
2. El aprendizaje y el uso de elementos de configuración deben consultar documentos y ejemplos oficiales.
Algunos elementos de configuración básicos:
xAxis: objeto del eje X {} en sistema de coordenadas cartesiano
yAxis: objeto del eje Y {} en sistema de coordenadas cartesiano
serie: lista de series, cada serie determina su propia matriz de tipo de gráfico por tipo []
constante BarArr=[70,80,90]
opción var={
título:{
texto:'Calificación', //título principal
enlace:'http://www.baidu'//Haga clic en el título principal para saltar a la ubicación señalada por el enlace
textStyle:{fontStyle='normal'} //El estilo de fuente del título principal
}
xAxis:{type:'category', // la categoría representa el eje de categorías, lo que significa que la categoría del eje de categorías x debe especificarse y debe especificarse a través del atributo de datos data:['Xiaoming',' Xiaohong',' Pequeño Púrpura']}
yAxis:{type:'value'// el tipo se establece en el eje de valor, no es necesario configurar datos, el eje y encontrará automáticamente el valor de los datos en la serie de acuerdo con cada categoría del eje x}
serie:[{nombre:'idioma'//Tres valores son puntuaciones de idioma tipo:'barra'//qué representan los gráficos, datos: BarArr } color:'rojo'//color de columna], efecto común: marca markPoint :{ //Marca los datos de los valores máximo y mínimo: [{type:'max',name:'maximum value'
},{tipo:'min',nombre:'valor mínimo'}]
}, markLine:{//línea promedio
datos:[{tipo:'promedio',nombre:'promedio'}]
}, la pantalla se divide en: etiqueta de visualización numérica: {// visualización numérica (cada visualización numérica) show: true, rotar: 60, //ángulo de rotación, posición:'inside, //cada valor numérico se muestra en una barra gráfico }Visualización del ancho de columna: barWidth:'30', histograma horizontal: cambiar la función del eje x y el eje y xAxis:{type:value},yAxis:{type:category,data: BarArr}
}
código:
Histograma resumido:
- Gráfico de columnas básico: estructura de código básica, datos de los ejes x e y, el tipo de serie está configurado en barras
- Efectos comunes de los histogramas: valor máximo/mínimo markPoint, valor promedio markLine, etiqueta de visualización numérica, ancho de columna barWidth
- Las características del histograma: el histograma describe los datos de clasificación, mostrando el número de cada categoría, a través del histograma, puede ver claramente la clasificación de cada categoría.
-
Título de configuración general: título, mensaje: información sobre herramientas (), botón de herramienta (proporcionado por Echarts): caja de herramientas, columna del gráfico: leyenda, que se refiere a la configuración que se puede usar para cualquier tipo de gráfico.
Opción Var={
título:{text:'Visualización de puntuación', textStyle:{color:'red'}//estilo de texto, posición del título: izquierda:30, arriba:30, borde del título: borderWidth, borderColor, borderRadious }
información sobre herramientas:{// formación de cuadros de aviso, que se utiliza para configurar el cuadro de visualización cuando el mouse se desplaza sobre el gráfico o hace clic en él, tipo de disparador, tiempo de disparo de triggerOn, formateador: 'El contenido mostrado generalmente coincide con la cadena de plantilla, el documento de referencia o función de devolución de llamada'
trigger:item: //Se activa cuando el mouse se mueve hacia adentro, no se muestra cuando el mouse se mueve hacia afuera
trigger:axis //Siempre que el mouse se muestre en el eje de coordenadas
triggerOn:click //No se activa cuando el mouse se mueve hacia adentro, solo cuando se hace clic para mostrar el mensaje
formateador: `El título de {b} es {c}`
formatter:function(arg){return arg[0].name+' la puntuación es '+arg[0].data} //el valor de retorno es el contenido mostrado}
caja de herramientas: {feature:{saveImae:{} //Se puede hacer clic en los gráficos para descargar, exportar imágenes, vista de datos:{} puede ver los datos de origen y modificarlos, ver datos, restaurar:{} restablecer datos, dataZoom:{} zoom de área, magicType:{type:['bar','line']} // Visualización dinámica de datos, cambiar entre gráfico de barras y gráfico de líneas}
Leyenda: columna del gráfico, utilizada para filtrar series, debe usarse junto con las series, los datos en la leyenda son una matriz y el valor de los datos en la leyenda debe ser coherente con el valor del nombre de un grupo de datos en la matriz de la serie.
leyenda:{datos:['chino','matemáticas']}
}