ECharts Pie Chart

In the previous chapters, we have learned how to use ECharts to draw a simple bar chart. In this chapter, we will create a pie chart.

A pie chart primarily represents the proportion of different categories of data in the total through the arc of the sectors. Its data format is simpler than that of a bar chart, consisting of only one-dimensional values and no need for categories. Since it is not on a rectangular coordinate system, there is no need for xAxis or yAxis.

Example

myChart.setOption({
    series : [
        {
            name: 'Source of Visit',
            type: 'pie',    // Set chart type to pie chart
            radius: '55%',  // Radius of the pie chart, outer radius is 55% of the viewport size (smaller of container width or height).
            data:[          // Data array, name is the data item name, value is the data item value
                {value:235, name:'Video Ads'},
                {value:274, name:'Affiliate Ads'},
                {value:310, name:'Email Marketing'},
                {value:335, name:'Direct Access'},
                {value:400, name:'Search Engines'}
            ]
        }
    ]
})

We can also display the pie chart as a Nightingale chart by setting the parameter roseType: 'angle'.

Example

option = {
    series : [
        {
            name: 'Source of Visit',
            type: 'pie',
            radius: '55%',
            roseType: 'angle',
            data:[
                {value:235, name:'Video Ads'},
                {value:274, name:'Affiliate Ads'},
                {value:310, name:'Email Marketing'},
                {value:335, name:'Direct Access'},
                {value:400, name:'Search Engines'}
            ]
        }
    ]
};

Shadow Configuration

The itemStyle parameter can set attributes such as shadow, transparency, color, border color, and border width:

Example

option = {
    series : [
        {
            name: 'Source of Visit',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'Video Ads'},
                {value:274, name:'Affiliate Ads'},
                {value:310, name:'Email Marketing'},
                {value:335, name:'Direct Access'},
                {value:400, name:'Search Engines'}
            ],
            roseType: 'angle',
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};