echart 美国线

配置

{
  type: 'custom',
  data: uds.map((e, i) => [i, ...e.oclh]),
  encode: {
    x: 0,
    y: [1, 2, 3, 4],
    tooltip: [1, 2, 3, 4],
  },
  renderItem: this.US_Line,
}

/**
 * 美国线
 */
US_Line(params, api) {
  let xValue = api.value(0);

  const o = api.value(1),
    c = api.value(2),
    l = api.value(3),
    h = api.value(4);

  var openPoint = api.coord([xValue, o]);
  var closePoint = api.coord([xValue, c]);
  var lowPoint = api.coord([xValue, l]);
  var highPoint = api.coord([xValue, h]);

  var halfWidth = (api.size([1, 0]))[0] * 0.35;
  var style = {
    stroke: c > o ? this.cfg.upColor : this.cfg.downColor
  };

  return {
    type: 'group',
    children: [
      // low，high
      {
        type: 'line',
        shape: {
          x1: lowPoint[0], y1: lowPoint[1],
          x2: highPoint[0], y2: highPoint[1]
        },
        style: style
      },

      // open
      {
        type: 'line',
        shape: {
          x1: openPoint[0], y1: openPoint[1],
          x2: openPoint[0] - halfWidth, y2: openPoint[1]
        },
        style: style
      },

      // close
      {
        type: 'line',
        shape: {
          x1: closePoint[0],
          y1: closePoint[1],
          x2: closePoint[0] + halfWidth,
          y2: closePoint[1]
        },
        style: style
      }
    ]
  };
}