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',

    id: 'month_sale',

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'polar',
                width: '100%',
                height: '100%',
                bind: {
                    captions: {
                        title: {
                            text: '本月销售额（万元）：{month_sale_amount}',
                            style: {
                                'font-size': '14px',
                                'color': '#485465',
                                'letter-spacing': '-0.07px'
                            },
                            align: 'left'
                        }
                    },
                    store: '{month_sale}',
                },
                colors: [
                    '#2C82BE',
                    '#27A7FF',
                    '#82CCFF',
                    '#53A8E2',
                    '#76DDFB',
                    '#DBECF8',
                    '#426AB3',
                    '#228FBD',
                    '#2A5CAA',
                    '#7BBFEA',
                    '#2A8FBD',
                    '#4C556E',
                    '#9999FF',
                    '#CCCCFF',
                    '#06B9D1',
                    '#005A78',
                    '#00466B',
                    '#005687',
                    '#05173B',
                    '#1A4FA3',
                    '#1E90FF',
                    '#B0E0E6'
                ],
                interactions: ['rotate', 'itemhighlight'],
                innerPadding: 2,
                legend: {
                    type: 'dom',
                    docked: 'right',
                    width: 120,
                    padding: 0,
                    bodyPadding: 0,
                    border: 0,
                    // liveDrag: true,
                    cls: 'x-pie-legend'
                },
                style: {
                    lineWidth: 0,
                    stroke: "#789"
                },
                series: [{
                    type: 'pie',
                    angleField: 'y',
                    donut: 55,
                    label: {
                        field: 'x',
                        display: 'inside',
                        renderer: me.onLabelRender,
                        color: '#fff',
                        font: '12px Microsoft YaHei'
                    },
                    style: {
                        // lineWidth: 0,
                        // strokeStyle: 'transparent',
                        // fillStyle: 'transparent',
                        // fillOpacity: 0
                    },
                    // label: {
                    //     field: 'x',
                    //     renderer: me.onLabelRender
                    // },
                    highlight: false,
                    tooltip: {
                        trackMouse: true,
                        renderer: me.onSeriesTooltipRender
                    }
                }]
            }],
        });

        me.callParent(arguments);
    },

    onLabelRender: function(text, sprite, config, rendererData, index) {
        var homeModel = Ext.getCmp('home').getViewModel();
        var monthSaleAmount = homeModel.get('month_sale_amount');
        var store = rendererData.store;
        var data = store.getAt(index);
        var v = data.get('y');
        return Ext.util.Format.number((v/monthSaleAmount)*100, '0.00') + '%';
    },

    onSeriesTooltipRender: function (tooltip, record, item) {
        tooltip.setHtml(record.get('x') + ': ' + record.get('y'));
    }
});