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> rel1 = this.getRptMonthData(year1,userId1);
List> rel2 = this.getRptMonthData(year2,userId2);

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

List> data = new ArrayList>();
List> list = new ArrayList>();
Map item = new HashMap();
Map item2 = new HashMap();
for (Map map : rel1) {
Map d = new HashMap();
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> list2 = new ArrayList>();
for (Map map : rel2) {
Map d = new HashMap();
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> 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> 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> 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 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> getData() {
return data;
}
/**
 * @param data the data to set
 */
public void setData(List> 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 getMkLines() {
return mkLines;
}
/**
 * @param mkLines the mkLines to set
 */
public void setMkLines(List 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"%>



<%@ include file="/inc/includebase.jsp" %>
<%@ include file="/inc/includeEcharts.jsp" %>