饼图(Pie Chart)实现

饼图(Pie Chart)实现

饼图是一种常见的数据可视化形式，通过扇形区域的大小直观展示各部分在整体中的占比关系。ECharts提供了丰富的配置项来实现各种饼图效果，从基础饼图到复杂的嵌套饼图都能轻松实现。

基础饼图实现

最简单的饼图只需要准备数据和基本配置即可。以下是一个基础饼图的完整示例代码：

option = {
  title: {
    text: '某站点用户访问来源',
    subtext: '纯属虚构',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '50%',
      data: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

这段代码创建了一个标准的饼图，包含标题、图例和提示框。radius属性控制饼图的大小，设置为'50%'表示直径占据容器宽度的一半。

环形饼图

通过设置radius为数组可以实现环形饼图效果：

series: [{
  type: 'pie',
  radius: ['40%', '70%'],
  data: [
    {value: 1048, name: '搜索引擎'},
    {value: 735, name: '直接访问'},
    {value: 580, name: '邮件营销'},
    {value: 484, name: '联盟广告'},
    {value: 300, name: '视频广告'}
  ]
}]

这里radius: ['40%', '70%']表示内半径40%，外半径70%，形成环形效果。内半径越大，环形越细。

南丁格尔玫瑰图

南丁格尔玫瑰图是饼图的变种，通过半径和角度同时展示数据：

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

roseType设置为'radius'表示扇区半径随数值变化，也可以设置为'area'让面积随数值变化。

多级嵌套饼图

ECharts支持创建多层嵌套的饼图，适合展示层级数据：

series: [
  {
    name: '访问来源',
    type: 'pie',
    selectedMode: 'single',
    radius: [0, '30%'],
    label: {
      position: 'inner',
      fontSize: 14
    },
    labelLine: {
      show: false
    },
    data: [
      {value: 1548, name: '搜索引擎'},
      {value: 775, name: '直接访问'},
      {value: 679, name: '其他', selected: true}
    ]
  },
  {
    name: '详细来源',
    type: 'pie',
    radius: ['45%', '60%'],
    labelLine: {
      length: 30
    },
    data: [
      {value: 1048, name: '百度'},
      {value: 335, name: '谷歌'},
      {value: 310, name: '必应'},
      {value: 251, name: '其他'},
      {value: 234, name: '邮件营销'},
      {value: 147, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 102, name: '其他'}
    ]
  }
]

这个例子创建了两层饼图，内层展示大类数据，外层展示详细分类。通过设置不同的radius范围实现嵌套效果。

自定义饼图样式

ECharts允许对饼图的各个部分进行深度定制：

series: [{
  type: 'pie',
  radius: '55%',
  center: ['50%', '60%'],
  data: [
    {
      value: 335,
      name: '直接访问',
      itemStyle: {
        color: '#c23531',
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowBlur: 10
      }
    },
    {
      value: 310,
      name: '邮件营销',
      itemStyle: {
        color: '#2f4554'
      }
    },
    {
      value: 234,
      name: '联盟广告',
      itemStyle: {
        color: '#61a0a8'
      }
    },
    {
      value: 135,
      name: '视频广告',
      itemStyle: {
        color: '#d48265'
      }
    },
    {
      value: 1548,
      name: '搜索引擎',
      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
  }
}]

这个示例展示了如何自定义每个扇区的颜色、标签样式和引导线样式。itemStyle可以设置单个数据项的样式，覆盖全局样式。

饼图交互功能

ECharts的饼图支持丰富的交互功能：

option = {
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 234, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 1548, name: '搜索引擎'}
    ],
    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'
      }
    }
  }]
};

selectedMode设置为'multiple'允许多选，selectedOffset控制选中扇区的偏移距离。emphasis配置项定义了鼠标悬停时的强调效果，包括放大、阴影和高亮标签。

动态数据更新

饼图支持动态数据更新，可以创建动画效果：

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);

这段代码实现了饼图自动轮播高亮效果，每隔1秒高亮下一个扇区并显示提示框。

大数据量优化

当饼图数据项较多时，可以通过以下方式优化性能：

series: [{
  type: 'pie',
  data: [...], // 大量数据
  avoidLabelOverlap: true,
  label: {
    show: false
  },
  emphasis: {
    label: {
      show: true
    }
  },
  silent: true,
  animationDurationUpdate: 1000
}]

设置avoidLabelOverlap避免标签重叠，默认隐藏标签只在悬停时显示(emphasis.label.show)，silent禁用图形元素响应和触发鼠标事件，animationDurationUpdate控制动画时长。

饼图与其他图表组合

饼图可以与其他图表类型组合使用：

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: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
      ]
    },
    {
      type: 'line',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};

这个例子将饼图与折线图组合在一个图表中，通过grid配置项划分不同图表的位置区域。