ExtJs饼状图实例

直接上代码

这是测试时候按照api写的

Ext.define('AM.view.di.FurniturePoMain',{
    extend:'Ext.panel.Panel',
    id : 'di.FurniturePoView',
    alias :'widget.difurniturePoMain',
    title:'测试饼状图',
    layout: {
        type: 'border'
    },
    closable:true,
    initComponent : function() {
        var me = this;
        me.store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data'],
            data: [
                { 'name': '12小时',   'data': 10 },
                { 'name': '24小时',   'data':  7 },
                { 'name': '72小时', 'data':  5 },
                { 'name': '超72小时',  'data':  27 }
            ]
        });
        me.Panel =Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 350,
            animate: true,
            store: me.store,
            theme: 'Base:gradients',
//          shadow: false,
            series: [{
                type: 'pie',
                angleField: 'data',
                showInLegend: true,
                tips: {
                    trackMouse: true,
                    width: 150,
                    height: 28,
                    renderer: function(storeItem, item) {
//                      alert(1);
                        var total = 0;
                        me.store.each(function(rec) {
                            total += rec.get('data');
                        });
                        this.setTitle(storeItem.get('name') + ': ' +storeItem.get('data')+ '： '  + Math.round(storeItem.get('data') / total * 100) + '%');
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]
        });
        me.items = [me.Panel];
        me.callParent(arguments);
    }
});

下面是实际项目写的，参照api Ext4.1

Ext.define('AM.view.di.StatisticsDeliveryEAnlysisPie', {
    extend : 'Ext.window.Window',
    alias : 'widget.statisticsDeliveryEAnlysisPie',
    title : '发货效率分析饼状图',
    layout : {
        align : 'stretch',
        type : 'border'
    },
    autoShow : true,
    height : 340,
    width : 450,
    modal : true,
    buttonAlign : 'center',
    initComponent : function() {
        var me = this;
        var twelveCountSum = 0;
        var dayCountSum = 0;
        var twoDayCountSum = 0;
        var threeDayCountSum = 0;
        var limitDayCountSum = 0;
        var items = Ext.getCmp("DeliveryEAnalysisMainPogrid").store.data.items;
        for(var i = 0; i<items.length; i++){
            twelveCountSum += items[i].raw.twelveCount;
            dayCountSum += items[i].raw.dayCount;
            twoDayCountSum += items[i].raw.twoDayCount;
            threeDayCountSum += items[i].raw.threeDayCount;
            limitDayCountSum += items[i].raw.limitDayCount;
        }
        me.store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data'],
            data: [
                { 'name': '12小时',   'data': twelveCountSum },
                { 'name': '24小时',   'data':  dayCountSum },
                { 'name': '48小时', 'data':  twoDayCountSum },
                { 'name': '72小时', 'data':  threeDayCountSum },
                { 'name': '超72小时',  'data':  limitDayCountSum }
            ]
        });
        me.Panel =Ext.create('Ext.chart.Chart', {
            width: 450,
            height: 340,
            animate: true,
            store: me.store,
            shadow: true,
            insetPadding: 30,
            legend: {
                position: 'right'
            },
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                angleField: 'data',
                showInLegend: true,
                tips: {
                    trackMouse: true,
                    width: 110,
                    height: 60,
                    renderer: function(storeItem, item) {
                        var total = 0;
                        me.store.each(function(rec) {
                            total += rec.get('data');
                        });
                        this.setTitle(storeItem.get('name') + '</br> '+'单量：' + storeItem.get('data') + '</br> '+'百分比：' + Math.round(storeItem.get('data') / total * 100) + '%');
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
//                  field: 'name',
//                  display: 'rotate',//如要在饼中显示name  则开放此注释
                    contrast: true,
                    font: '18px Arial'
                }
            }]
        });
        me.items = [me.Panel];
        me.callParent();
    }
});