¿Cómo hacer informes visuales en el front-end?

A continuación se muestran dos bibliotecas js para generar informes visuales de front-end, una es echarts y la otra es g2. Estas dos bibliotecas cubren la producción de la mayoría de los informes, incluidos gráficos de líneas, gráficos de barras, gráficos circulares, gráficos de dispersión, etc. Son fáciles de usar, tienen documentación detallada y ejemplos completos. Permítanme presentarles brevemente estas dos bibliotecas:

Echarts: esta es una biblioteca visual js de front-end desarrollada por Baidu. Puede ejecutarse sin problemas en dispositivos móviles y PC, es compatible con la mayoría de los navegadores y proporciona información intuitiva. Iconos visuales interactivos y altamente personalizables. Permítanme presentarles brevemente el propósito de esta biblioteca:

1. Descargue echart.js localmente, como se muestra a continuación. Si está desarrollando, se recomienda descargar la versión del código fuente:

2. Una vez que la descarga se haya realizado correctamente, podemos introducir echarts.js en html localmente. El código de prueba es el siguiente. Simplemente dibuja un histograma, muy sencillo:

Guarda este archivo html y ábrelo con un navegador. El efecto es el siguiente:

Este es sólo un ejemplo introductorio simple. Para obtener más ejemplos, consulte los ejemplos en el sitio web oficial, que cubre la producción de varios informes, incluidos mapas, cartas polares, mapas de calor, etc. El proceso es muy detallado y se puede editar y ejecutar en línea. No entraré en detalles aquí, de la siguiente manera:

G2: esta es una biblioteca de visualización front-end desarrollada por Alibaba. Es fácil de aprender, basado en datos, altamente escalable y fácil de usar. Los usuarios pueden crear rápidamente informes estadísticos en unas pocas frases sin prestar atención a los detalles de implementación subyacentes. Permítanme presentarles brevemente el propósito de esta biblioteca:

1. El código de prueba es el siguiente. Aquí puede importar la biblioteca g2.js en línea o descargar g2.js localmente y luego importarlo. Aquí hay un histograma simple:

El efecto del navegador es el siguiente:

Para obtener más ejemplos, puede consultar el tutorial en el sitio web oficial, que es muy detallado. Se introducen varios componentes y el código también es muy detallado. Haga clic para ver el código fuente y las representaciones de operación:

Hasta ahora, hemos completado el uso simple de dos bibliotecas visuales js echarts y g2. En general, ambas bibliotecas son muy fáciles de usar, fáciles de aprender y fáciles de usar. El sitio web oficial proporciona un tutorial muy completo para que lo utilicen los desarrolladores. Por supuesto, además de estas dos bibliotecas, también existen bibliotecas de visualización como D3 y Highcharts, que no se presentarán en detalle aquí. Si está interesado, puede buscarlo usted mismo. También hay tutoriales e información relevantes en línea. Espero que el contenido compartido anteriormente pueda ayudarte.