ECharts

在hollyvoc-portal 中制作图表报表

在封装基础上，制作echart表，需要注意封装方法需要的调用方法，以及对参数的要求。下面是一个在Hollyvoc下的主要代码的书写规范。

reports.jsp

在页面拼接面板，确定页面样式，以及图位置，指定每个图的id，在js中根据id ,获取这个div，给该div添加图表信息。

    <div class="col-md-12">
      <div id="area_chart"></div>
    </div>

    <div class="col-md-12">
      <div id="reason_day"></div>
    </div>

reports.js

$(“#area_chart”).panel 获取面板，在面板主体上生成dom容器，包括 图表的标题，样式，颜色等。

初始化echart图表，三个参数 url(链接action地址), data（调用方法的参数）, dom 容器, parts(图表类型)等。

 //==========数据分布地图
    var areaDom=$("#area_chart").panel({//数据分布图面板
        title:'数据分布',
        style:"height:300px",
        scene:"panel-yellow"
    }).panel_body();

    var areaChart = new $ECharts({//数据分布图
        url:contextPath+'/reason/showAreaCharts.do',
        data:{'rcaId':rcaId,'codeType':"AREA_CODE"},
        dom:areaDom[0],
        parts:'map'
    });

ReasonAction

js调用action获取加载报表中图表的数据。

/**
     * 加载分析报告中地图数据.
     * @param codeType 分组字段类型
     * @param rcaId 查询条件
     * @return 返回结果
     */
    @RequestMapping("showAreaCharts.do")
    @ResponseBody
    public JSONResult showAreaCharts(final String codeType, final String rcaId) {
        //用于返回ajax请求数据，并进行封装
        JSONResult result = new JSONResult();
        try {
            Map map = rs.getReportAreaData(codeType, rcaId);
            result.setResult(map);
            result.setStatus(true);
        } catch (Exception e) {
            result.setStatus(false);
            result.setMsg("获取分析报告中地图数据失败");
            log.error("获取分析报告中地图数据失败,错误信息:", e);
        }
        return result;
    }