extjs 曲线图表

1.构建数据源

     //数据源(此处是静态数据)
     var data = [
        [' '..........],
        [' '..........]
        ];
        var TBstore = new Ext.data.ArrayStore({
            data:data,
            fields: [
                {name:'YEARSMONTH'},
                {name:'SHIJICHUKU'},
                {name:'SHIJICAIGOU'},
                {name:'MONICAIGOU'}
            ]
        });

2.构建面板

        var pn_TongBi =new Ext.Panel({
            layout:'fit',
            items: {
                xtype: 'linechart',    //线型图
                store: TBstore,
                xField: 'YEARSMONTH',
                //yField: 'visits',
                series: [{//
                    type: "line", 
                    displayName: "实际出库",
                    yField: "SHIJICHUKU",
                    style: {
                        color:'6FD52B'
                    }
                   },
                   {
                    type: "line", 
                    displayName: "实际采购",
                    yField: "SHIJICAIGOU",
                    style: {
                        color:'E5F906'
                    }
                   },
                   {
                    type: "line", 
                    displayName: "模拟采购",
                    yField: "MONICAIGOU",
                    style: {
                        color:'F9060E'
                    }                               
                   }
                                               
                ]                
            }
        });            
        
        var win_TongBi = new Ext.Window({
            modal: true,
            title:'同比',
            closable: true,
            layout: "fit",
            closeAction: 'hide',
            width: 800,
            resizable: false,
            autoScroll: true,
            height: 430,
            resizable: false,
            items: [pn_TongBi]
        });          
        
        win_TongBi.show();   

3.最终效果

图一

图二

posted @ 2012-05-25 15:20  angus_csh  阅读(3556)  评论(0编辑  收藏  举报