微信小程序 antv-f2 封装环形图组件

 index.js

// components/antChart/index.js
const app = getApp();
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartColor: {
            type: Array,
            value: ['#FE5D4D', '#3BA4FF', '#737DDE', '#3FCE9B', '#FFD11C', '#9E18F9']
        },
        chartData: {
            type: Array,
            value: [{
                name: '一',
                number: 120
            }, {
                name: '二',
                number: 140
            }, {
                name: '三',
                number: 160
            }],
            observer: function (newVal, oldVal) {
                // 属性值变化时执行
                let that = this
                let l = JSON.parse(JSON.stringify(newVal));
                let sum = 0;
                for (let i in l) {
                    sum += l[i].number;
                }
                for (let i in l) {
                    if (l[i].number == 0) {
                        l[i].percent = 0;
                    } else {
                        l[i].percent = parseFloat(Number(l[i].number * 100 / sum).toFixed(2));
                    }
                    that.data.map[l[i].name] = '(' + l[i].number + ') ' + l[i].percent + '%';
                    l[i].a = 1;
                }
                setTimeout(() => {
                    that.data.chart.changeData(l);
                }, 2000)
            }
        }
    },
    /**
     * 组件的初始数据
     */
    data: {
        initChart: null,
        chart: null,
        map: {}
    },
    ready() {
        this.setData({
            initChart: this.fun()
        })
    },

    /**
     * 组件的方法列表
     */
    methods: {
        fun() {
            let that = this;

            function onInitChart(F2, config) {
                that.data.chart = new F2.Chart(config);
                app.globalData.config.push(that.data.chart);
                const data = [];
                that.data.chart.source(data, {
                    percent: {
                        formatter: function formatter(val) {
                            return val + '%';
                        }
                    }
                });
                that.data.chart.legend({
                    position: 'right',
                    itemFormatter: function itemFormatter(val) {
                        return val + '  ' + that.data.map[val];
                    }
                });
                that.data.chart.tooltip(false);
                that.data.chart.coord('polar', {
                    transposed: true,
                    innerRadius: 0.7,
                    radius: 0.95
                });
                that.data.chart.axis(false);
                that.data.chart.interval()
                    .position('a*percent')
                    .color('name', that.data.chartColor)
                    .adjust('stack');
                that.data.chart.render();
                // 注意：需要把chart return 出来
                return that.data.chart;
            }

            return onInitChart
        }
    }
})

index.wxml

<!--components/antChart/index.wxml-->
<view class="container" data-id="{{id}}">
  <f2 class="f2-chart" onInit="{{initChart}}" />
</view>

index.json

{
   "component": true,
   "usingComponents": {
      "f2": "@antv/wx-f2"
   }
}

index.wxss

.f2-chart {
   width: 100%;
   height: 100%;
 }
 .container{
   width: 100%;
   height: 100%;
 }