Tutorial de ECharts
ECharts es una biblioteca de visualización de código abierto implementada usando JavaScript, que cubre varios gráficos de la industria para satisfacer diversas necesidades.
ECharts sigue el acuerdo de código abierto Apache-2.0 y es gratuito para uso comercial.
ECharts es compatible con la mayoría de los navegadores actuales (IE8 / 9/10/11, Chrome, Firefox, Safari, etc.) y es compatible con múltiples dispositivos, y se puede mostrar a voluntad en cualquier momento y en cualquier lugar.
Antes de leer este tutorial, lo que necesita saber:
Para leer este tutorial, debe tener los siguientes conceptos básicos:
La primera instancia de ECharts
Ejemplos
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>Haga clic en el botón "Probar" para ver ejemplos en línea
Características de ECharts
ECharts incluye las siguientes características:
-
Tipos de visualización enriquecidos : proporciona gráficos de líneas convencionales, gráficos de barras, gráficos de dispersión, gráficos circulares, gráficos de líneas K, gráficos de cuadros para estadísticas, mapas, mapas de calor y gráficos de líneas para visualización de datos geográficos. Diagramas relacionales para la visualización de datos relacionales, mapas de árbol, diagramas de rayos solares, coordenadas paralelas para la visualización de datos multidimensionales, diagramas de embudo para BI, paneles y soporte para la combinación entre diagramas y diagramas.
-
Se puede usar una variedad de formatos de datos directamente sin conversión : la propiedad del conjunto de datos incorporado (4.0+) admite la entrada directa de fuentes de datos, incluidas tablas bidimensionales, valores-clave y otros formatos. Además, también admite la entrada de datos en formato TypedArray.
-
Visualización frontal de 10 millones de datos : con tecnología de renderizado incremental (4.0+) y varias optimizaciones detalladas, ECharts puede mostrar 10 millones de niveles de datos.
-
Optimización del terminal móvil : el terminal móvil se ha optimizado cuidadosamente, por ejemplo, la pequeña pantalla del terminal móvil es adecuada para hacer zoom y desplazarse en el sistema de coordenadas con los dedos. La PC también puede usar el mouse para hacer zoom (use la rueda del mouse), paneo, etc.
-
Esquema de representación múltiple, uso multiplataforma : admite gráficos de representación en forma de Canvas, SVG (4.0+), VML.
-
Exploración de datos interactiva en profundidad : proporciona leyenda, mapeo visual, zoom de área de datos, información sobre herramientas, cepillado de datos y otros componentes interactivos listos para usar, que pueden realizar filtros de datos multidimensionales, ver zoom, mostrar detalles y otras operaciones interactivas .
-
Soporte de datos multidimensionales y ricos métodos de codificación visual : para diagramas de dispersión tradicionales, etc., los datos entrantes también pueden estar en múltiples dimensiones.
-
Datos dinámicos : cambios en los cambios de la unidad de datos en la presentación del gráfico.
-
Efectos especiales brillantes : la visualización de datos de línea, datos de puntos y otros datos geográficos proporciona efectos especiales llamativos.
-
Realice una visualización 3D cada vez más potente y hermosa a través de GL: Realice la visualización 3D en realidad virtual y escenas de pantalla grande.
- Acceso sin barreras (4.0+) : admite la generación automática de descripciones basadas en los elementos de configuración del gráfico, para que las personas ciegas puedan comprender el contenido del gráfico con la ayuda de dispositivos de lectura, ¡para que más personas puedan acceder al gráfico!
