对Echarts工厂的封装处理（柱状图）
上篇文章已经提到了大概步骤和要点，所以接下来就直接开始了。
1、柱状图，为了方便使用，在此封装一个实体类（其中包括柱状图，折线图，饼状图基本属性，后续将不再赘述）：
public class PureDataModel{
private String title; // Echarts图形标题
private String subTitle; // Echarts图形子标题
private List xData; // 填充x轴所需数据
private List yData; // 填充y轴所需数据
private List legend;// 图例组件名称
private List data; // 数据
private boolean viewAverageLine; // 平均值线条是否可见（默认为true）
private boolean markPoint; // 是否打点
private String maxName; // 打点最大值名称
private String minName; // 打点最小值名称
private Map mapModel; // 柱状实体
private String pieName; // 扇形区域显示的名称字段
private Map pieMapData; // 每个扇形区域的键值对
private Map> lineMapData; // 折线图每根折线对应的数据
/**
* 构造函数
*/
public PureDataModel() {
super();
}
/**
* 所有Echarts图形均可设置
*
* @param title 标题
* @param subTitle 子标题
*/
public PureDataModel(String title, String subTitle) {
this.title = title;
this.subTitle = subTitle;
}
} setter & getter 方法在此省略
2、EchartDataOptionFactory 工厂中新增方法:
/**
* 创建柱状图
*
* @param model
* @return
*/
public static Option createBarChartDataOption(PureDataModel model){
Option option = new Option();
option.title().text(model.getTitle()).subtext(model.getSubTitle() == null?"":model.getSubTitle());
option.tooltip().trigger(Trigger.axis);
option.legend(model.getLegend().toArray());
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar).show(true), Tool.restore, Tool.saveAsImage);
option.calculable(true);
option.xAxis(new CategoryAxis().data(model.getxData().toArray()));
option.yAxis(new ValueAxis());
option.series(getBarArray(model.getMapModel()));
return option;
}
/**
* 获取每一个柱状实体转换为Series数组
*
* @param map 柱状名称对应柱状实体
* @return
* @throws Exception
*/
@SuppressWarnings("rawtypes")
private static Series[] getBarArray(Map map) {
Series[] series = new Series[map.size()];
int i = 0;
for (Entry item : map.entrySet()) {
Bar bar = new Bar(item.getKey());
bar.data(item.getValue().getData().toArray());
if (item.getValue().isMarkPoint()) {
bar.markPoint().data(new PointData().type(MarkType.max).name(item.getValue().getMaxName()), new PointData().type(MarkType.min).name(item.getValue().getMinName()));
}
if (item.getValue().isViewAverageLine() != false) {
bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));
}
series[i] = bar;
i++;
}
return series;
} 由于一个坐标系中可能并非只有一个柱状图，可能会有多种类型柱状图放入同一个坐标系中进行比较，所以加入static Series[] getBarArray（Map map）方法处理不同柱状图对象。
3、service层调用工厂方法：
/**
* 创建柱状图Demo
*/
@Override
public Option createBarChartDataOption(PureDataModel model) {
model.setTitle("某地区蒸发量和降水量");
model.setSubTitle("纯属虚构");
model.setLegend(Arrays.asList("蒸发量", "降水量"));
model.setxData(Arrays.asList("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"));
Map map = new HashMap<>();
PureDataModel model1 = new PureDataModel();
model1.setData(Arrays.asList(2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3));
model1.setViewAverageLine(true);
model1.setMarkPoint(true);
model1.setMaxName("最大值");
model1.setMinName("最小值");
PureDataModel model2 = new PureDataModel();
model2.setData(Arrays.asList(2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3));
model2.setViewAverageLine(true);
model2.setMarkPoint(true);
model2.setMaxName("年最高");
model2.setMinName("年最低");
map.put("蒸发量", model1);
map.put("降水量", model2);
model.setMapModel(map);
return EchartDataOptionFactory.createBarChartDataOption(model);
} 4、controller层调用service中方法
/**
* 获取柱状图
*
* @param model
* @return
*/
@RequestMapping(value = "getBar.do",produces="text/html;charset=UTF-8")
@ResponseBody
public String getBar(PureDataModel model) {
return JSON.toJSONString(es.createBarChartDataOption(model));
}5、前端jsp处理：（除url，同上篇）
