最近开发了一款类似于支付宝财富的h5项目,内嵌App中,项目使用的是react+hook+typescript , 需求中基金详情页面需要仪表盘类型的效果,前期经过调研最终选择antv/f2,奉上链接:https://f2.antv.vision/zh
先放上效果图,给大家分享一下思路。
需求分解
1:首先需要最外层刻度270度半圆弧
2:其次需要270度内圆渐变半圆弧
最开始的想法是在f2生态圈中找找类似的效果因为f2生态资源不是很丰富,所以后面就自己从0开始了。
1:首先循环出最外层的刻度,这里用到的是f2的chart.source,循环出100个刻度出来,每个刻度代表1
chart.source(data, {
value: {
type: 'linear',
min: 0,
max: 100,
ticks: tickList(),
nice: false,
},
length: {
type: 'linear',
min: 0,
max: 10,
},
y: {
type: 'linear',
min: 0,
max: 1,
},
});
tickList
const tickList = () => {
let list = [];
for (var i = 0; i <= 100; i++) {
list.push(i);
}
return list;
};
2:画出内圆,灰色圆环打底,渐变色表示进度
chart.guide().arc({
start: [startTotal, 0.8],
end: [endTotal, 0.8],
// radius:0,
style: {
strokeStyle: '#ccc',
lineWidth: 15,
lineCap: 'square', // 设置
},
});
chart.guide().arc({
// 最外层线
start: [0, 0.8],
end: [data[0].value, 0.8],
style: {
strokeStyle: colorfilter(score)!.gradualcolor,
lineWidth: 15,
},
});
附上组件代码,有兴趣的朋友可以看看
const linecharts = () => {
let startTotal = +score > 1 ? 3.2 : 2;
let endTotal = +score > 1 ? 96 : 98;
const chart = new F2.Chart({
el: DashboardEl.current,
pixelRatio: window.devicePixelRatio,
padding: [0, 0, 0, 0],
animate: false,
});
chart.source(data, {
value: {
type: 'linear',
min: 0,
max: 100,
ticks: tickList(),
nice: false,
},
length: {
type: 'linear',
min: 0,
max: 10,
},
y: {
type: 'linear',
min: 0,
max: 1,
},
});
chart.coord('polar', {
inner: 0,
startAngle: -1.25 * Math.PI,
endAngle: 0.25 * Math.PI,
});
//配置value轴刻度线
chart.axis('value', {
tickLine: {
strokeStyle: colorfilter(score)!.bordercolor,
lineWidth: 1.5,
length: -3,
},
label: null,
grid: null,
line: null,
});
chart.axis('y', false);
chart.guide().clear();
chart.guide().arc({
start: [startTotal, 0.8],
end: [endTotal, 0.8],
// radius:0,
style: {
strokeStyle: '#ccc',
lineWidth: 15,
lineCap: 'square', // 设置
},
});
chart.guide().arc({
// 最外层线
start: [0, 0.8],
end: [data[0].value, 0.8],
style: {
strokeStyle: colorfilter(score)!.gradualcolor,
lineWidth: 15,
},
});
chart
.point()
.position('value*y')
.size(0)
.color('');
chart.render();
};