ECharts 饼图（保姆级教程）

ECharts 饼图：数据可视化中的“心灵之窗”

在数据爆炸的时代，我们每天都在面对大量信息。如何让枯燥的数字变得生动、直观？这正是 ECharts 饼图的核心价值所在。它像是一扇窗，让你一眼看穿数据背后的真相。无论是市场份额的分布、用户性别比例，还是预算分配情况，ECharts 饼图都能用色彩与弧度，讲出一个清晰的故事。

ECharts 是百度开源的一款强大的前端可视化库，支持多种图表类型。而饼图，作为最经典的数据呈现方式之一，特别适合展示“部分与整体”的关系。想象一下，一个完整的披萨被切成若干块，每一块代表一个类别，大小决定占比——这就是饼图的本质。

本文将带你从零开始，一步步掌握 ECharts 饼图的配置技巧，无论是基础绘制，还是高级样式定制，都能轻松上手。

ECharts 饼图的基本结构与配置

要使用 ECharts 饼图，首先需要引入 ECharts 库。你可以通过 CDN 方式快速集成：

<!-- 引入 ECharts 的 CDN 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

接下来，在 HTML 中创建一个容器，用于承载图表：

<div id="pie-chart" style="width: 600px; height: 400px;"></div>

这个 div 就是 ECharts 饼图的“画布”。它没有内容，但会由 JavaScript 动态填充图表。

然后，通过 JavaScript 初始化 ECharts 实例，并配置基本的饼图选项：

// 基于 DOM 元素初始化 ECharts 实例
const chart = echarts.init(document.getElementById('pie-chart'));

// 配置项（option）是 ECharts 的核心
const option = {
  // 图表标题
  title: {
    text: '用户性别分布',
    left: 'center',
    top: 20
  },
  // 图例（legend）用于区分不同类别
  legend: {
    orient: 'horizontal',       // 水平排列
    bottom: 10,                 // 图例放在底部
    data: ['男性', '女性']       // 图例对应的数据项
  },
  // 数据系列（series）是图表的核心数据源
  series: [
    {
      type: 'pie',                // 图表类型为饼图
      radius: '70%',              // 饼图半径，支持百分比或具体数值
      center: ['50%', '50%'],      // 饼图中心位置，相对于容器
      data: [
        { value: 450, name: '男性' },
        { value: 550, name: '女性' }
      ],
      // 是否启用动画
      animation: true,
      // 是否显示标签（即类别名称）
      label: {
        show: true,
        formatter: '{b}: {c}'   // {b} 是类别名，{c} 是数值
      }
    }
  ]
};

// 使用配置项渲染图表
chart.setOption(option);

这段代码中，series 是关键。它定义了图表的数据结构。type: 'pie' 明确指定为饼图。data 数组中的每个对象代表一个数据项，value 是数值，name 是类别名。

📌 小贴士：ECharts 饼图默认按数据值大小自动排序，如果你需要固定顺序，可以在数据中加入 order 字段，或使用 data 中的 value 与 name 组合控制。

数据格式与动态更新

ECharts 饼图支持灵活的数据格式。除了静态数组，也可以从接口动态加载数据。例如，从后端获取 JSON 数据：

[
  { "name": "手机", "value": 300 },
  { "name": "电脑", "value": 200 },
  { "name": "平板", "value": 100 },
  { "name": "手表", "value": 50 }
]

你可以通过 fetch 请求获取数据，并动态更新图表：

fetch('/api/sales-data')
  .then(response => response.json())
  .then(data => {
    // 更新 series 中的数据
    option.series[0].data = data;
    // 重新渲染图表
    chart.setOption(option);
  })
  .catch(err => console.error('数据加载失败:', err));

这个模式非常适合现代 Web 应用，比如实时监控面板或动态报表系统。

💡 比喻：数据就像河流，而 ECharts 饼图是河床。河流的流量（数据）不断变化，河床（图表）也需随之调整，才能真实反映水流状态。

饼图样式美化与交互优化

一个好看的饼图，不仅要看数据，还要看“颜值”。ECharts 提供了丰富的样式配置，让你轻松打造专业级视觉效果。

自定义颜色主题

默认颜色可能不够出彩。你可以通过 color 字段指定自定义颜色数组：

option = {
  // ...
  series: [
    {
      type: 'pie',
      color: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'], // 自定义颜色
      // ...
    }
  ]
};

颜色搭配建议使用对比色或渐变色，增强视觉层次感。

添加标签与提示框

标签（label）是显示在饼图上的文字，如“男性：450”。你可以控制其位置和样式：

label: {
  show: true,
  position: 'inside',          // 标签位置：inside（内部）、outer（外部）
  formatter: '{c} 人',         // 显示数值和单位
  fontSize: 12,
  fontWeight: 'bold'
}

同时，tooltip 是鼠标悬停时的提示框，可以增强交互体验：

tooltip: {
  trigger: 'item',             // 触发方式：item（数据项）
  formatter: '{b} <br/> {c} 人<br/> 占比: {d}%' // {d} 是百分比
}

这样，用户只需将鼠标移到某一块，就能看到详细信息。

饼图的“环形图”变形

ECharts 饼图还支持“环形图”（donut chart），只需设置 radius 为两个值：

radius: ['50%', '70%']  // 内半径 50%，外半径 70%

这会让饼图中间留出一个空心区域，更适合展示“完成度”或“达成率”等场景。

高级功能：图例点击与数据筛选

ECharts 饼图支持图例点击事件，实现数据筛选。例如，点击“男性”图例，可以隐藏该数据项。

你可以在 option 中添加 legend 的 selected 配置，或通过事件监听实现：

chart.on('legendselectchanged', function(params) {
  console.log('图例状态变化:', params);
  // 可以在这里做自定义逻辑，如过滤数据
});

此外，ECharts 还支持“高亮”和“缩放”等交互效果。当用户点击某个扇形时，它会自动放大，突出显示，提升可读性。

✨ 小技巧：在 series 中设置 emphasis 属性，控制高亮状态的样式：

emphasis: {
  scale: true,                // 是否放大
  scaleSize: 20,              // 放大尺寸
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.5)'
  }
}

实际案例：公司年度预算分配

让我们用一个真实场景来巩固所学。假设某公司年度预算为 1000 万元，分配如下：

类别	预算金额（万元）
人力成本	400
技术研发	300
市场推广	200
行政开支	100

我们可以用 ECharts 饼图清晰展示这个结构：

const option = {
  title: {
    text: '2024 年公司预算分配',
    left: 'center',
    top: 20
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['人力成本', '技术研发', '市场推广', '行政开支']
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}<br/>{c} 万元<br/>占比: {d}%'
  },
  series: [
    {
      type: 'pie',
      radius: '60%',
      center: ['50%', '50%'],
      data: [
        { value: 400, name: '人力成本' },
        { value: 300, name: '技术研发' },
        { value: 200, name: '市场推广' },
        { value: 100, name: '行政开支' }
      ],
      label: {
        show: true,
        formatter: '{c} 万'
      },
      emphasis: {
        scale: true,
        scaleSize: 15
      }
    }
  ]
};

// 初始化图表
const chart = echarts.init(document.getElementById('pie-chart'));
chart.setOption(option);

运行这段代码，你将看到一个清晰、专业、可交互的预算分布图，完美诠释了 ECharts 饼图的强大能力。

总结与进阶建议

ECharts 饼图不仅是数据展示工具，更是沟通的桥梁。它把抽象的数字转化为直观的视觉语言，让非技术人员也能轻松理解业务逻辑。

从基础配置到样式美化，再到动态更新与交互设计，ECharts 饼图提供了完整的解决方案。无论你是初学者还是中级开发者，掌握它都能显著提升你的项目表现力。

建议后续深入学习：

ECharts 的 dataZoom 组件，用于大数据量图表缩放
geo 地理图结合饼图，实现区域数据分布
与 Vue / React 框架集成，构建可复用的图表组件

记住：好的可视化，不在于炫技，而在于说清一个故事。ECharts 饼图，正是你讲好数据故事的得力助手。