ECharts通过Ajax动态加载数据到图表

参考官网：http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2

要展示的图表像这样：

现在开始前后端代码展示。by the way，使用的开发框架为nutz，重点还是echarts数据。不要本末倒置。

1.从官网下载包

使用其中的dist文件夹和echarts.js，将dist文件夹和echarts.js放在工程的js目录下。

2.前端js代码echartsOneTest.jsp：

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>统计</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <%@ include file="/WEB-INF/jsp/tag.jsp" %>
    <%@ include file="/WEB-INF/jsp/common_css.jsp" %>
    <%@ include file="/WEB-INF/jsp/common_js.jsp" %>
    <%@ include file="/WEB-INF/jsp/common_tool.jsp" %>
</head>
<body>
    <div>
        <button onclick="getJson()">查询</button>
    </div>
    <div id="main" style="height:400px;"></div>
    <%--echarts.js的路径可以随便放，只要这里能获取到就行了--%>
    <script src="../../static/js/echarts.js"></script>
    <script type="text/javascript">
        var myChart;//定义一个全局的图表变量，供后面动态加载时使用
        require.config({
            paths: {
                echarts: '../../static/js/dist'   //将dist文件夹和echarts.js放在同一目录下
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                myChart = ec.init(document.getElementById('main'));
                //下面的option可以为空{}，ajax动态添加数据时会加上相应的属性
                //var option = {};
                var option = {
                    legend: {
                        data:['蒸发量','降水量']
                    },
                    xAxis : {
                        data : []
                    },
                    yAxis : {},
                    series : [
                        {
                            name:'蒸发量',
                            type:'bar',
                            data:[]
                        },
                        {
                            name:'降水量',
                            type:'bar',
                            data:[]
                        }
                    ]

                };
                myChart.setOption(option);
            }
        );

        function getJson() {
            //获取数据时显示加载状态图
            myChart.showLoading();
            var months=[];//用来盛放X轴坐标值：月份
            var evapCapacitys=[];//用来盛放Y坐标值：蒸发量
            var precipitations=[];//用来盛放Y坐标值：降雨量

            $.ajax({
                type : "post",
                async : true, //异步请求
                url : "${ctx}/echarts/getJson",
                data : {},
                dataType : "json",
                success : function(result) {
                    if (result.status) {
                        var list = result.list;
                        for(var i=0;i<list.length;i++){
                            months.push(list[i].month);    //遍历月份并填入数组
                        }
                        for(var i=0;i<list.length;i++){
                            evapCapacitys.push(list[i].evapCapacity);    //遍历蒸发量并填入数组
                        }
                        for(var i=0;i<list.length;i++){
                            precipitations.push(list[i].precipitation);    //遍历降水量并填入数组
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption({        //加载数据图表
                            tooltip : {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['蒸发量','降水量']
                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    magicType : {show: true, type: ['line', 'bar']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            xAxis: {
                                data: months
                            },
                            yAxis:{},//注意一定不能丢了这个，不然图表Y轴不显示
                            series: [{
                                // 根据名字对应到相应的系列，并且要注明type
                                name: '蒸发量',
                                type:'bar',
                                data: evapCapacitys
                            },{
                                // 根据名字对应到相应的系列，并且要注明type
                                name: '降水量',
                                type:'bar',
                                data: precipitations
                            }]
                        });

                    }

                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        }
    </script>
</body>
</html>

3.后端java代码 ，

EChartsModule.java

package com.kp.module;

import com.kp.entity.EchartsEntity;
import org.nutz.ioc.loader.annotation.IocBean;
import org.nutz.lang.util.NutMap;
import org.nutz.mvc.annotation.At;
import org.nutz.mvc.annotation.Ok;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by admin on 2017/12/22.
 */
@IocBean
@At("/echarts")
public class EChartsModule {

    @At("/index")
    @Ok("jsp:jsp.echartsOneTest")
    public void index() {

    }

    @At("/getJson")
    @Ok("json")
    public NutMap getJson(){
        NutMap nutMap = new NutMap();
        List<EchartsEntity> list =  new ArrayList<>();
        list.add(new EchartsEntity("1月份",2.0f, 2.6f));
        list.add(new EchartsEntity("2月份",4.9f, 5.9f));
        list.add(new EchartsEntity("3月份",7.0f, 9.0f));
        list.add(new EchartsEntity("4月份",23.2f, 26.4f));


        nutMap.put("list", list);
        nutMap.put("status", "ok");
        return nutMap;
    }

}

EchartsEntity.java

package com.kp.entity;

/**
 * Created by admin on 2017/12/22.
 */
public class EchartsEntity {
    private String month;
    private Float evapCapacity;
    private Float precipitation;

    public EchartsEntity(String month, Float evapCapacity,  Float precipitation) {
        this.month = month;
        this.evapCapacity = evapCapacity;
        this.precipitation = precipitation;
    }

    public String getMonth() {
        return month;
    }

    public void setMonth(String month) {
        this.month = month;
    }

    public Float getEvapCapacity() {
        return evapCapacity;
    }

    public void setEvapCapacity(Float evapCapacity) {
        this.evapCapacity = evapCapacity;
    }

    public Float getPrecipitation() {
        return precipitation;
    }

    public void setPrecipitation(Float precipitation) {
        this.precipitation = precipitation;
    }
}