ECharts 饼图（Pie Chart）教程

原创于 2025-12-22 10:45:41 发布 · 1k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端

数据库

代码可运行

ECharts 饼图（Pie Chart）教程

ECharts 的饼图（series.type = ‘pie’）主要用于展示数据在总体中的占比比例，支持实心饼图、圆环图（南丁格尔图/玫瑰图）、多层嵌套等变体。数据通过 data 数组中的 { value, name } 对象提供，ECharts 会自动计算百分比。

1. 基础饼图示例

以下是一个完整的简单饼图，直接复制到 HTML 文件运行即可。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>ECharts 基础饼图</title>
    <!-- 引入最新版 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 600px;"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var 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: '60%',  // 饼图半径，占容器60%
                center: ['50%', '50%'],  // 中心位置
                data: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ],
                emphasis: {  // 高亮效果（hover时）
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

2. 常见变体

圆环图（Doughnut Chart）：设置 radius: ['40%', '70%']（内半径、外半径），中间可显示文字。
玫瑰图（Rose Chart）：添加 roseType: 'radius'（半径模式）或 'area'（面积模式），适合展示数据密度。
标签配置：
- label: { show: true, position: 'outside', formatter: '{b}: {d}%' }（外部标签显示名称+百分比）
- labelLine: { show: true }（显示引导线）

3. 关键配置项（series-pie）

配置项	说明
radius	半径：字符串（如 ‘60%’）、数字，或数组 [‘内%’, ‘外%’] 用于圆环图
center	中心坐标：[‘50%’, ‘50%’]
roseType	‘radius’ 或 ‘area’：玫瑰图模式
label	标签：show/position/formatter 等
labelLine	引导线：show/length/smooth
itemStyle	扇形样式：颜色、边框、阴影
emphasis	hover 高亮样式
data	数据数组：[{value: number, name: string}]