EChart 如何设置多组数据对比

最新推荐文章于 2023-08-21 09:56:17 发布

阿超1210

最新推荐文章于 2023-08-21 09:56:17 发布

阅读量2.6k

点赞数

分类专栏：前端啊文章标签： echart 图表

本文链接：https://blog.csdn.net/xiaotianquan1210/article/details/80450515

版权

该博客展示了如何使用ECharts在前端展示两组不同用户在不同年份的运动时间对比图表。通过后台获取数据并处理，形成JSON格式传递给前端，前端使用ECharts初始化图表并设置选项进行展示。

摘要由CSDN通过智能技术生成

展示效果如下图所示：

后台代码

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

</