in src/Wlinebar/index.tsx [597:664]
function drawBar(chart: View, config: WlinebarConfig, yAxisKey = 'y', legendKey = 'type') {
const {
stack,
stackReverse,
marginRatio,
dodgeStack,
barSize,
barMinSize,
barMaxSize = 24,
columnWidthRatio,
dodgePadding,
} = config;
const geomConfig = {
minColumnWidth: barMinSize || null,
maxColumnWidth: barMaxSize || null,
columnWidthRatio: columnWidthRatio || null,
dodgePadding: dodgePadding || null,
};
let intervalGeom = null;
if (dodgeStack) {
intervalGeom = chart
.interval(geomConfig)
.position(['x', yAxisKey])
.color(legendKey, config.barColors)
.adjust([
{
type: 'dodge',
marginRatio: marginRatio || 0, // 数值范围为 0 至 1,用于调整分组中各个柱子的间距
dodgeBy: 'dodge',
},
{
type: 'stack',
reverseOrder: !stackReverse, // 层叠顺序倒序
},
]);
} else if (stack) {
intervalGeom = chart
.interval(geomConfig)
.position(['x', yAxisKey])
.color(legendKey, config.barColors)
.adjust([
{
type: 'stack',
reverseOrder: !stackReverse, // 层叠顺序倒序
},
]);
} else {
intervalGeom = chart
.interval(geomConfig)
.position(['x', yAxisKey])
.color(legendKey, config.barColors)
.adjust([
{
type: 'dodge',
marginRatio: marginRatio || 0, // 数值范围为 0 至 1,用于调整分组中各个柱子的间距
},
]);
}
geomSize(intervalGeom, barSize, null, yAxisKey, `x*${yAxisKey}*${legendKey}*extra`);
geomStyle(intervalGeom, config.barGeomStyle, {}, `x*${yAxisKey}*${legendKey}*extra`);
label({ geom: intervalGeom, config: config, field: yAxisKey, extraConfigKey: 'barLabel' });
return intervalGeom;
}