项目经验：Extjs制作饼图、折线图、柱状图

饼图：

 

实际项目例子

后台action代码：

/** * 1.水质类别比例 根据选择时段、选择测站查询水质站评价结果 结果根据水质类别进行汇总 */@Action(value = "getWQPercentageMap", className = "wqerStatisticsAction")public String getWQPercentageMap(){Map<String,Double> wqpercentageMap = new LinkedHashMap<String, Double>();List<KeyValueBean> list = new ArrayList<KeyValueBean>();wqersModel = this.getQueryParam(wqersModel);List<ZxDDbsszzpjjg> dbsszzpjjgList =  wqerStatisticsService.getWQPercentageList(wqersModel);wqpercentageMap = this.getWqpercentageMap(dbsszzpjjgList);Set<Map.Entry<String, Double>> entrySet=wqpercentageMap.entrySet();for (Map.Entry<String, Double> entry : entrySet) {KeyValueBean keyValueBean = new KeyValueBean();if(entry.getKey().equals("1")){keyValueBean.setKey("I");}else if(entry.getKey().equals("2")){keyValueBean.setKey("II");}else if(entry.getKey().equals("3")){keyValueBean.setKey("III");}else if(entry.getKey().equals("4")){keyValueBean.setKey("IV");}else if(entry.getKey().equals("5")){keyValueBean.setKey("V");}else if(entry.getKey().equals("6")){keyValueBean.setKey("劣V");}keyValueBean.setValue(entry.getValue());list.add(keyValueBean);}JsonConfig config = JsonUtil.getDealDateJsonConfig(DateUtil.Date_YMDHM);config = JsonUtil.getDealDoubleNullJsonConfig(config);jsonStr=JSONArray.fromObject(list, config).toString();jsonStr = JsonUtil.createSuccessJson(jsonStr, (list==null?0:list.size()));return BaseConstants.JSON;}

js代码：

//1.水质类别比例 根据选择时段、选择测站查询水质站评价结果 结果根据水质类别进行汇总function getWQPercentageMap(){document.getElementById("myTab_Content1").innerHTML='';var xzsd =document.getElementById("wqersModel.xzsd").value;var xzzd =document.getElementById("wqersModel.xzzd").value;if(xzsd!=null&&xzsd!=""&&xzzd!=null&&xzzd!=""){var strPara = {'wqersModel.xzsd':xzsd,'wqersModel.xzzd':xzzd,};var store=new Ext.data.JsonStore({ fields:["key","value"], url:'<%=basePath%>wqerstatistics/getWQPercentageMap.action',totalProperty:'total',id:'pieStore',baseParams : strPara,  root:'data'});store.load({params:{start:0,limit:1000}});    new Ext.Panel({        width: 200,       height: 200,        border:false,        renderTo: 'myTab_Content1',        items: {            store: store,            xtype: 'piechart',            dataField: 'value',            categoryField: 'key',            extraStyle:{legend:{display: 'bottom',padding: 5,font:{family: 'Tahoma',size: 13}}}        }    });}else{alert("请先选择时段、测站进行水质类别比例统计");}}

图片展示：

折线图：

实际项目例子

后台代码：

/** * 2.项目时间变化趋势 根据选择时段、选择测站、选择项目查询9张项目数据表 返回List<PtTrendModel> */@Action(value = "getProjectTimeTrend", className = "wqerStatisticsAction")public String getProjectTimeTrend(){List<PtTrendModel> pttmList = new ArrayList<PtTrendModel>();wqersModel = this.getQueryParam(wqersModel);wqersModel.setXmtable(this.getXmTabel(wqersModel));List<Object> objList = wqerStatisticsService.getProjectTimeTrend(wqersModel);for(Object obj:objList){PtTrendModel pttm = new PtTrendModel();pttm = this.getPtTrendModel(obj, wqersModel, pttm);pttmList.add(pttm);}JsonConfig config = JsonUtil.getDealDateJsonConfig(DateUtil.Date_YMDHM);jsonStr=JSONArray.fromObject(pttmList, config).toString();jsonStr = JsonUtil.createSuccessJson(jsonStr, (pttmList==null?0:pttmList.size()));return BaseConstants.JSON;}

js代码：

//2.项目时间变化趋势 根据选择时段、选择测站、选择项目查询9张项目数据表 返回List<PtTrendModel>function getProjectTimeTrend(){document.getElementById("myTab_Content1").innerHTML='';var xzsd =document.getElementById("wqersModel.xzsd").value;var xzzd =document.getElementById("wqersModel.xzzd").value;var xzxm =document.getElementById("jcxm").value;if(xzsd!=null&&xzsd!=""&&xzzd!=null&&xzzd!=""&&xzxm!=null&&xzxm!=""){var strPara = {'wqersModel.xzsd':xzsd,'wqersModel.xzzd':xzzd,'wqersModel.xzxm':xzxm,};var store=new Ext.data.JsonStore({ fields:["spt","xmzhi"], url:'<%=basePath%>wqerstatistics/getProjectTimeTrend.action',totalProperty:'total',id:'pieStore',baseParams : strPara,  root:'data'});    store.load({params:{start:0,limit:1000}});     new Ext.Panel({renderTo: 'myTab_Content1',        autoWidth: true,        height:150,                layout:'fit',    items: {        xtype: 'linechart',                    store: store,            animate: true,        shadow: true,            series:[                  {                type:'line',                displayName:getXmmc(xzxm)+'项目值',                xField: 'spt',                yField: 'xmzhi'        }            ],            extraStyle:{legend:{display: 'bottom',padding: 2,font:{family: 'Tahoma',size: 10}}},            xAxis: new Ext.chart.CategoryAxis({              title: getXmmc(xzxm)+'项目时间变化趋势'                     }),             yAxis: new Ext.chart.NumericAxis({                   title: getXmmc(xzxm)+'项目值'            })        }    });}else{alert("请先选择时段、测站、项目进行项目时间变化趋势统计");}}

图片展示：

柱状图：

实际项目例子

后台java代码：

/** * 3.断面水质沿程变化趋势 根据选择时段、选择项目查询9张项目数据表 返回List<VrTrendModel> */@Action(value = "getVariationTrend", className = "wqerStatisticsAction")public String getVariationTrend(){List<VrTrendModel> vrtrendList = new ArrayList<VrTrendModel>();wqersModel = this.getQueryParam(wqersModel);wqersModel.setXmtable(this.getXmTabel(wqersModel));List<Object[]> objList = wqerStatisticsService.getVariationTrend(wqersModel);for(Object[] obj:objList){VrTrendModel vrtrend = new VrTrendModel();vrtrend.setAverage(obj[0].toString());Map<String,String> allSzjczMap = szjczjbxxService.getAllSzjczMap();vrtrend.setSzcz(allSzjczMap.get(obj[1].toString()));vrtrendList.add(vrtrend);}JsonConfig config = JsonUtil.getDealDateJsonConfig(DateUtil.Date_YMDHM);jsonStr=JSONArray.fromObject(vrtrendList, config).toString();jsonStr = JsonUtil.createSuccessJson(jsonStr, (vrtrendList==null?0:vrtrendList.size()));return BaseConstants.JSON;}

 

js代码：

//3.断面水质沿程变化趋势 根据选择时段、选择项目查询9张项目数据表 返回List<VrTrendModel>function getVariationTrend(){document.getElementById("myTab_Content1").innerHTML='';var xzsd =document.getElementById("wqersModel.xzsd").value;var xzxm =document.getElementById("jcxm").value;if(xzsd!=null&&xzsd!=""&&xzxm!=null&&xzxm!=""){var strPara = {'wqersModel.xzsd':xzsd,'wqersModel.xzxm':xzxm,};var store=new Ext.data.JsonStore({ fields:["szcz","average"], url:'<%=basePath%>wqerstatistics/getVariationTrend.action',totalProperty:'total',id:'pieStore',baseParams : strPara,  root:'data'});    store.load({params:{start:0,limit:1000}});     new Ext.Panel({            title: '',            frame:true,            renderTo: 'myTab_Content1',        height:200,    layout:'fit',             items: {                xtype: 'stackedcolumnchart',                store: store,                xField: 'szcz',                yAxis: new Ext.chart.NumericAxis({                    minimum:0,                    labelRenderer : Ext.util.Format.numberRenderer('0,00')                }),                xAxis: new Ext.chart.CategoryAxis({          title:'断面水质沿程变化趋势图',    displayName: '行业'                }),                             extraStyle: {                    padding: 10,                    animationEnabled: true,                    font: {                        name: 'Tahoma',                        color: 0x444444,                        size: 11                    },                    legend : {// 图例                          display: 'left',                          spacing: 2,                          padding: 5,                          font:{ name: 'Tahoma', color:'#3366FF', size:10, bold:false}                      },                    xAxis: {                        color: 0x69aBc8,                        majorGridLines: {size: 1, color: 0xeeeeee}                    },                    yAxis: {                        color: 0x69aBc8,                        majorGridLines: {size: 1, color: 0xdfe8f6}                    }            },                series: [{                    displayName: getXmmc(xzxm)+'项目平均值',                  yField: 'average',                   style: {color:0x006400}                }]            }        });}else{alert("请先选择时段、项目进行断面水质沿程变化趋势统计");}}

图片展示：