EChart 如何设置多组数据对比

展示效果如下图所示：

后台代码

@RequestMapping("timeChartData")
public void timeChartData(HttpServletRequest request,HttpServletResponse response){
String year1 = req.getValue(request, "year1");
String userId1 = req.getValue(request, "userId1");

String year2 = req.getValue(request, "year2");
String userId2 = req.getValue(request, "userId2");

GsonOption rel = sportTimeService.getNdDbChart(year1, userId1, year2, userId2);
this.writeJsonData(rel, response);

}

public GsonOption getNdDbChart(String year1, String userId1, String year2, String userId2) {
String title = "用户运动时间图";
List<Map<String, Object>> rel1 = this.getRptMonthData(year1,userId1);
List<Map<String, Object>> rel2 = this.getRptMonthData(year2,userId2);

System.out.println("=======>"+rel1);

List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
Map<String, Object> item = new HashMap<String, Object>();
Map<String, Object> item2 = new HashMap<String, Object>();
for (Map<String, Object> map : rel1) {
Map<String, Object> d = new HashMap<String, Object>();
d.put(Bar1YMoreLengs.X_KEY, StringHelper.get(map, "MONTH"));
d.put(Bar1YMoreLengs.X_DATA, StringHelper.get(map, "TOTALTIME"));
list.add(d);
}
item.put(Bar1YMoreLengs.LEGEND_DATA, list);
item.put(Bar1YMoreLengs.Y_LEGEND, userId1);
data.add(item);

List<Map<String, Object>> list2 = new ArrayList<Map<String, Object>>();
for (Map<String, Object> map : rel2) {
Map<String, Object> d = new HashMap<String, Object>();
d.put(Bar1YMoreLengs.X_KEY, StringHelper.get(map, "MONTH"));
d.put(Bar1YMoreLengs.X_DATA, StringHelper.get(map, "TOTALTIME"));
list2.add(d);
}
item2.put(Bar1YMoreLengs.LEGEND_DATA, list2);
item2.put(Bar1YMoreLengs.Y_LEGEND, userId2);
data.add(item2);

Bar1YMoreLengs b = new Bar1YMoreLengs();
b.setLegendIsShow(true);
b.setTitle(title);
b.setSubTitle("汇总时间：" + DateHelper.date2String(new Date(), DateHelper.TIME_FORMAT));
b.setY_name("时间汇总");
b.setData(data);
b.setType(2);
b.setLegendSelected(3);
logger.debug(EchartUtils.bar1YMoreLegs(b));
return EchartUtils.bar1YMoreLegs(b);

}

private List<Map<String, Object>> getRptMonthData(String year, String userId) {
String sql="select  m.month||'月' month,NVL(totalTime,0) totalTime from month m left join (select sum(times) totalTime,to_char(in_time,'mm') month from t_sport_time  ";
sql+="where account="+userId;
sql+="and to_char(in_time,'yyyy')="+year;
sql+="group by to_char(in_time,'mm')) t on m.month=t.month order by   m.month";
List<Map<String, Object>> list=db.queryForList(sql);
return list;
}

package com.jdu.core.commons.echart.model;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class Bar1YMoreLengs extends BaseOption {

public static final String Y_LEGEND = "Y_LEGEND";
public static final String LEGEND_DATA = "LEGEND_DATA";
public static final String X_KEY = "X_KEY";
public static final String X_DATA = "X_DATA";

public static final String BAR_Y_KEY_RIGHT_DB = "BAR_Y_KEY_RIGHT_DB";
private boolean legendIsShow = false;
private int type = 1;//1：柱状图  2：线性图 
private List<Map<String, Object>> data;
private String y_name;
private int rotate = 0;
private boolean isRandomColor = false;
private boolean dataZoom = false;
private int zoomRate = 100;

private int legendSelected = 0;

private List<MKLine> mkLines = new ArrayList<>();

private boolean data_label = true;
private String data_label_prefix = "";
private String data_label_suffix = "";

/**
 * @return the legendIsShow
 */
public boolean isLegendIsShow() {
return legendIsShow;
}
/**
 * @param legendIsShow the legendIsShow to set
 */
public void setLegendIsShow(boolean legendIsShow) {
this.legendIsShow = legendIsShow;
}
/**
 * @return the type
 */
public int getType() {
return type;
}
/**
 * @param type the type to set
 */
public void setType(int type) {
this.type = type;
}
/**
 * @return the data
 */
public List<Map<String, Object>> getData() {
return data;
}
/**
 * @param data the data to set
 */
public void setData(List<Map<String, Object>> data) {
this.data = data;
}
/**
 * @return the y_name
 */
public String getY_name() {
return y_name;
}
/**
 * @param y_name the y_name to set
 */
public void setY_name(String y_name) {
this.y_name = y_name;
}
/**
 * @return the rotate
 */
public int getRotate() {
return rotate;
}
/**
 * @param rotate the rotate to set
 */
public void setRotate(int rotate) {
this.rotate = rotate;
}
/**
 * @return the isRandomColor
 */
public boolean isRandomColor() {
return isRandomColor;
}
/**
 * @param isRandomColor the isRandomColor to set
 */
public void setRandomColor(boolean isRandomColor) {
this.isRandomColor = isRandomColor;
}
/**
 * @return the legendSelected
 */
public int getLegendSelected() {
return legendSelected;
}
/**
 * @param legendSelected the legendSelected to set
 */
public void setLegendSelected(int legendSelected) {
this.legendSelected = legendSelected;
}
/**
 * @return the dataZoom
 */
public boolean isDataZoom() {
return dataZoom;
}
/**
 * @param dataZoom the dataZoom to set
 */
public void setDataZoom(boolean dataZoom) {
this.dataZoom = dataZoom;
}
/**
 * @return the zoomRate
 */
public int getZoomRate() {
return zoomRate;
}
/**
 * @param zoomRate the zoomRate to set
 */
public void setZoomRate(int zoomRate) {
this.zoomRate = zoomRate;
}
/**
 * @return the mkLines
 */
public List<MKLine> getMkLines() {
return mkLines;
}
/**
 * @param mkLines the mkLines to set
 */
public void setMkLines(List<MKLine> mkLines) {
this.mkLines = mkLines;
}
/**
 * @return the data_label
 */
public boolean isData_label() {
return data_label;
}
/**
 * @param data_label the data_label to set
 */
public void setData_label(boolean data_label) {
this.data_label = data_label;
}
/**
 * @return the data_label_prefix
 */
public String getData_label_prefix() {
return data_label_prefix;
}
/**
 * @param data_label_prefix the data_label_prefix to set
 */
public void setData_label_prefix(String data_label_prefix) {
this.data_label_prefix = data_label_prefix;
}
/**
 * @return the data_label_suffix
 */
public String getData_label_suffix() {
return data_label_suffix;
}
/**
 * @param data_label_suffix the data_label_suffix to set
 */
public void setData_label_suffix(String data_label_suffix) {
this.data_label_suffix = data_label_suffix;
}

}

前台代码

<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/inc/includebase.jsp" %>
<%@ include file="/inc/includeEcharts.jsp" %>
<title>运动时间统计</title>
<script type="text/javascript">
var main0
$(function(){
Load.closeParent();
main0 = echarts.init(document.getElementById('main0'));
   var v_url = "${app}/time/timeChartData.do"; 
new JduAjax(v_url,{userId1:'${param.userId1}',userId2:'${param.userId2}',year1:'${param.year1}',year2:'${param.year2}'}, function(data){
main0.setOption(data, true);
main0.resize();
}, null ).request();
});
</script>
</head>
   <body style="height: 100%;border 2px solid red;">
<div id="main0" style="height:380px; width:95%; border:1px solid #ccc;padding:10px;margin: 10px auto; "></div>
</body>
</html>