Java實現圖表趨勢圖的展現__趨勢圖

JS：

//評分趨勢
progressLoadNew({
body: '#lineScore'
});
$.post(basePath + 'pfmReport/getExportReportKpiChartScoreData', {
dbid: dbid,
owner: owner,
table_name: tableName,
checkrecorderId: flcheckrecordid,
startTime: $('#beginTime').datetimebox('getValue'),
endTime: $('#endTime').datetimebox('getValue')
}, function(data) {
data = typeof data == 'string' ? JSON.parse(data) : data;

var obj, series = [];
series.push({
name: '評分趨勢',
type: 'line',
data:data.data
});
obj = initBrokenLine('lineScoreView', data.dateList, [''], series, data.X_axis, data.Y_axis);
        setTimeout(function() {
report.score = obj.getDataURL();
        }, 1000);
progressCloseNew({
body: '#lineScore'
});
});
}

// 初始化折線圖
function initBrokenLine(id, dateList, name, series, X_axis, Y_axis) {
    var options = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: name,
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: dateList,
            name:X_axis,
        }],
        yAxis: [{
            type: 'value',
            name:Y_axis,
        }],
        grid: {
            x: 100,
            x2: 100,
        },
        series: series
    };
    var eChartColumn = echarts.init(document.getElementById(id));
    eChartColumn.setOption(options, true);
    return eChartColumn;
}

controller：

/**
* 
* @param tableId
* @param dbid
* @return
*/
@ResponseBody
@RequestMapping("/getExportReportKpiChartScoreData")
public Map<String, Object> getExportReportKpiChartScoreData(String dbid,String owner,String table_name,String checkrecorderId,String startTime,String endTime){
if(dbid==null||owner==null||table_name==null){
logger.error("關鍵參數為空白");
             return  null;
}
Map<String, Object> data = pfmReportServiceImpl.getExportReportKpiChartScoreData(dbid, owner,table_name,checkrecorderId,startTime,endTime);
if(data.size()>0){
return data;
}
     return null;
}

service：

PropertyHelper propertyHelper = new PropertyHelper(
PathHelper.getClassesPath(this.getClass()) + "com/snc/hottablemanage/config/export.properties");
int days = Integer.parseInt(propertyHelper.getProperty("exportDays"));



   String temp=" SELECT DISTINCT"+ 
" a.score,"+
" a.timeid,"+
"   b.flchecktime"+ 
"   FROM"+ 
"   htm_pfm_table_score a,"+ 
"   htm_basejob_checkrecords b"+
"   WHERE 1=1"+
"   AND a.flcheckrecordid=b.flid"+
"   AND a.dbid =?"+
"   AND a.owner = ?"+
"   AND a.table_name =? ";
      

//起始時間不為空白
if(startTime!=null&&!startTime.equals("")){
        temp+=" AND b.flchecktime>='"+startTime+"'";
        }
        //結束時間不為空白
if(endTime!=null&&!endTime.equals("")){
        temp+=" AND b.flchecktime<='"+endTime+"'";
        }

//如果日期沒有傳進來,取距離flchecktime最大值前N天的記錄
if(StringUtil.isEmpty(startTime)&&StringUtil.isEmpty(endTime)){
HtmBasejobCheckrecords hbc = htmBasejobCheckrecordsDaoImpl.get(HtmBasejobCheckrecords.class,Long.parseLong(checkrecorderId));
if(hbc==null||hbc.getFlchecktime()==null){
return null;
}
Date endDate = hbc.getFlchecktime();
Calendar cal = Calendar.getInstance();
cal.setTime(endDate);
endDate = cal.getTime();
cal.set(Calendar.DATE, cal.get(Calendar.DATE)-days);
Date startDate = cal.getTime();

SimpleDateFormat  sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String endDate_=sdf.format(endDate);
String startDate_=sdf.format(startDate);

temp+=" AND b.flchecktime>='"+startDate_+"' AND  b.flchecktime<='"+endDate_+"'";
}


Map<String,Object> result = new HashMap<String,Object>();
result.put("X_axis","時間");
result.put("Y_axis","得分");

List<Object>  params=new ArrayList<Object>();
params.add(dbid);
params.add(owner.toString());
params.add(table_name.toString());
List<Object[]> list = htmPfmReportDaoImpl.findBySql(temp, params.toArray());


Map<String,Object>  map=new HashMap<String,Object>();
List<String> dateList = new ArrayList<String>();
List<Integer> dataList = new ArrayList<Integer>();
for (Object[] objects : list) {
String flchecktime=objects[2]==null?"":objects[2].toString();
Integer score=objects[0]==null?0:Integer.parseInt(objects[0].toString());
map.put(flchecktime, score);
}

//對日期排序
if(map!=null){
/*將Map資料放到list裡，然後以Map的key來對list排序*/
List<Map.Entry<String, Object>> mapList = new ArrayList<Map.Entry<String, Object>>(map.entrySet());
Collections.sort(mapList, new Comparator<Map.Entry<String, Object>>() {   
   public int compare(Map.Entry<String, Object> o1, Map.Entry<String, Object> o2) {      
       return (o1.getKey()).toString().compareTo(o2.getKey());
   }
});

for (Map.Entry<String, Object> entry : mapList) {
String date=entry.getKey();
Integer score=Integer.parseInt(entry.getValue().toString());
dateList.add(date);
dataList.add(score);
}


result.put("dateList", dateList);
result.put("data", dataList);
logger.info("評分圖表資料:"+result);
}
return result;
}

效果：本圖僅僅做參考，具體形狀根據資料變化而變化