第一次使用echart从后台获取数据动态显示到页面

第一次使用Echart绘制图表，看了两天，终于结合后台给整出来了。走过之后再看看，其实很简单的。不多说了，直接上图：

第一步：去echarts官方下载最新的js; 官方地址 ： echarts.baidu.com

            我下的是3.4.0版的：echarts.min.js

第二步：创建一个ReportDataBean，在该类中设置两个属性：Listcategories 和 List data，具体如下图
        ReportDataBean:用来记录和存储需要传递到前台页面中显示的数据集合

public class ReportDataBean {
	private List categories;
	private List data;
	public List getCategories() {
		return categories;
	}
	public void setCategories(List categories) {
		this.categories = categories;
	}
	public List getData() {
		return data;
	}
	public void setData(List data) {
		this.data = data;
	}	
}

第三步：创建EchartReportService ，TestDataService，和各自实现。EchartReportService是所以对外调用的主Service，而TestDataService是具体的业务Service

       1.EchartReportService:模板接口，用来以后进行不同模板间进行扩展 

public interface EchartReportService {	
	public JSONObject getDataJson();	
}

       2.TestDataService ：具体实现数据实现接口,用来实现获取具体业务相关的数据，继承了EchartReportService

public interface TestDataService extends EchartReportService {
}

       3.EchartReportServiceImpl           

@Service
public class EchartReportServiceImpl implements EchartReportService {
	@Override
	public JSONObject getDataJson() {
		return null;
	}
}

       4.TestDataServiceImpl       

@Service
public class TestDataServiceImpl extends EchartReportServiceImpl implements TestDataService {
	/**
	 * 模拟获取数据库后的数据
	 * @return
	 */
	@Override
	public JSONObject getDataJson() {
		ReportDataBean bean = new ReportDataBean();
		List categories = Arrays.asList("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子");
		List data = Arrays.asList(5, 20, 36, 10, 10, 20);
		bean.setCategories(categories);
		bean.setData(data);
		JSONObject jsonObj = (JSONObject) JSON.toJSON(bean); 
	    return jsonObj;
	}
}

第四步：testReport.jsp是具体显示统计图表的页面，里面有三个最重要的方法。这里只做最简单的实现

            callbackFn方法是处理从后台获取的数据然后前台解析的。

            initReport方法是初始化基本图标横轴和纵轴的方法。在这个方法里，只留有xAxis.data和series.data是动态从数据库获取后赋值的。

            createTestReport方法是将callbackFn和initReport方法合并的入口方法。这样为以后可以在同一类型的图表显示模板进行编辑和处理进行扩充

            testReport.jsp 代码如下:           

<#assign base=request.contextPath />





    
    
    
    
    
    

    
    
    
    
    
    
    
    




    

        

            

                

                    

                        
测试报表
                    
                    

						

                    
                
            
        
    

    
    
    
    
    
    
    
    
    
    
    
     
       
    
   

注意事项及说明：

           由于此功能是集成到其他功能上的，所以只进行了涉及到的基本的代码编写和上传。功能扩展和细节还不完善，只是做个引子抛砖引玉用

执行结果：