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

本文主要是介绍支付宝/钉钉小程序使用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 使用组件

 <view class="item" a:for="{{list}}">
    <view class="f2-chart"> //注意此处名称要为f2-chart    
        <f2 onInit="onInitChart" opts="{{ item.opts }}"></f2> //opts 用来传参 
     </view>
</view>

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) {
 
        // 动态传参重点：
        // <f2 onInit="onInitChart" opts="{{ item.opts }}"></f2> 
        // 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;
    },
 
});

这篇关于支付宝/钉钉小程序使用antv/f2图表 制作圆环进度条 动态参数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！