extjs 曲线图表

最新推荐文章于 2017-12-28 15:23:35 发布

weixin_30550081

最新推荐文章于 2017-12-28 15:23:35 发布

阅读量197

点赞数

原文链接：http://www.cnblogs.com/angus332770349/archive/2012/05/25/2518085.html

版权

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();