关于Echarts堆叠柱状图从后台查数据并展示

1.首先去Echarts官网下载插件，引入到jsp中
(https://echarts.baidu.com/)

<script type="text/javascript" src="www/echarts.min.js"></script>

2.给按钮注册事件

<li  onclick="queryInfo()"><span></span><div>查询</div></li>

3.编写事件代码，这里是通过ajax向后台发送请求，在回调函数中为已经构建好的echarts图表填充数据（也可以在回调函数中构建图表）

function queryCostStructure(reportYear){
	   			   //基于准备好的dom，初始化echarts实例，这里的“main”随便定义一块div就行
	   		        var myChart = echarts.init(document.getElementById('main'));
	   		        // 指定图表的配置项和数据，这里是堆叠柱状图的一些属性，详细可以参考echarts官网实例
	   		        var option = {
	   		            tooltip: {
	   		                 trigger: "axis",  
	   		            },
	   		            legend: {
	   		                data:['费用A','费用B'],
	   		            },
	   		            xAxis: {
	   		                data: [],//表示横轴坐标
	   		                splitLine:{
	   		                    show:false,
	   		                },
	   		                axisLabel :{interval:0,rotate:50} //rotate表示横轴文字倾斜角度
	   		            },
	   		            yAxis: {
	   		                 splitLine:{
	   		                    show:false,
	   		                },
	   		            },
	   		            series: [{
	   		                name: '费用A',
	   		                type: 'bar',
	   		                barWidth : 20,//柱图宽度
	   		                stack:'费用构成',//表示在哪一列
	   		                data: [],
	   		                itemStyle:{
	   		                     normal:{color:"#00BFFF"},//表示堆叠柱状图填充的颜色
	   		                }
	   		            },{
	   		                name: '费用B',
	   		                type: 'bar',
	   		                stack:'费用构成',//表示在哪一列，如果和上面的相同，则在一个柱上展示，如果不同，分两个柱展示
	   		                data: [],
	   		                itemStyle:{
	   		                     normal:{color:"#40E0D0"},
	   		                }
	   		            }]
	   		        };
	   				$.ajax({//ajax访问后台
	   		            type: "post",
	   		            url: "${adminPath }/budgetStatistic/projectResearchBudgetEcharts",
	   		            dataType:"json",
	   		            async:false,
	   		            data: {"reportYear":reportYear},
	   		            success:function(result){
	   		            	if(result.length>0){
	   		            		for(var i=0;i<result.length;i++){
	   		            		//通过在回调函数中遍历结果集，填充图表数据
	   			            		option.xAxis.data.push(result[i].name);
	   			            		option.series[0].data.push(result[i].feeA);
	   			            		option.series[1].data.push(result[i].feeB);
	   			            	}
	   		            	}
	   		            }	
	   		        });
	   			    myChart.clear();
	   			    // 使用刚指定的配置项和数据显示图表。
	   		        myChart.setOption(option);
	   		 	
	   		}
``


```后台逻辑就是普通的控制层调用业务层
注意要在方法上加注解@ResponseBody，因为ajax使用json格式传递数据
@RequestMapping("/projectResearchBudgetEcharts")
	@ResponseBody
	public List<AAA> getAAA(BBB entity, ModelMap model, HttpServletRequest request){
		List<BBB> list = budgetStatistic.getResearchBudgetEchars(entity);
		return list;
	}