利用实体类转JSONObject，实现Echart趋势图动态显示向前一年数据

利用实体类转JSONObject对象的方法参考
链接: 我参考的博客原文跳转.
想要实现点击一个按钮，跳转到echart显示页面，动态从后台接口获取数据，显示趋势图。参考了原文章，并做了一定的简化修改。

1、页面（ 下载echarts.min.js的链接，提取码：w4sv。）
Echart官网链接

<script src="js/echarts.min.js"></script>
<div class="row" style="padding-top: 15px;">
	<div id="main" style="width: 100%;height:400px;"></div>
</div>
<script>
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	// 指定图表的配置项和数据
	var option = {
     //默认都是空数据
		title: {
     
			text: '一年内价格涨幅趋势图'
		},
		tooltip: {
     },
		legend: {
     
			data:['价格']
		},
		xAxis: {
     
			data: []
		},
		yAxis: {
     },
		series: [{
     
			name: '价格',
			type: 'line',//这样就是趋势图，如果写成bar就是柱状图
			data: []
		}]
	};
	myChart.setOption(option);//必须有，否则图表显示不出来
	$(document).ready(function() {
     //这个函数是可以实现自动加载数据
			$.ajax({
     
				type:"POST",
				url:"http://localhost:8080/getData",
				dataType:"json",
				contentType: 'text/json,charset=utf-8',
				data: {
     
                   id:你的参数
                },
				success: function (jsonData) {
     
					myChart.setOption({
     
						xAxis: {
     
							data: jsonData.months
						},
						series: [{
     
							// 根据名字对应到相应的系列
							name: '销量',
							data: jsonData.results
						}]
					});
				}
			});
	});
</script>

2、后台代码

（1）先建立一个实体类，用于封装Echart需要的数据

public class EchartData{
     
    private List<String> months;
    private List<Double> results;//用double使得显示的数据更加准确
    public List<String> getMonths() {
     
        return months;
    }
    public void setMonths(List<String> months) {
     
        this.months = months;
    }
    public List<Double> getResults() {
     
        return results;
    }
    public void setResults(List<Double> results) {
     
        this.results = results;
    }
}

（2）直接在前台调用的后台函数里使用实体类封装数据即可。
我实现的是从当前月份的前一个月开始向前一年。

@RequestMapping("getData")
@ResponseBody
public JSONObject getData(HttpServletRequest req)throws SQLException{
     
		String id = req.getParameter("id");
		List<Double> result = new ArrayList<>();//存平均值
		List<String> mot = new ArrayList<>();//存月份
		SimpleDateFormat dateFormat2 = new SimpleDateFormat("yyyy-MM-dd");
		Date now = new Date();//当前系统日期
		Calendar c = Calendar.getInstance();
		c.setTime(now);
		int year = c.get(Calendar.YEAR);//年，是真实的年
		int month = c.get(Calendar.MONTH);//月，会比实际小1
		System.out.println("当前年="+year+" 当前月="+month);
		//当前系统月份前一个月，往前一年，
		//假如现在是19年9月，直接从18年的9月遍历到19年的8月
		month = month + 1;//本月
		year = year - 1;//去年
		System.out.println("开始年="+year+" 开始月="+month);
		int t = 0;//标记只改变年份一次
		int mo;
		for(int i = 0; i < 12; i++){
     //12个月，同一个月的数相加取平均数
			mo = month + i;//从去年9月开始累加12个月，
			if (mo > 12) {
     //超出12月就让月份从1月开始，年份加1始
				mo = mo - 12;
				if(t == 0){
     //年份只在第一次月份超出12的时候加一，之后就不加了
					year = year + 1;
					t = 1;
				}
			}
			String tt ="" + '"' + year + "年" + mo + "月"+'"';//准备x轴
			mot.add(tt);//存月份
			//...获取year年和mo月的数据res
			result.add(res);//添加当月计算结果
		}
		System.out.println("月份=" + mot);
		System.out.println("结果=" + result);
		EchartData edbean = new EchartData();//把月份数据和计算结果数据存入bean
		edbean.setMonths(mot);
		edbean.setResults(result);
		JSONObject jsonObj = (JSONObject) JSON.toJSON(edbean);
		//此处的方法来自参考文字
		return jsonObj;
	}

至此Echart图就可以在点击按钮后跳转到显示页面，页面请求后台，动态获得从当月的前一个月向前一年的每个月的数据，并且显示啦。

效果图：