java+echart(折线图和柱状图显示)

项目中用到了折线图和柱状图来展示数据,直接上代码。

后台:

这是柱状图:

List aa = this.getData();
this.userResponseList = aa;
Result result = new Result<>();
Map returnDataMap = new HashMap<>();//用来装返回的数据的map 
List records = userResponseList;//这是从数据库查出来的数据 
  
List legend = new ArrayList<>();//用来装该柱状图的名字的
List echarts1 = new ArrayList<>();这是装柱状图的数据的是一个list数组
List echarts2 = new ArrayList<>();
List echarts3 = new ArrayList<>();

 

List echarts = new ArrayList<>();//这是为了响应起前段的一个实体类。类的属性如下

String[] xAxis = null;//x轴就是时间轴,也是一个数组。
xAxis = new String[userResponseList.size()];//x轴的大小取决于数组的大小

//循环DB数据的大小
for (int i = 0; i < userResponseList.size(); i++) {
//给x轴写入数据
    xAxis[i] = records.get(i).getStatisticTime().toLocaleString();
//给每一个树状图填充数据
    echarts1.add(records.get(i).getOnLineUserCount());
    echarts3.add(records.get(i).getDayIncreaseUserCount());
    echarts2.add(records.get(i).getDayLoginCount());
}

 

 

EchartsEntity entity1 = new EchartsEntity(userResponseList.get(0).getOnLineUserCountName(), "bar", echarts1, "");
EchartsEntity entity2 = new EchartsEntity(userResponseList.get(0).getDayLoginCountName(), "bar", echarts2, "");
EchartsEntity entity3 = new EchartsEntity(userResponseList.get(0).getDayIncreaseUserCountName(), "bar", echarts3, "");

echarts.add(entity1);
echarts.add(entity2);
echarts.add(entity3);

//给组装图填充名字
legend.add(userResponseList.get(0).getOnLineUserCountName());
legend.add(userResponseList.get(0).getDayLoginCountName());
legend.add(userResponseList.get(0).getDayIncreaseUserCountName());

 

returnDataMap.put("xAxis", xAxis);
returnDataMap.put("series", echarts);
returnDataMap.put("legend", legend);

result.setResult(returnDataMap);
result.setMessage("查询成功");
return result;

 

以上就是柱状图的;

折线图大致差不多,就是折线的类型需要修改一下

List aa = this.getData();
this.userResponseList = aa;
String[] xAxis = null;//x轴

List records = userResponseList;
List lineColor = new ArrayList<>();//放置折线图每条信息的颜色
List echarts1 = new ArrayList<>();//折线1
List echarts2 = new ArrayList<>();//折线2
List echarts3 = new ArrayList<>();//折线3
List echarts = new ArrayList<>();
Result result = new Result<>();

xAxis = new String[userResponseList.size()];//x轴的长度
for (int i = 0; i < userResponseList.size(); i++) {//循环mysql结果
    xAxis[i] = records.get(i).getStatisticTime().toLocaleString();//我是以时间作为x轴
    echarts1.add(records.get(i).getOnLineUserCount());//折线1
    echarts2.add(records.get(i).getDayLoginCount());//折线2
    echarts3.add(records.get(i).getDayIncreaseUserCount());//折线3

}

EchartsEntity entity1 = new EchartsEntity(userResponseList.get(0).getOnLineUserCountName(), "line", echarts1, "总量");
EchartsEntity entity2 = new EchartsEntity(userResponseList.get(0).getDayLoginCountName().toString(), "line", echarts2, "总量");
EchartsEntity entity3 = new EchartsEntity(userResponseList.get(0).getDayIncreaseUserCountName(), "line", echarts3, "总量");
echarts.add(entity1);
echarts.add(entity2);
echarts.add(entity3);
lineColor.add(userResponseList.get(0).getOnLineUserCountName());
lineColor.add(userResponseList.get(0).getDayLoginCountName());
lineColor.add(userResponseList.get(0).getDayIncreaseUserCountName());
Map ret = new HashMap<>();
ret.put("xAxis", xAxis);//x轴信息
ret.put("series", echarts);//折线内容
ret.put("legend", lineColor);//折线颜色和折线颜色所代表的的信息

result.setResult(ret);

return result; 
  

 

 

 

你可能感兴趣的:(java)