ECharts Gráfico de pastel
En los capítulos anteriores ya hemos aprendido a usar ECharts para dibujar un gráfico de barras simple. En este capítulo dibujaremos un gráfico de pastel.
El gráfico de pastel muestra principalmente la proporción de datos de diferentes categorías en el total mediante el ángulo de los sectores. Su formato de datos es más simple que el del gráfico de barras: solo tiene valores unidimensionales, no necesita categorías. Como no está en un sistema de coordenadas cartesianas, tampoco necesita xAxis ni yAxis.
Ejemplo
myChart.setOption({
series : [
{
name: 'Fuente de acceso',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'Publicidad en video'},
{value:274, name:'Publicidad de afiliados'},
{value:310, name:'Marketing por correo electrónico'},
{value:335, name:'Acceso directo'},
{value:400, name:'Motor de búsqueda'}
]
}
]
})
Pruébalo »
También podemos configurar parámetrosroseType: 'angle'para mostrar el gráfico de pastel como un gráfico de rosa de Nightingale.
Ejemplo
option = {
series : [
{
name: 'Fuente de acceso',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'Publicidad en video'},
{value:274, name:'Publicidad de afiliados'},
{value:310, name:'Marketing por correo electrónico'},
{value:335, name:'Acceso directo'},
{value:400, name:'Motor de búsqueda'}
]
}
]
};
Pruébalo »
Configuración de sombras
El parámetro itemStyle puede configurar, por ejemplo, sombras, transparencia, color, color del borde, grosor del borde, etc.:
Ejemplo
option = {
series : [
{
name: 'Fuente de acceso',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'Publicidad en video'},
{value:274, name:'Publicidad de afiliados'},
{value:310, name:'Marketing por correo electrónico'},
{value:335, name:'Acceso directo'},
{value:400, name:'Motor de búsqueda'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Pruébalo »
Otras extensiones