java+echart（折线图和柱状图显示）

最新推荐文章于 2025-06-28 09:12:02 发布

AE-86

最新推荐文章于 2025-06-28 09:12:02 发布

阅读量3.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： java 文章标签： echarts java

本文链接：https://blog.youkuaiyun.com/Lzy_YY/article/details/83268213

java 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用柱状图和折线图展示从数据库获取的数据，包括数据填充、图表配置及前后端交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

后台：

这是柱状图：

List<UserResponse> aa = this.getData();
this.userResponseList = aa;
Result<Object> result = new Result<>();
Map<String, Object> returnDataMap = new HashMap<>();//用来装返回的数据的map 
List<UserResponse> records = userResponseList;//这是从数据库查出来的数据

List<String> legend = new ArrayList<>();//用来装该柱状图的名字的
List<Long> echarts1 = new ArrayList<>();这是装柱状图的数据的是一个list数组
List<Long> echarts2 = new ArrayList<>();
List<Long> echarts3 = new ArrayList<>();

List<EchartsEntity> 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<UserResponse> aa = this.getData();
this.userResponseList = aa;
String[] xAxis = null;//x轴

List<UserResponse> records = userResponseList;
List<String> lineColor = new ArrayList<>();//放置折线图每条信息的颜色
List<Long> echarts1 = new ArrayList<>();//折线1
List<Long> echarts2 = new ArrayList<>();//折线2
List<Long> echarts3 = new ArrayList<>();//折线3
List<EchartsEntity> echarts = new ArrayList<>();
Result<Object> 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<String, Object> ret = new HashMap<>();
ret.put("xAxis", xAxis);//x轴信息
ret.put("series", echarts);//折线内容
ret.put("legend", lineColor);//折线颜色和折线颜色所代表的的信息

result.setResult(ret);

return result;