ECharts pie chart
In the previous chapters, we have learned to use ECharts to draw a simple bar chart. In this chapter, we will draw a pie chart.
A pie chart mainly uses the arc of sectors to show the proportion of different categories' data in the total. Its data format is simpler than a bar chart, with only one-dimensional values, and no categories are needed. Because it is not on a Cartesian coordinate system, xAxis and yAxis are also not needed.
Example
myChart.setOption({
series : [
{
name: 'Traffic Source',
type: 'pie', //Set chart type to pie chart
radius: '55%', //The radius of the pie chart: the outer radius is 55% of the visible area size (the smaller of the container's height and width).
data:[ //Data array, where name is the data item name and value is the data item value.
{value:235, name:'Video Ad'},
{value:274, name:'Affiliate Ad'},
{value:310, name:'Email Marketing'},
{value:335, name:'Direct Access'},
{value:400, name:'Search Engine'}
]
}
]
})
Try it Yourself »
We can also, by setting parameters,roseType: 'angle'display the pie chart as a Nightingale chart.
Example
option = {
series : [
{
name: 'Traffic Source',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'Video Ad'},
{value:274, name:'Affiliate Ad'},
{value:310, name:'Email Marketing'},
{value:335, name:'Direct Access'},
{value:400, name:'Search Engine'}
]
}
]
};
Try it Yourself »
Shadow configuration
The itemStyle parameter can set things like shadow, transparency, color, border color, border width, etc.:
Example
option = {
series : [
{
name: 'Traffic Source',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'Video Ad'},
{value:274, name:'Affiliate Ad'},
{value:310, name:'Email Marketing'},
{value:335, name:'Direct Access'},
{value:400, name:'Search Engine'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Try it Yourself »