EXT有用的吗?前端页面总是有半截显示不出来

windforyou 发布于 2016/12/01 15:35
阅读 107
收藏 0

Ext.onReady(function () {

    var store = Ext.create('Ext.data.JsonStore', {  
        fields: ['name', 'data'],  
        data: [  
            { 'name': '张三',   'data':100},  
            { 'name': '李四',   'data': 70 },  
            { 'name': '王二', 'data': 50 },  
            { 'name': '周五',  'data': 20 },  
            { 'name': '马二',  'data':370 }  
        ]  
    });  
    
    var colors = ['url(#v-1)',
                  'url(#v-2)',
                  'url(#v-3)',
                  'url(#v-4)',
                  'url(#v-5)'];
    
    var baseColor = '#C0D9D9';
    
    Ext.define('Ext.chart.theme.Fancy', {
        extend: 'Ext.chart.theme.Base',
        
        constructor: function(config) {
            this.callParent([Ext.apply({
                axis: {
                    stroke: baseColor
                },
                axisLabelLeft: {
                    fill: baseColor
                },
                axisLabelBottom: {
                    fill: baseColor
                },
                axisTitleLeft: {
                    fill: baseColor
                },
                axisTitleBottom: {
                    fill: baseColor
                },
                colors: colors
            }, config)]);
        }
    });
    //创建图表
    var chart = Ext.create('Ext.chart.Chart', {
        //主题    
        theme: 'Fancy',
            //动画属性
            animate: {
                easing: 'bounceOut',
                duration: 750
            },
            //表格的数据集
            store: store,
            //背景颜色
            background: {
                
                fill: 'rgb(25,25,112)'
            },
           //颜色渐变
            gradients: [
            {
                'id': 'v-1',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(212, 40, 40)'
                    },
                    100: {
                        color: 'rgb(117, 14, 14)'
                    }
                }
            },
            {
                'id': 'v-2',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(180, 216, 42)'
                    },
                    100: {
                        color: 'rgb(94, 114, 13)'
                    }
                }
            },
            {
                'id': 'v-3',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(43, 221, 115)'
                    },
                    100: {
                        color: 'rgb(14, 117, 56)'
                    }
                }
            },
            {
                'id': 'v-4',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(45, 117, 226)'
                    },
                    100: {
                        color: 'rgb(14, 56, 117)'
                    }
                }
            },
            {
                'id': 'v-5',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(187, 45, 222)'
                    },
                    100: {
                        color: 'rgb(85, 10, 103)'
                    }
                }
            }],
            //坐标轴
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data'],
                width:'100%',  
                height: '100%',
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: '个人资产',
                grid: {
                    odd: {
                        stroke: '#555'
                    },
                    even: {
                        stroke: '#555'
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: '人员名称'
            }],
            series: [{
                type: 'column',
                axis: 'left',
                highlight: true,
                label: {
                  display: 'insideEnd',
                  'text-anchor': 'middle',
                    field: 'data',
                    orientation: 'horizontal',
                    fill: '#fff',
                    font: '17px Arial'
                },
                renderer: function(sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % colors.length];
                    return barAttr;
                },
                style: {
                    opacity: 0.95
                },
                xField: 'name',
                yField: 'data'
            }]
        });

 
    var win = Ext.create('Ext.Window', {
        width: 600,
        height: 400,
        minHeight: 200,
        minWidth: 400,
        hidden: false,
        maximizable: true,
        title: 'Column Chart',
        renderTo: "container",
        layout: 'fit',
        tbar: [{
            text: 'Save Chart',
            handler: function() {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                    if(choice == 'yes'){
                        chart.save({
                            type: 'image/png'
                        });
                    }
                });
            }
        }, {
            text: 'Reload Data',
            handler: function() {
                // Add a short delay to prevent fast sequential clicks
                window.loadTask.delay(100, function() {
                    store.loadData(generateData(5, 0));
                });
            }
        }],
        items: chart
    });
});
加载中
返回顶部
顶部