ECharts柱状图
当我们不想直接把数据直接展示到页面时,我们可以把数据绘制一个简单的图表展示出来,这样既美观又形象。下面是我封装的一个用来把数据格式转换为Echarts柱状图所需要数据的方法。
/**
* 封装了一个用于生成前端柱状图对应数据结构所需数据的方法
*
* @author sueyun
*
*/
public class CreateBarDataUtil {
/**
* 用来生成前端柱状图对应数据结构所需要的原数据,数据中保存的键的名字和原来一样
*
* @param barData 需要一个泛型为Map的list集合数据作为柱状图所需要的数据
* @return 返回一个Map<String, Object>集合,集合里面的键为入参集合中的键
* @throws Exception 空值判断
*/
public static Map<String, Object> getBarDatas(List<Map<String, Object>> barData) throws Exception {
// 判断数据是否为空
if (barData == null || barData.size() == 0) {
throw new Exception(barData + "为空....");
} else {
Map<String, Object> barJson = new HashMap<String, Object>();
// 获得集合中Map的所有键的名字
Set<String> keySet = barData.get(0).keySet();
// 循环遍历set集合创建对应键个数的list集合,并填充数据最后在把list放入另一个map集合中
for (String key : keySet) {
List<String> data = new ArrayList<String>();
for (Map<String, Object> map : barData) {
data.add(String.valueOf(map.get(key)));
}
barJson.put(key, data);
}
return barJson;
}
}
}
下面利用上面的工具类为大家演示如何使用。该例子是基于ssm框架编写的,xml配置略过。
效果图
一 dao层代码
score.xml代码
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.sueyun.mapper.ScoreMapper" >
<select id="selectOneCourse" resultType="map">
SELECT `name`,chinese FROM score
</select>
<select id="selectTwoCourse" resultType="map">
SELECT `name`,chinese,math FROM score
</select>
<select id="selectThreeCourse" resultType="map">
SELECT `name`,chinese,math,english FROM score
</select>
</mapper>
mapper接口中代码(ScoreMapper.java)