in src/common/drawLine.ts [54:183]
export default function drawLine(
chart: Chart,
config: DrawLineConfig & BaseChartConfig,
yAxisKey = 'y',
) {
let areaColors: any = config.areaColors || config.colors;
if (Array.isArray(config.colors) && Array.isArray(config.areaColors)) {
areaColors = mergeArray([], config.colors, config.areaColors);
}
if (Array.isArray(areaColors)) {
areaColors = getAreaColors(areaColors, config.stack);
}
// 区域、堆叠、平滑曲线
let lineShape = config.spline ? 'smooth' : 'line';
const areaShape = config.spline ? 'smooth' : 'area';
if (config.spline) {
warn('config.spline', '涉及监控、运维、运营等业务场景不推荐开启曲线,建议关闭');
}
// 阶梯折线,目前区域图不支持阶梯,需特殊说明
if (config.step && !config.area) {
lineShape = stepNames.indexOf(String(config.step)) > -1 ? (config.step as string) : 'hv';
}
let lineGeom = null;
let areaGeom = null;
const geomConfig = {
sortable: config.sortable,
};
if (config.area && config.stack) {
areaGeom = chart
.area(geomConfig)
.position(['x', yAxisKey])
.color('type', areaColors)
.tooltip(false)
.shape(areaShape)
.adjust('stack');
lineGeom = chart
.line(geomConfig)
.position(['x', yAxisKey])
.color('type', config.colors)
.shape(lineShape)
.adjust('stack');
} else if (config.area && !config.stack) {
areaGeom = chart
.area(geomConfig)
.position(['x', yAxisKey])
.color('type', areaColors)
.tooltip(false)
.shape(areaShape);
lineGeom = chart
.line(geomConfig)
.position(['x', yAxisKey])
.color('type', config.colors)
.shape(lineShape);
} else {
lineGeom = chart
.line(geomConfig)
.position(['x', yAxisKey])
.color('type', config.colors)
.shape(lineShape);
}
if (typeof config.animate === 'object') {
lineGeom.animate(config.animate);
areaGeom && areaGeom.animate(config.animate);
}
if (areaGeom && typeof config.area === 'object') {
if (config.area.geomStyle) {
geomStyle(areaGeom, config.area.geomStyle, {}, `x*${yAxisKey}*type*extra`);
}
}
geomStyle(
lineGeom,
config.geomStyle,
{
lineWidth: config.lineWidth || themes['widgets-line-width'],
lineJoin: 'round',
},
`x*${yAxisKey}*type*extra`,
);
label({ geom: lineGeom, config: config, field: yAxisKey });
// 曲线上圆点
if (config.symbol) {
let pointGeom = null;
pointGeom = chart
.point(geomConfig)
.position(['x', yAxisKey])
.color('type', config.colors)
// 改为空心shape
.shape('hollowCircle')
.state({
active: {
style: (ele: any) => {
return {
stroke: ele?.model?.color,
};
},
},
selected: {
style: (ele: any) => {
return {
stroke: ele?.model?.color,
};
},
},
});
if (config.area && config.stack) {
pointGeom = pointGeom.adjust('stack');
}
if (typeof config.symbol === 'object') {
pointGeom.shape(config.symbol.shape || 'hollowCircle'); // 配置形状
geomSize(pointGeom, config.symbol.size, 3, yAxisKey, 'type');
if (config.symbol.geomStyle) {
geomStyle(pointGeom, config.symbol.geomStyle, {}, `x*${yAxisKey}*type*extra`);
}
}
}
}