Echart的使用 - 酷游博客

ECharts(Enterprise Charts)，是百度的一套商业级数据图表。官网地址：http://echarts.baidu.com/index.html Github地址：https://github.com/ecomfe/echarts

Echart提供了很多丰富多彩的图表。只要我们引入echart相关的前端资源，再按照要求生成数据，就能展示出很漂亮的图表来。

Ecahrt的使用

一、引入Echart

百度提供了几种方式在我们的web项目中引入echart，文档地址：http://echarts.baidu.com/doc/doc.html#%E5%BC%95%E5%85%A5ECharts 具体使用方法可以查看：http://echarts.baidu.com/doc/start.html 主要就是以下几个步骤：

1、为ECharts准备一个具备大小（宽高）的Dom。 2、新建
以上代码就能渲染出一个设定好的echart图表。但是web项目势必要从后端取数据，然后在前端通过图形展示出来。所以要从后端获取图表数据。从上面代码中可以看出，只要我们从后端g构造一个option，然后传给前端，前端把接收到的option设置给chart就可以展示数据了，那么接下来介绍如何在后端构造option。
二、后端数据的生成
增加依赖（http://git.oschina.net/free/ECharts）：
            com.github.abel533
            ECharts
            2.2.6
        
构造一个option。
/**
     * 生成[应用分级]的柱状图
     * @return
     */
    public static Option getBarOptionForGrade(Map data,String dept){
        Option option = new Option();
        option.title(dept + "-应用分级");
        option.title().subtext("维护说明").sublink();
        option.tooltip(Trigger.axis);
        option.legend().data("本周", "上周");
        option.calculable(true);
        option.xAxis(new CategoryAxis().data("A级", "B级", "C级", "D级"));
        option.yAxis(new ValueAxis());
        Bar bar = new Bar("本周");
        bar.data(data.get("gradeA"), data.get("gradeB"), data.get("gradeC"), data.get("gradeD"));

        Bar bar2 = new Bar("上周");
        bar2.data(data.get("lastWeekGradeA"), data.get("lastWeekGradeB"), data.get("lastWeekGradeC"), data.get("lastWeekGradeD"));
        option.series(bar, bar2);

        return option;
    }
通过ajax异步请求将数据返回到前端并展示出来。 >
jQuery.ajax('json/availabilityReportGenerate.json?dept=$!dept&grade=$!grade&flag=grade', {
            type:'POST',
            success: function(res){
                if(res.result=="success"){
                    myChartGrade.hideLoading();
                    myChartGrade.setOption(res.optionData);
                }else{
                    alert(res.mess);
                }
            },
            error:function(){
                alert("大爷，数据加载不到咯！~");
            }
        });
ajax请求的java类如下
public class AvailabilityReportGenerate {

    @Autowired
    private AvailabilityReoprtService availabilityReoprtService;

    public void execute(
            @Param("dept") String dept,
            @Param("flag")String flag,
            @Param("grade") String grade,
            TurbineRunData rundata, Context context) throws IOException, ServletException {
        Map optionString = null;
        JSONObject jsonObject = new JSONObject();
        if(StringUtils.isBlank(dept)||StringUtils.isBlank(grade)||StringUtils.isBlank(flag)){
            jsonObject.put("result", "fail");
            jsonObject.put("mess","参数不全！无法展示详细数据！");
            context.put("json",jsonObject.toJSONString());
        }else if(!tairService.isPKeyExist(SLA_PKEY_PERFIX + StringUtils.upperCase(dept)  + "_" + StringUtils.upperCase(grade))){
            jsonObject.put("result", "fail");
            jsonObject.put("mess","数据不存在！请检查参数！");
            context.put("json",jsonObject.toJSONString());
        }else{
            if(StringUtils.equals("grade", flag)){
                Option option =  EchartOptionGenerator.getBarOptionForGrade(availabilityReoprtService.getOptionGradeData(dept,grade),dept);
                jsonObject.put("result", "success");
                jsonObject.put("optionData", option);
                context.put("json",jsonObject.toJSONString());
            }

        }

    }
}
三、事件监听
引入config.js文件定义函数
function eConsole(param) {
    alert(JSON.stringify(param));
    //window.location.href="http://www.alibaba.com";
}
事件绑定
mychartAAvg.on(echarts.config.EVENT.CLICK, eConsole);