La grafica de pie sirve para representar proporciones de datos en un pie o pastel, donde cada elemento es una rebanada del pastel, vamos a crearla con EChartsJs.
Siguiendo con esta serie de articulos sobre EchartsJS ahora vamos por la grafica de Pie o pastel o como ustedes le llamen.
Ya tenemos descargado la libreria Echartjs que vimos en el primer ejemplo de crear una grafica de Area con echartsjs.
Ahora vamos a crear la grafica de Pie.
Codigo
Lo primero que tenemos que hacer como en todos los ejemplos es crear nuestro documento HTML. Pero esta ocacion les voy a dejar todo el documento con algunos comentarios.
<html>
<head>
<!-- Agregar la libreria EChartJS-->
<script src="dist/echarts.min.js"></script>
</head>
<body>
<!-- Agregamos un titulo para el documento que es visible en el body -->
<h1>Probando Echarts JS</h1>
<!-- Agregamos un Div "Contenedor" en el cual se va a mostrar la grafica -->
<div id="grafica" style="width: 100%;height:500px;"></div>
<!-- Ahora en este script vamos a inicializar, crear y renderizar la grafica-->
<script>
var chartDom = document.getElementById('grafica'); // obtenemos el contexto del contenedor
var myChart = echarts.init(chartDom); // Inicializamos la libreria EChartsJs
var option;
// Creamos la variable de opciones la cual contiene la serie de datos y las configuraciones para la grafica
option = {
title: {
text: 'Venta de productos',
subtext: 'Datos de ventas',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Ventas totalres',
type: 'pie',
radius: '80%',
data: [
{ value: 948, name: 'Refrescos' },
{ value: 635, name: 'Linea blanca' },
{ value: 780, name: 'Frutas y verdudas' },
{ value: 884, name: 'Vinos y licores' },
{ value: 200, name: 'Jugueteria' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.7)'
}
}
}
]
};
myChart.setOption(option); // Asignamos las opciones y renderizamos los datos.
</script>
</body>
</html>En la seccion serie > data se puede agregar los parametros { value: 10, name : “Producto”} donde en value y name pueden poner los valores que ustedes quieran, siempre separando cada item usando comma “,”.
En este ejemplo mi archivo de codigo se llama pruebapie.html el cual les comparto al final del articulo via DropBox.
Resultado
El resultado al ejecutar el script es el siguiente.
Asi se puede ver nuestra grafica de pie.
Descarga
Descarga ejemplo de grafica Pie con Echarts.
No olvides dejar tus comentarios!
Referencias
Pagina principal de EchartsJS: https://echarts.apache.org/en/index.html
Github oficial de EchartsJS: https://github.com/apache/echarts