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、新建<script>标签引入模块化单文件echarts.js 3、为刚刚准备好的dom填充数据

<div style="width:100%;float:left" class="box">
    <div id="chart_grade" style="width:100%;height:650px;;float:left"></div>
</div>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script>
var myChartGrade = echarts.init(document.getElementById('chart_grade'));

    myChartGrade.showLoading({
        text: '正在努力的读取数据中...',
        effect : 'whirling',
    });

    var option_grade = {
        title : {
            text: '应用分级',
            subtext: '维护说明',
            sublink:'http://****/app-grade-magagement'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['本周','上周']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: false},
                dataView : {show: true, readOnly: true},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['A级','B级','C级','D级']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'本周',
                type:'bar',
                itemStyle : { normal: {label : {show: true, position: 'top'},color: ['#87CEEB']}},
                data:[40.0, 50.0, 40.0, 40.0]

            },
            {
                name:'上周',
                type:'bar',
                itemStyle : { normal: {label : {show: true, position: 'top'},color: ['#DEB887']}},
                data:[40.0, 40.0, 40.0, 40.0]

            }
        ]
    };

    myChartGrade.setOption(option_grade);
</script>

以上代码就能渲染出一个设定好的echart图表。但是web项目势必要从后端取数据，然后在前端通过图形展示出来。所以要从后端获取图表数据。 从上面代码中可以看出，只要我们从后端g构造一个option，然后传给前端，前端把接收到的option设置给chart就可以展示数据了，那么接下来介绍如何在后端构造option。

二、后端数据的生成

增加依赖（http://git.oschina.net/free/ECharts）：

<dependency>
            <groupId>com.github.abel533</groupId>
            <artifactId>ECharts</artifactId>
            <version>2.2.6</version>
        </dependency>

构造一个option。

/**
     * 生成[应用分级]的柱状图
     * @return
     */
    public static Option getBarOptionForGrade(Map<String,Integer> 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<String,Double> 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文件 <script src="/js/config.js"></script> 定义函数

function eConsole(param) {
    alert(JSON.stringify(param));
    //window.location.href="http://www.alibaba.com";
}

事件绑定

mychartAAvg.on(echarts.config.EVENT.CLICK, eConsole);