Pie Chart

Pie Chart Implementation

A pie chart is a common form of data visualization that intuitively displays the proportional relationships of various parts within a whole through the size of its sectors. ECharts provides rich configuration options to achieve various pie chart effects, from basic pie charts to complex nested pie charts with ease.

Basic Pie Chart Implementation

The simplest pie chart only requires data and basic configuration. Below is a complete example code for a basic pie chart:

option = {  
  title: {  
    text: 'User Access Sources for a Site',  
    subtext: 'Fictional Data',  
    left: 'center'  
  },  
  tooltip: {  
    trigger: 'item',  
    formatter: '{a} <br/>{b}: {c} ({d}%)'  
  },  
  legend: {  
    orient: 'vertical',  
    left: 'left',  
    data: ['Direct Access', 'Email Marketing', 'Affiliate Ads', 'Video Ads', 'Search Engines']  
  },  
  series: [  
    {  
      name: 'Access Sources',  
      type: 'pie',  
      radius: '50%',  
      data: [  
        {value: 335, name: 'Direct Access'},  
        {value: 310, name: 'Email Marketing'},  
        {value: 234, name: 'Affiliate Ads'},  
        {value: 135, name: 'Video Ads'},  
        {value: 1548, name: 'Search Engines'}  
      ],  
      emphasis: {  
        itemStyle: {  
          shadowBlur: 10,  
          shadowOffsetX: 0,  
          shadowColor: 'rgba(0, 0, 0, 0.5)'  
        }  
      }  
    }  
  ]  
};  

This code creates a standard pie chart, including a title, legend, and tooltip. The radius property controls the size of the pie chart, set to '50%' to indicate that the diameter occupies half the width of the container.

Doughnut Pie Chart

By setting radius as an array, a doughnut pie chart effect can be achieved:

series: [{  
  type: 'pie',  
  radius: ['40%', '70%'],  
  data: [  
    {value: 1048, name: 'Search Engines'},  
    {value: 735, name: 'Direct Access'},  
    {value: 580, name: 'Email Marketing'},  
    {value: 484, name: 'Affiliate Ads'},  
    {value: 300, name: 'Video Ads'}  
  ]  
}]  

Here, radius: ['40%', '70%'] means an inner radius of 40% and an outer radius of 70%, creating a ring effect. The larger the inner radius, the thinner the ring.

Nightingale Rose Chart

The Nightingale rose chart is a variant of the pie chart, displaying data through both radius and angle:

series: [{  
  type: 'pie',  
  radius: [30, 110],  
  center: ['50%', '50%'],  
  roseType: 'radius',  
  itemStyle: {  
    borderRadius: 8  
  },  
  data: [  
    {value: 40, name: 'rose 1'},  
    {value: 38, name: 'rose 2'},  
    {value: 32, name: 'rose 3'},  
    {value: 30, name: 'rose 4'},  
    {value: 28, name: 'rose 5'},  
    {value: 26, name: 'rose 6'},  
    {value: 22, name: 'rose 7'},  
    {value: 18, name: 'rose 8'}  
  ]  
}]  

Setting roseType to 'radius' means the sector radius varies with the value, or it can be set to 'area' to make the area vary with the value.

Multi-Level Nested Pie Chart

ECharts supports creating multi-layered nested pie charts, suitable for hierarchical data:

series: [  
  {  
    name: 'Access Sources',  
    type: 'pie',  
    selectedMode: 'single',  
    radius: [0, '30%'],  
    label: {  
      position: 'inner',  
      fontSize: 14  
    },  
    labelLine: {  
      show: false  
    },  
    data: [  
      {value: 1548, name: 'Search Engines'},  
      {value: 775, name: 'Direct Access'},  
      {value: 679, name: 'Others', selected: true}  
    ]  
  },  
  {  
    name: 'Detailed Sources',  
    type: 'pie',  
    radius: ['45%', '60%'],  
    labelLine: {  
      length: 30  
    },  
    data: [  
      {value: 1048, name: 'Baidu'},  
      {value: 335, name: 'Google'},  
      {value: 310, name: 'Bing'},  
      {value: 251, name: 'Others'},  
      {value: 234, name: 'Email Marketing'},  
      {value: 147, name: 'Affiliate Ads'},  
      {value: 135, name: 'Video Ads'},  
      {value: 102, name: 'Others'}  
    ]  
  }  
]  

This example creates a two-layer pie chart, with the inner layer displaying broad categories and the outer layer showing detailed classifications. Different radius ranges achieve the nested effect.

Customizing Pie Chart Styles

ECharts allows deep customization of various parts of the pie chart:

series: [{  
  type: 'pie',  
  radius: '55%',  
  center: ['50%', '60%'],  
  data: [  
    {  
      value: 335,  
      name: 'Direct Access',  
      itemStyle: {  
        color: '#c23531',  
        shadowColor: 'rgba(0, 0, 0, 0.5)',  
        shadowBlur: 10  
      }  
    },  
    {  
      value: 310,  
      name: 'Email Marketing',  
      itemStyle: {  
        color: '#2f4554'  
      }  
    },  
    {  
      value: 234,  
      name: 'Affiliate Ads',  
      itemStyle: {  
        color: '#61a0a8'  
      }  
    },  
    {  
      value: 135,  
      name: 'Video Ads',  
      itemStyle: {  
        color: '#d48265'  
      }  
    },  
    {  
      value: 1548,  
      name: 'Search Engines',  
      itemStyle: {  
        color: '#91c7ae'  
      }  
    }  
  ],  
  label: {  
    color: '#333',  
    fontSize: 14,  
    formatter: '{b}: {c} ({d}%)'  
  },  
  labelLine: {  
    lineStyle: {  
      color: 'rgba(0, 0, 0, 0.3)'  
    },  
    smooth: 0.2,  
    length: 10,  
    length2: 20  
  }  
}]  

This example demonstrates how to customize the color of each sector, label styles, and guide line styles. itemStyle can set the style for individual data items, overriding global styles.

Pie Chart Interaction Features

ECharts' pie charts support rich interactive features:

option = {  
  series: [{  
    type: 'pie',  
    data: [  
      {value: 335, name: 'Direct Access'},  
      {value: 310, name: 'Email Marketing'},  
      {value: 234, name: 'Affiliate Ads'},  
      {value: 135, name: 'Video Ads'},  
      {value: 1548, name: 'Search Engines'}  
    ],  
    selectedMode: 'multiple',  
    selectedOffset: 30,  
    emphasis: {  
      scale: true,  
      scaleSize: 10,  
      itemStyle: {  
        shadowBlur: 20,  
        shadowColor: 'rgba(0, 0, 0, 0.5)'  
      },  
      label: {  
        show: true,  
        fontSize: '20',  
        fontWeight: 'bold'  
      }  
    }  
  }]  
};  

Setting selectedMode to 'multiple' allows multiple selections, and selectedOffset controls the offset distance of selected sectors. The emphasis configuration defines the highlighting effect when hovering, including scaling, shadows, and highlighted labels.

Dynamic Data Updates

Pie charts support dynamic data updates, enabling animation effects:

let currentIndex = -1;  
setInterval(function () {  
  const dataLen = option.series[0].data.length;  
  myChart.dispatchAction({  
    type: 'downplay',  
    seriesIndex: 0,  
    dataIndex: currentIndex  
  });  
  currentIndex = (currentIndex + 1) % dataLen;  
  myChart.dispatchAction({  
    type: 'highlight',  
    seriesIndex: 0,  
    dataIndex: currentIndex  
  });  
  myChart.dispatchAction({  
    type: 'showTip',  
    seriesIndex: 0,  
    dataIndex: currentIndex  
  });  
}, 1000);  

This code implements an automatic carousel highlighting effect for the pie chart, highlighting the next sector and displaying the tooltip every second.

Optimization for Large Data Volumes

When a pie chart has many data items, performance can be optimized in the following ways:

series: [{  
  type: 'pie',  
  data: [...], // Large dataset  
  avoidLabelOverlap: true,  
  label: {  
    show: false  
  },  
  emphasis: {  
    label: {  
      show: true  
    }  
  },  
  silent: true,  
  animationDurationUpdate: 1000  
}]  

Setting avoidLabelOverlap prevents label overlap, hiding labels by default and only showing them on hover (emphasis.label.show). silent disables graphic element responses and mouse events, and animationDurationUpdate controls the animation duration.

Combining Pie Charts with Other Chart Types

Pie charts can be combined with other chart types:

option = {  
  grid: [  
    {left: '55%', top: '15%', width: '40%', height: '40%'},  
    {left: '7%', top: '7%', right: '52%', bottom: '52%'}  
  ],  
  xAxis: [  
    {gridIndex: 1, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}  
  ],  
  yAxis: [  
    {gridIndex: 1}  
  ],  
  series: [  
    {  
      type: 'pie',  
      radius: '30%',  
      center: ['75%', '35%'],  
      data: [  
        {value: 335, name: 'Direct Access'},  
        {value: 310, name: 'Email Marketing'},  
        {value: 234, name: 'Affiliate Ads'},  
        {value: 135, name: 'Video Ads'},  
        {value: 1548, name: 'Search Engines'}  
      ]  
    },  
    {  
      type: 'line',  
      xAxisIndex: 0,  
      yAxisIndex: 0,  
      data: [120, 132, 101, 134, 90, 230, 210]  
    }  
  ]  
};  

This example combines a pie chart with a line chart in a single visualization, using the grid configuration to divide the layout areas for different charts.