@antv/f2/es/components/gauge/gaugeView.js

import { jsx } from '@antv/f-engine';
export default (function (props) {
  var center = props.center,
    startAngle = props.startAngle,
    endAngle = props.endAngle,
    r = props.r,
    percent = props.percent,
    ticks = props.ticks;
  var x = center.x,
    y = center.y;
  var diff = endAngle - startAngle;
  return jsx("group", null, jsx("arc", {
    attrs: {
      cx: x,
      cy: y,
      r: r,
      startAngle: "".concat(startAngle, " rad"),
      endAngle: "".concat(endAngle, " rad"),
      lineWidth: '20px',
      lineCap: 'round',
      stroke: '#e7e7e7'
    }
  }), jsx("arc", {
    attrs: {
      cx: x,
      cy: y,
      r: r,
      startAngle: "".concat(startAngle, " rad"),
      endAngle: "".concat(startAngle, " rad"),
      lineWidth: '40px',
      lineCap: 'round',
      stroke: '#0075ff'
    },
    animation: {
      appear: {
        easing: 'linear',
        duration: 500,
        property: ['endAngle'],
        start: {
          endAngle: "".concat(startAngle, " rad")
        },
        end: {
          endAngle: "".concat(startAngle + diff * percent, " rad")
        }
      }
    }
  }), ticks.map(function (tick) {
    var start = tick.start,
      end = tick.end;
    return jsx("line", {
      attrs: {
        x1: start.x,
        y1: start.y,
        x2: end.x,
        y2: end.y,
        lineWidth: '6px',
        lineCap: 'round',
        stroke: '#e7e7e7'
      }
    });
  }));
});