支付宝/钉钉小程序使用antv/f2图表制作圆环进度条动态参数

**

支付宝小程序使用antv/f2图表 制作圆环进度条 动态参数

**

相关文档：

https://github.com/antvis/my-f2
https://www.yuque.com/antv/f2
https://f2.antv.vision/zh/examples/pie/donut#progress-bar

1. 安装依赖

项目默认初始化出来的是没有package.json的，需要新增package.json后再安装

npm install @antv/my-f2 --save

2. 使用自定义组件

1. 打开json文件，引入组件

{
"usingComponents": {
"f2": "@antv/my-f2"
}
}


2. acss 设置宽高

.f2-chart {
width: 200rpx;
height: 200rpx;
}


3. axml 使用组件


//注意此处名称要为f2-chart
//opts 用来传参




4. js部分

// const app = getApp();

_Page({
/**
* 页面的初始数据
*/
data: {
scale: 1,
list: [
{
tit: 'WH-01',
opts: {
y: 80, text: '2/8'
},
},
{
tit: 'WH-02',
opts: {
y: 70, text: '3/7'
},

},
]

},

/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
my.getSystemInfo({
success: (res) => {
this.data.scale = Math.ceil(14 / 750 * res.windowWidth);
}
})
},

onInitChart(F2, config,optsData) {

// 动态传参重点：
//
// optsData - opts
//查看详细参数
console.log(optsData)


let sizeSCale = this.data.scale; //按比例设置圆环宽度

const chart = new F2.Chart(config);
const data = [{ x: '1', y: optsData.props.opts.y }];
// y为圆环的进度, x: '1' 不用动
chart.source(data, {
y: {
max: 100,
min: 0
}
});
chart.axis(false);
chart.tooltip(false);
chart.coord('polar', {
transposed: true,
innerRadius: 0.8,
radius: 1
});
chart.guide().arc({
start: [0, 0],
end: [1, 99.98],
top: false,
style: {
lineWidth: sizeSCale,
stroke: '#E2EDF3' //圆环浅色部分
}
});
chart.guide().text({
position: ['50%', '50%'], //字体位置
content: optsData.props.opts.text, // 中间字体
style: {
fontSize: '14',
fill: '#4F6589'
}
});
chart.interval()
.position('x*y')
.size(sizeSCale)
.animate({
appear: {
duration: 1200,
easing: 'cubicIn'
}
});
chart.render();
// 注意：需要把chart return 出来
return chart;
},

});