echarts2.2.7动态数据填充

项目结构：

1.柱状图

jsp代码：

// 路径配置
        require.config({
            paths: {
                echarts: 'echarts'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                 var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
	             series : [
	                 {
	                     "name":"销量",
	                     "type":"bar",
	                     "data":(function(){  
			var arrY=[];  
			$.ajax({
				url : "barServlet",//要提交的URL路径
				async : false, //同步执行  异步无法实现自动填充
				type : "post",      //发送请求的方式
				data :{},
				dataType : "json",    //指定传输的数据格式
				success : function(result) {//请求成功后要执行的代码
					$.each(result,function(index,item){
						arrY.push(item);
					});
				}
			});
			return arrY;  
			})()//此处多加一对()	
	                 }
	             ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );

后台代码

request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		List list = new ArrayList();
		list.add(10);
		list.add(5);
		list.add(5);
		list.add(8);
		list.add(7);
		list.add(3);
		JSONArray json = JSONArray.fromObject(list);
		response.getWriter().print(json);

2.饼状图

jsp代码

// 路径配置
        require.config({
            paths: {
                echarts: 'echarts'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                option = {
				    title : {
				        text: '某站点用户访问来源',
				        subtext: '纯属虚构',
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient : 'vertical',
				        x : 'left',
			        data:(function(){
	            		var arrY=[];  
				$.ajax({
					url : "pieServlet",//要提交的URL路径
					async : false, //同步执行  异步无法实现自动填充
					type : "post",      //发送请求的方式
					data :{},
					dataType : "json",    //指定传输的数据格式
					success : function(result) {//请求成功后要执行的代码
						$.each(result,function(index,item){
							arrY.push(result[index].name);
						});
					}
				});
				return arrY; 
			            })()
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {
				                show: true, 
				                type: ['pie', 'funnel'],
				                option: {
				                    funnel: {
				                        x: '25%',
				                        width: '50%',
				                        funnelAlign: 'left',
				                        max: 1548
				                    }
				                }
				            },
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    series : [
				        {
				            name:'访问来源',
				            type:'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
		            data:(function(){
	            				var arrY=[];  
						$.ajax({
							url : "pieServlet",//要提交的URL路径
							async : false, //同步执行  异步无法实现自动填充
							type : "post",      //发送请求的方式
							data :{},
							dataType : "json",    //指定传输的数据格式
							success : function(result) {//请求成功后要执行的代码
								$.each(result,function(index,item){
									arrY.push({name:result[index].name,value:result[index].value});
								});
							}
						});
						return arrY; 
		           	 })()
				        }
				    ]
				};
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );

后台代码

		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		Model m1 = new Model("直接访问",335);
		Model m2 = new Model("邮件营销",335);
		Model m3 = new Model("联盟广告",335);
		Model m4 = new Model("视频广告",335);
		Model m5 = new Model("音乐广告",335);
		List list = new ArrayList();
		list.add(m1);
		list.add(m2);
		list.add(m3);
		list.add(m4);
		list.add(m5);
		JSONArray json = JSONArray.fromObject(list);
		response.getWriter().print(json);

效果图