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" %>


    
    
    <%@ 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" %>


    

        查询
    
    

    <%--echarts.js的路径可以随便放，只要这里能获取到就行了--%>
    
    

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 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;
    }
}