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