基础饼状图

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      // 饼图的半径，通过这项可以设置一个中空的圆环
      radius: '50%',
      // 会自动根据这里提供的数据自动计算占比大小
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      // 鼠标移至扇区上高亮状态的扇区和标签样式。
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

环形圆角图

radius可以设置为数组，第一个为内圆的半径，第二个为外圆的半径，那么就可以形成环形

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: true,
      // 扇形图形样式。
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      // 设置标签相关的内容，在这里设置关闭标签的显示
      label: {
        show: false,
        position: 'center'
      },
      // 当鼠标移动到指定的扇形上时，会对上面设置的label进行修改
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      // labelline指的是label到指定扇区之间的那条线
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

半圆环图

实现半圆环图，通过计算现有数据总量，模拟一个数据等于数据总量，也就是这个模拟的数据占一半，把这个数据设置为透明就可以得到一个显示为半环行的图

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center',
    // 不能对数据进行筛选，因为在下面设置了一个大的空白，当筛选时，不能保持图形一直保持半环
    selectedMode: false
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      // 调整开始的角度
      startAngle: 180,
      label: {
        show: true,
        // 添加了虚拟数据，所以需要纠正每个数据项的百分比数值
        formatter(param) {
          // correct the percentage
          return param.name + ' (' + param.percent * 2 + '%)';
        }
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
        {
          // 伪造记录充满50%
          value: 1048 + 735 + 580 + 484 + 300,
          itemStyle: {
            // 阻止渲染这块图形
            color: 'none',
            decal: {
              symbol: 'none'
            }
          },
          label: {
            show: false
          }
        }
      ]
    }
  ]
};