Pie Chart

Code

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' }
    ]
  }]
});

Explanation

A two-element radius array (['40%','70%']) turns the pie into a donut. The formatter tokens {b} (name), {c} (value), and {d} (percentage) make labels and tooltips easy to customize. The emphasis block scales label size and adds a shadow on hover; avoidLabelOverlap:false keeps labels positioned naturally.

More ECharts Snippets