export default function drawLine()

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`);
      }
    }
  }
}