开发编码 本地计算 开箱即用 内置示例 不留痕迹

饼图生成器

每行输入「分类,数值」，点「计算」画出从 12 点方向顺时针排布的饼图；附彩色图例、占比明细表，自动标出最大占比的分类。

饼图用来展示构成占比：各部分加起来等于整体时才有意义，例如收入来源构成、访问渠道分布、预算分配。如果数据是不同量纲的指标（比如把销量与利润放在一起），或者需要看趋势，改用柱状图或折线图更合适。

读图时有一个常见误区：扇形角度按数值占总和的比例分配，因此占比之和恒为 100%（保留两位小数时可能出现 99.99% 或 100.01%，那是四舍五入的结果）；另外分类不宜过多，超过 7~8 类时小扇形几乎无法分辨，建议把尾部合并为「其他」。

—
—
—

使用步骤

  1. 每行填「分类,数值」，最多 50 行；只填数字时分类自动编号。
  2. 点「计算」出图：扇形自 12 点方向按输入顺序顺时针排布，图例同步配色。
  3. 看统计卡标出的最大占比分类，并对照明细表核对每项占比。
  4. 分类过多时先合并尾部为「其他」再出图，可读性明显更好。

计算原理与示例

数据怎么填

每行一条数据，格式「分类,数值」，最多 50 行；只填数字时分类自动按 1、2、3…编号。

扇形怎么排

扇形从 12 点方向开始、按输入顺序顺时针排布，角度 = 数值 ÷ 总和 × 360°；每个扇形按固定 8 色调色板循环取色，图例同步显示。

占比怎么算

占比 = 数值 ÷ 总和 × 100，保留两位小数；统计卡标出占比最高的分类，明细表列出每项数值与占比。

代码示例

JavaScript 用 ECharts 画饼图 

const chart = echarts.init(document.getElementById('chart'));

chart.setOption({
  tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
  legend: { bottom: 0 },
  series: [{
    type: 'pie',
    radius: '62%',
    startAngle: 90, // 从 12 点方向开始
    data: [
      { value: 1048, name: '直接访问' },
      { value: 735, name: '搜索引擎' },
      { value: 580, name: '邮件营销' },
    ],
  }],
});

Shell 先核对占比再画图 

# 求和（核对占比分母）
awk -F, 'NR>1{s+=$2} END{printf "合计 %d\n", s}' data.csv

# 从大到小排序，便于决定哪些小类合并为「其他」
sort -t, -k2 -nr data.csv | head -8

# 提示：占比之和应为 100%，有差额说明存在遗漏或重复数据

常见问题

支持负值或全 0 吗？

都不支持。负值的占比无意义，合计为 0 无法划分扇形，会分别提示；这类数据请改用柱状图或折线图。

扇形的顺序和颜色能换吗？

顺序按输入行序从 12 点方向顺时针排；颜色按固定 8 色循环（蓝/绿/黄/红/紫/青/粉/橙），想换色调整行序即可。

占比加起来不是 100% 怎么办？

每项占比独立四舍五入到两位小数，个别情况合计会是 99.99% 或 100.01%，属正常舍入误差。

和柱状图怎么选？

看构成占比（各部分占整体多少）用饼图；比大小、含负值或类目多于 6 个时柱状图更直观。

饼图数据会传到服务器吗？

不会。解析与绘制全部在浏览器本地完成，断网可用。

怎么把图放进报告？

对画布截图即可；画布按 640×360 分辨率绘制，图例在图下方，一起框选截图更完整。

最多能分几类？

50 类，但超过 6~8 类时扇形过细不易读，建议把小类合并成「其他」后再画。

延伸阅读

来自本站原创文章，讲清这个工具背后的算法与口径。