saas-platform/frontend/saas-web/app/view/home/charts/MonthSale.js

Ext.define('saas.view.home.charts.MonthSale', {
    extend: 'saas.view.core.chart.ChartBase',
    xtype: 'month-sale',

    requires: [
        'Ext.chart.PolarChart',
        'Ext.chart.interactions.Rotate',
        'Ext.chart.series.Pie',
        'Ext.chart.series.sprite.PieSlice'
    ],

    id: 'month_sale',

    iconCls: 'x-fa fa-pie-chart',

    bind: {
        title: '本月销售额（万元）：{month_sale_amount}',
    },

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'polar',
                width: '100%',
                height: 500,
                innerPadding: me.innerPadding || 20,
                interactions: ['rotate', 'itemhighlight'],
                donut: 30,
                colors: [
                    '#2C82BE',
                    '#27A7FF',
                    '#82CCFF',
                    '#53A8E2',
                    '#76DDFB',
                    '#DBECF8',
                ],
                bind: {
                    store: '{month_sale}',
                },
                style: {
                    border: 'none'
                },
                series: [{
                    type: 'pie',
                    angleField: me.yfield || 'yvalue',
                    label: {
                        field: me.xfield || 'xvalue',
                        display: 'rotate'
                    },
                    donut: 55,
                    highlight: true,
                    tooltip: {
                        trackMouse: true,
                        renderer: me.onSeriesTooltipRender
                    }
                }],
                // legend: {
                //     docked: 'bottom'
                // },
            }]
        });

        me.callParent(arguments);
    },

    onSeriesTooltipRender: function (tooltip, record, item) {
        tooltip.setHtml(record.get('xvalue') + ': ' + record.get('data1') + '%');
    }
});