@antv/f2
Version:
Charts for mobile visualization.
69 lines (68 loc) • 1.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _jsx = require("../../jsx");
var _default = function _default(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 (0, _jsx.jsx)("group", null, (0, _jsx.jsx)("arc", {
attrs: {
x: x,
y: y,
r: r,
startAngle: startAngle,
endAngle: endAngle,
lineWidth: '20px',
lineCap: 'round',
stroke: '#e7e7e7'
}
}), (0, _jsx.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 (0, _jsx.jsx)("line", {
attrs: {
x1: start.x,
y1: start.y,
x2: end.x,
y2: end.y,
lineWidth: '6px',
lineCap: 'round',
stroke: '#e7e7e7'
}
});
}));
};
exports.default = _default;