@antv/f2
Version:
Charts for mobile visualization.
62 lines • 1.43 kB
JavaScript
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'
}
});
}));
});