Skip to content
ECharts

Pie Chart

Donut-style pie with emphasis effect and percentage labels.

#echarts#pie

Code

echarts
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  legend: { bottom: '5%', left: 'center' },
  series: [{
    name: 'Access Source',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    label: { show: true, formatter: '{b}: {d}%' },
    emphasis: {
      label: { show: true, fontSize: 18, fontWeight: 'bold' },
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0,0,0,0.5)'
      }
    },
    data: [
      { value: 1048, name: 'Direct' },
      { value: 735, name: 'Search' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union' },
      { value: 300, name: 'Video' }
    ]
  }]
});