ECharts 饼图教程

ECharts 支持 饼图（Pie Chart），用于展示数据占比情况，例如市场份额、人口分布等。饼图可以定制 半径、标签、颜色、交互功能等。

1. 基本饼图

示例：商品销售占比

var option = {
    title: { text: '商品销售占比', left: 'center' },
    tooltip: { trigger: 'item' },
    legend: { bottom: '0%', left: 'center' },
    series: [{
        name: '销量',
        type: 'pie',
        radius: '50%', // 饼图大小
        data: [
            { value: 1048, name: '苹果' },
            { value: 735, name: '香蕉' },
            { value: 580, name: '橙子' },
            { value: 484, name: '梨' },
            { value: 300, name: '葡萄' }
        ],
        emphasis: {
            itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
        }
    }]
};
chart.setOption(option);

📌 关键点

  • radius: '50%'：控制饼图大小
  • legend: { bottom: '0%' }：图例位置
  • emphasis：选中高亮效果

2. 圆环图（环形饼图）

示例：订单状态占比

series: [{
    type: 'pie',
    radius: ['40%', '60%'], // 内外半径，形成环形
    data: [
        { value: 1200, name: '已完成' },
        { value: 800, name: '待支付' },
        { value: 500, name: '已取消' }
    ]
}]

📌 关键点

  • radius: ['40%', '60%']：定义内环和外环半径
  • 形成 环形饼图

3. 玫瑰图

示例：按类别调整大小

series: [{
    type: 'pie',
    radius: '55%',
    roseType: 'radius', // 玫瑰图模式：'radius' 或 'area'
    data: [
        { value: 10, name: 'A' },
        { value: 20, name: 'B' },
        { value: 30, name: 'C' },
        { value: 40, name: 'D' }
    ]
}]

📌 关键点

  • roseType: 'radius'：根据数值调整半径
  • 适用于 层级关系、权重分布

4. 设置颜色

series: [{
    type: 'pie',
    data: [
        { value: 100, name: '类别1', itemStyle: { color: '#FF5733' } },
        { value: 200, name: '类别2', itemStyle: { color: '#33FF57' } },
        { value: 300, name: '类别3', itemStyle: { color: '#3357FF' } }
    ]
}]

📌 关键点

  • itemStyle: { color: '#XXXXXX' }：自定义颜色

5. 饼图标签

series: [{
    type: 'pie',
    label: {
        show: true,
        formatter: '{b}: {c} ({d}%)' // 名称: 值 (百分比)
    }
}]

📌 关键点

  • formatter: '{b}: {c} ({d}%)'：显示百分比

6. 饼图交互

点击事件

chart.on('click', function (params) {
    alert(params.name + '：' + params.value);
});

7. 组合示例

var option = {
    title: { text: '市场份额分析', left: 'center' },
    tooltip: { trigger: 'item' },
    legend: { bottom: '0%', left: 'center' },
    series: [{
        name: '市场份额',
        type: 'pie',
        radius: ['40%', '60%'], // 环形
        label: { formatter: '{b}: {c} ({d}%)' },
        data: [
            { value: 400, name: '公司 A' },
            { value: 335, name: '公司 B' },
            { value: 310, name: '公司 C' },
            { value: 274, name: '公司 D' },
            { value: 235, name: '公司 E' }
        ]
    }]
};
chart.setOption(option);

8. 总结

类型适用场景关键参数
基础饼图数据占比radius: '50%'
环形图对比多个类别radius: ['40%', '60%']
玫瑰图重要性排序roseType: 'radius'
自定义颜色品牌色itemStyle: { color: 'xxx' }
显示标签百分比formatter: '{d}%'

你希望实现哪种饼图效果？🚀