in src/Wbar/index.tsx [632:735]
function drawBar(chart: Chart, config: WbarConfig, colors: Colors, facet?: any, yAxisKey = 'y') {
const {
stack,
stackReverse,
marginRatio,
dodge,
dodgeStack,
percentage,
size,
minSize,
maxSize = 24,
columnWidthRatio,
dodgePadding,
intervalPadding,
} = config;
const geomConfig = {
minColumnWidth: minSize || null,
maxColumnWidth: maxSize || null,
columnWidthRatio: columnWidthRatio,
dodgePadding: dodgePadding,
intervalPadding: intervalPadding,
};
let geom = chart.interval(geomConfig).position(['x', yAxisKey]).color('type', colors);
if (percentage) {
geom = geom.position(['x', 'percent']);
}
if (dodgeStack) {
geom = geom.adjust([
{
type: 'dodge',
marginRatio: marginRatio || 0, // 数值范围为 0 至 1,用于调整分组中各个柱子的间距
dodgeBy: 'dodge',
},
{
type: 'stack',
reverseOrder: !stackReverse, // 层叠顺序倒序
},
]);
} else if (stack) {
// 堆叠
geom = geom.adjust([
{
type: 'stack',
reverseOrder: !stackReverse, // 层叠顺序倒序
},
]);
} else if (dodge) {
// 分组
geom = geom.adjust([
{
type: 'dodge',
marginRatio: marginRatio || 0, // 数值范围为 0 至 1,用于调整分组中各个柱子的间距
},
]);
}
if (typeof config.animate === 'object') {
geom.animate(config.animate);
}
geomSize(geom, size, null, yAxisKey, `x*${yAxisKey}*type*facet*extra`);
geomStyle(geom, config.geomStyle, {}, `x*${yAxisKey}*type*facet*extra`);
// TOPO 图表类型的规则执行,以及API制定
// 【API执行】堆叠/分组堆叠/百分比堆叠的时候,开启label内置增加优化显示,已配置的业务关闭
if (config.showStackSum && config.stack && !Array.isArray(config.yAxis)) {
// console.warn('showStackSum配置 暂不支持双轴');
const labelGeom = chart
.interval({})
.position(['x', 'sum'])
.adjust([
{
type: 'stack',
reverseOrder: !stackReverse,
},
])
.tooltip(false)
.size(0)
.style({
opacity: 0,
r: 0,
});
if (typeof config?.column === 'object' && config?.column?.top) {
labelGeom.label('sum', {
// offsetY: -10,
// offsetX: -20,
...config?.label,
...config?.column?.rankConfig?.sum
});
} else {
labelGeom.label('sum', config?.label);
}
} else {
label({
geom: geom,
config: config,
extraCallbackParams: facet ? [facet] : undefined,
});
}
}