in src/Wlinebox/index.tsx [426:511]
function drawLine(chart: View, config: WlineboxConfig, yAxisKey = 'y', legendKey = 'type') {
let areaColors = config.areaColors || config.lineColors;
if (Array.isArray(config.lineColors) && Array.isArray(config.areaColors)) {
areaColors = mergeArray([], config.lineColors, config.areaColors);
}
if (Array.isArray(areaColors)) {
areaColors = getAreaColors(areaColors);
}
let lineGeom = null;
let areaGeom = null;
const { lineWidth } = config;
// 区域、堆叠、平滑曲线
const lineShape = config.spline ? 'smooth' : 'line';
const areaShape = config.spline ? 'smooth' : 'area';
const stack = config.stack;
if (config.area && stack) {
areaGeom = chart
.area()
.position(['x', yAxisKey])
.color(legendKey, areaColors)
.tooltip(false)
.shape(areaShape)
.adjust('stack');
lineGeom = chart
.line()
.position(['x', yAxisKey])
.color(legendKey, config.lineColors)
.shape(lineShape)
.adjust('stack');
} else if (config.area && !stack) {
areaGeom = chart.area().position(['x', yAxisKey]).color(legendKey, areaColors).tooltip(false).shape(areaShape);
lineGeom = chart.line().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape(lineShape);
} else {
lineGeom = chart.line().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape(lineShape);
}
if (areaGeom && typeof config.area === 'object') {
if (config.area.geomStyle) {
geomStyle(areaGeom, config.area.geomStyle, {}, `x*${yAxisKey}*type*extra`);
}
}
geomStyle(
lineGeom,
config.lineGeomStyle,
{
lineWidth: lineWidth || themes['widgets-line-width'],
lineJoin: 'round',
},
`x*${yAxisKey}*${legendKey}*extra`,
);
label({ geom: lineGeom, config: config, field: yAxisKey, extraConfigKey: 'lineLabel' });
// 曲线默认点
if (config.symbol) {
let pointGeom = null;
if (config.area && stack) {
pointGeom = chart
.point()
.adjust('stack')
.position(['x', yAxisKey])
.color(legendKey, config.lineColors)
.shape('circle')
.size(3);
} else {
pointGeom = chart.point().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape('circle').size(3);
}
if (typeof config.symbol === 'object') {
geomSize(pointGeom, config.symbol.size, 3, yAxisKey, legendKey);
if (config.symbol.geomStyle) {
geomStyle(pointGeom, config.symbol.geomStyle, {}, `x*${yAxisKey}*${legendKey}*extra`);
}
}
}
return lineGeom;
}