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

import { jsx } from '../../jsx';
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: {
      x: x,
      y: y,
      r: r,
      startAngle: startAngle,
      endAngle: endAngle,
      lineWidth: '20px',
      lineCap: 'round',
      stroke: '#e7e7e7'
    }
  }), jsx("arc", {
    attrs: {
      x: x,
      y: y,
      r: r,
      startAngle: startAngle,
      endAngle: startAngle,
      lineWidth: '40px',
      lineCap: 'round',
      stroke: '#0075ff'
    },
    animation: {
      appear: {
        easing: 'linear',
        duration: 500,
        property: ['endAngle'],
        start: {
          endAngle: startAngle
        },
        end: {
          endAngle: startAngle + diff * percent
        }
      }
    }
  }), 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'
      }
    });
  }));
});