Function drawAreaDataPoints

front/components/u-charts/u-charts.js:2297–2425

(series, opts, config, context)

}

function drawAreaDataPoints(series, opts, config, context) {
  var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  var areaOption = assign({},{
    type: 'straight',
    opacity: 0.2,
    addLine: false,
    width: 2
  },opts.extra.area);

  let ranges = [].concat(opts.chartData.yAxisData.ranges);
  let xAxisData = opts.chartData.xAxisData,
    xAxisPoints = xAxisData.xAxisPoints,
    eachSpacing = xAxisData.eachSpacing;

  let minRange = ranges.pop();
  let maxRange = ranges.shift();
  let endY = opts.height - opts.area[2];
  let calPoints = [];

  context.save();
  if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
    context.translate(opts._scrollDistance_, 0);
  }

  series.forEach(function(eachSeries, seriesIndex) {
    let data = eachSeries.data;
    let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
    calPoints.push(points);

    let splitPointList = splitPoints(points);

    for (let i = 0; i < splitPointList.length; i++) {
      let points = splitPointList[i];
      // 绘制区域数
      context.beginPath();
      context.setStrokeStyle(hexToRgb(eachSeries.color, areaOption.opacity));
      context.setFillStyle(hexToRgb(eachSeries.color, areaOption.opacity));
      context.setLineWidth(areaOption.width * opts.pixelRatio);
      if (points.length > 1) {
        let firstPoint = points[0];
        let lastPoint = points[points.length - 1];

        context.moveTo(firstPoint.x, firstPoint.y);
        if (areaOption.type === 'curve') {
          points.forEach(function(item, index) {
            if (index > 0) {
              let ctrlPoint = createCurveControlPoints(points, index - 1);
              context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y,item.x, item.y);
            }
          });
        } else {
          points.forEach(function(item, index) {
            if (index > 0) {
              context.lineTo(item.x, item.y);
            }
          });
        }