Tutorial de ECharts

ECharts es una biblioteca de visualización de código abierto implementada en JavaScript, que cubre gráficos de diversas industrias y satisface diversas necesidades.

ECharts ofrece una gran variedad de tipos de gráficos y capacidades de interacción, lo que permite a los usuarios generar todo tipo de gráficos mediante una configuración sencilla, incluyendo, entre otros, gráficos de líneas, barras, dispersión, pastel, radar, mapas, etc.

ECharts sigue la licencia de código abierto Apache-2.0 y es gratuito para uso comercial.

ECharts es compatible con la gran mayoría de los navegadores actuales (IE8/9/10/11, Chrome, Firefox, Safari, etc.) y con múltiples dispositivos, lo que permite mostrarlo libremente en cualquier momento y lugar.

Antes de leer este tutorial, necesitas saber:

Para leer este tutorial, necesitas tener los siguientes conocimientos básicos:

Primer ejemplo de ECharts

Ejemplo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Primer ejemplo de ECharts</title> <!--Importar echarts.js--> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!--Preparar un DOM con dimensiones (ancho y alto) para ECharts--> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript">// Inicializa la instancia de ECharts basada en el DOM preparado var myChart = echarts.init(document.getElementById('main')); // Especifica las opciones de configuración y los datos del gráfico var option = { title: { text: 'Primer ejemplo de ECharts' }, tooltip: {}, legend: { data:['Ventas'] }, xAxis: { data: ["Camisas","Suéteres","Blusas de gasa","Pantalones","Tacones","Calcetines"] }, yAxis: {}, series: [{ name: 'Ventas', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // Usa las opciones de configuración y los datos recién especificados para mostrar el gráfico. myChart.setOption(option);</script> </body> </html>

Pruébalo »

Haz clic en el botón "Pruébalo" para ver el ejemplo en línea.

Características de ECharts

ECharts incluye las siguientes características:

  • Amplia variedad de tipos de visualización: Proporciona gráficos de líneas, barras, dispersión, pastel, velas (K-line), diagramas de caja para estadísticas, mapas, mapas de calor, gráficos de líneas para la visualización de datos geográficos, gráficos de relaciones, treemap, gráficos de sol naciente para la visualización de datos relacionales, coordenadas paralelas para la visualización de datos multidimensionales, así como gráficos de embudo y paneles para BI, y admite la combinación entre gráficos.

  • Múltiples formatos de datos utilizables directamente sin conversión: El atributo dataset integrado (4.0+) admite pasar directamente fuentes de datos en varios formatos, como tablas bidimensionales, key-value, entre otros; además, admite la entrada de datos en formato TypedArray.

  • Visualización de decenas de millones de datos en el frontend: Mediante la tecnología de renderizado incremental (4.0+) y diversas optimizaciones meticulosas, ECharts puede mostrar cantidades de datos de decenas de millones.

  • Optimización para dispositivos móviles: Se han realizado optimizaciones detalladas para la interacción en móviles, por ejemplo, en pantallas pequeñas es adecuado usar los dedos para hacer zoom y desplazar en el sistema de coordenadas. En PC también se puede hacer zoom (con la rueda del ratón) y desplazar en el gráfico con el ratón.

  • Múltiples opciones de renderizado, uso multiplataforma: Admite renderizar gráficos en formato Canvas, SVG (4.0+) y VML.

  • Exploración de datos interactiva y profunda: Proporciona componentes interactivos listos para usar, como leyenda, mapeo visual, zoom de área de datos, tooltip, selección de datos, etc., que permiten realizar operaciones interactivas como filtrar datos multidimensionales, hacer zoom en la vista y mostrar detalles.

  • Soporte de datos multidimensionales y ricos medios de codificación visual: Para los gráficos de dispersión tradicionales, los datos introducidos también pueden ser de múltiples dimensiones.

  • Datos dinámicos: Los cambios en los datos impulsan cambios en la visualización del gráfico.

  • Efectos visuales deslumbrantes: Proporciona efectos llamativos para la visualización de datos geográficos, como datos de líneas y puntos.

  • Visualización 3D más potente y deslumbrante mediante GL: Implementa efectos de visualización 3D en escenarios de VR y pantallas grandes.

  • Accesibilidad (4.0+): Admite la generación automática e inteligente de descripciones según la configuración del gráfico, lo que permite que las personas ciegas puedan comprender el contenido del gráfico con la ayuda de lectores de pantalla, haciendo que los gráficos sean accesibles para más personas.

Otras extensiones