饼图

[JakeRed]

weex-chart之前已经集成了，但是采用g2的语法写不出完整饼图，代码：

<template>
    <div class="fill">
        <common_title title="" class="fill horizontal"></common_title>
        <div>
            <chart ref="c1" width="416" height="218" style="width:416px;height:218px;"></chart>

        </div>
    </div>
</template>

<script>
    import {api, toast, util, app, dialog, user} from '../util/module.js';

    let GM = require('../components/chart')('g2');

    const globalEvent = weex.requireModule('globalEvent');
    const navigator = weex.requireModule('navigator');
    export default {
        components: {
            common_title: require('../components/common_title.vue'),
            chart: require('../components/chart.vue')
        },
        data() {
            return {
                screenHeight: 750 / weex.config.env.deviceWidth * weex.config.env.deviceHeight - 42,
                data: [
                    {a: '1', b: 0.3, c: '1'},
                    {a: '1', b: 0.3, c: '2'},
                    {a: '1', b: 0.4, c: '3'}
                ],
                chart: null
            }
        },
        created() {
            globalEvent.addEventListener("back_pressed", () => {
                navigator.pop({animated: true}, null);
            });
        },
        mounted() {
            this.tempUI();
        },
        methods: {
            tempUI: function () {
                GM.Global.pixelRatio = 2;
                this.chart = new GM.Chart({
                    id: 'c1'
                },this.$refs.c1.$refs.wxc_gcanvas.ref, this.$refs.c1);
                this.chart.source(this.data);
                this.chart.coord('polar', {
                    transposed: true,
                    inner: 0.6
                });
                this.chart.axis(false);
                this.chart.intervalStack().position('a*b').color('c');
                this.chart.render();
            }
        }
    }
</script>

<style scoped>
    .fill {
        width: 750px;
    }

    .chart {
        width: 750px;
        height: 600px;
        background-color: #ff7901;
    }

    .vertical {
        flex-direction: column;
    }

    .horizontal {
        flex-direction: row;
    }
</style>

[JakeRed]

显示1/4圆环在div右下角