对Echarts工厂的封装处理（柱状图）

上篇文章已经提到了大概步骤和要点，所以接下来就直接开始了。

1、柱状图，为了方便使用，在此封装一个实体类（其中包括柱状图，折线图，饼状图基本属性，后续将不再赘述）：

public class PureDataModel{
    private String title;       // Echarts图形标题
    private String subTitle;    // Echarts图形子标题
    private List<String> xData; // 填充x轴所需数据
    private List<String> yData; // 填充y轴所需数据
    private List<String> legend;// 图例组件名称

    private List<? extends Number> data;    // 数据
    private boolean viewAverageLine;    // 平均值线条是否可见（默认为true）
    private boolean markPoint;  // 是否打点
    private String maxName;     // 打点最大值名称 
    private String minName;     // 打点最小值名称 
    private Map<String,PureDataModel> mapModel; // 柱状实体

    private String pieName;     // 扇形区域显示的名称字段
    private Map<String, ? extends Number> pieMapData;   // 每个扇形区域的键值对

    private Map<String, List<? extends Number>> 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<String, PureDataModel> map) {
        Series[] series = new Series[map.size()];
        int i = 0;
        for (Entry<String, PureDataModel> 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<String, PureDataModel> 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<String, PureDataModel> 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，同上篇）

后续更新折线图