Pie 饼图

基本属性

const options = {
  series: [
    {
      type: 'pie',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
      ],
      radius: ['40%', '70%'], // 内外半径
      label: {
        show: true, // 显示标签
      },
      labelLine: {
        show: true, // 显示引导线
      },
    },
  ],
}

居中标题

const options = {
  title: {
    text: '总计',
    left: 'center',
    top: 'center',
    textStyle: {
      fontSize: 24,
    },
  },
  series: [
    {
      type: 'pie',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
      ],
      radius: ['40%', '70%'], // 内外半径
    },
  ],
}

禁用 hover 放大效果

const options = {
  series: [
    {
      type: 'pie',
      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: {
        scale: false, // 禁用 hover 放大效果
      },
    },
  ],
}

百分比饼图

const options = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: progress,
          name: '完成度',
          itemStyle: {
            color: '#165dff', // 蓝色
          },
          label: {
            show: true, // 显示标签
            formatter: '完成度 {d}%', // 显示百分比
          },
          labelLine: {
            show: true, // 显示引导线
          },
          emphasis: {
            scale: true, // 启用放大
            scaleSize: 10,
          },
        },
        {
          value: 1 - progress,
          itemStyle: {
            color: '#E5E6EB', // 灰色
          },
          label: {
            show: false, // 隐藏标签
          },
          labelLine: {
            show: false, // 隐藏引导线
          },
          emphasis: {
            disabled: true, // 完全禁用 hover 效果
          },
        },
      ],
    },
  ],
}