概述
本 Demo 展示了如何使用 PIESPARKLINE 函数在单元格中创建饼形迷你图，以直观的方式展示数据占比。Demo 以个人资产配置为场景，通过饼形迷你图展示各项资产（房产、401k、储蓄、债券、股票、汽车）在总资产中的占比，并配合百分比列显示具体的数值比例。
实现思路
创建表格结构，设置标题行和数据行，包含资产类型和金额两列
使用 PIESPARKLINE 函数在单元格中创建饼形迷你图，引用金额数据范围作为百分比来源
为饼图的每个扇形指定不同的颜色（从绿色到浅绿色的渐变系列）
在右侧列中使用公式计算各项资产的占比百分比，并设置对应的背景色与饼图颜色匹配
代码解析
设置饼形迷你图公式
这段代码首先合并第 2 行到第 7 行的第 2 列单元格，然后设置饼形迷你图公式。PIESPARKLINE 函数引用 B3:B8 范围（金额数据），并传入 6 个颜色参数为每个扇形指定颜色。
计算并显示百分比
为每个资产类型计算占比百分比，背景色与饼图对应扇形的颜色保持一致。使用 setFormatter 方法将第 3 列格式化为百分比显示。
运行效果
表格显示个人资产数据，包括资产类型和金额
第 2 列显示一个彩色饼形迷你图，每个扇形代表一种资产类型在总资产中的占比
第 3 列显示各项资产的百分比数值，背景色与饼图扇形颜色对应
金额列格式化为货币格式（$#,##0），百分比列格式化为 0.00%
API 参考
PIESPARKLINE 函数
percentage：百分比数据，可以是单元格引用（如 A1）、单元格范围（如 A1:B3）或百分比值（如 0.3）
color1?, color2? ...：可选参数，指定扇形颜色。如果颜色数量少于数据项，会重复使用颜色并使用线性渐变确保每个扇形颜色不同
setFormula 方法
row、col：单元格位置
formula：公式字符串（以 = 开头）
sheetArea：可选，指定表单区域
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
};
function initSpread(spread) {
var spreadNS = GC.Spread.Sheets;
var sheet = spread.sheets[0];
sheet.suspendPaint();
sheet.addSpan(0, 0, 1, 4);
sheet.getCell(0, 0).value("My Assets").font("20px Arial").vAlign(spreadNS.VerticalAlign.center);
for (var i = 0; i < 4; i++) {
sheet.getCell(1,i).backColor("#E3E3E3");
}
sheet.setArray(1, 0, [
["Asset Type","Amount", "Diagram", "Note"],
["House", 120000],
["401k", 78000],
["Savings", 25000],
["Bonds", 15000],
["Stocks", 9000],
["Car", 7500]]);
sheet.addSpan(2, 2, 6, 1);
sheet.setFormula(2, 2, '=PIESPARKLINE(B3:B8,"#82bc00","#96c63f","aacf62","#bcd983","#cee3a3","#dfecc3")');
sheet.getCell(2, 3).backColor("#82bc00").formula("=B3/SUM(B3:B8)");
sheet.getCell(3, 3).backColor("#96c63f").formula("=B4/SUM(B3:B8)");
sheet.getCell(4, 3).backColor("#aacf62").formula("=B5/SUM(B3:B8)");
sheet.getCell(5, 3).backColor("#bcd983").formula("=B6/SUM(B3:B8)");
sheet.getCell(6, 3).backColor("#cee3a3").formula("=B7/SUM(B3:B8)");
sheet.getCell(7, 3).backColor("#dfecc3").formula("=B8/SUM(B3:B8)");
sheet.setFormatter(-1, 3, "0.00%");
sheet.setFormatter(-1, 1, "$#,##0");
sheet.setRowHeight(0, 30);
for (var i = 1; i < 8; i++) {
sheet.setRowHeight(i, 25);
}
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 100);
sheet.setColumnWidth(2, 200);
sheet.resumePaint();
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%;height:100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
