echarts使用API查看新增商品数量

echarts官网：http://echarts.baidu.com/index.html
帮助文档：http://echarts.baidu.com/api.html#echarts
下载地址：http://echarts.baidu.com/download3.html 使用的是3.8.5版本
必要引入资源：

<script type="text/javascript" src="<%=request.getContextPath() %>/js/echarts/echarts.min.js"></script>

效果：（需求：点击下面按钮查询7天，15天，30天增加的商品数量）

前台代码：
html：

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1400px;height:400px;"></div>
<button type="button" value="7" class="btn btn-success"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> 切换视图为7天</button>
<button type="button" value="15" class="btn btn-success"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> 切换视图为15天</button>
<button type="button" value="30" class="btn btn-success"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> 切换视图为30天</button>

js：

<link href="<%=request.getContextPath() %>/js/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">


<script type="text/javascript" src="<%=request.getContextPath() %>/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/echarts/infographic.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.2.1.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
//简单使用
//     // 指定图表的配置项和数据
//     var option = {
//         title: {
//             text: 'ECharts 入门示例'
//         },
//         tooltip: {},
//         legend: {
//             data:['销量']
//         },
//         xAxis: {
//             data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
//         },
//         yAxis: {},
//         series: [{
//             name: '销量',
//             type: 'line',
//             data: [5, 20, 36, 10, 10, 20]
//         }]
//     };

//     // 使用刚指定的配置项和数据显示图表。
//     myChart.setOption(option);
    </script>
//实现相应需求JS
<script type="text/javascript">
    
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'),'infographic');

    
    $(".btn-success").click(function(){
    	var dayFlag = $(this).val();
    	initEcharts(dayFlag);
    })
    initEcharts(7);
    function initEcharts(time){
    	 $.get('<%=request.getContextPath() %>/goods/queryCharts?time='+time).done(function (result) {
    	        myChart.setOption({
    	            title: {
    	                text: '商品销售列表',
    	                textStyle:{
    	                	color:"pink",
    	                	fontStyle:"oblique"
    	                }
    	            },
    	            tooltip:{
    	            	trigger: 'axis',
    	                axisPointer: {
    	                    type: 'cross'
    	                }
    	            },
    	            legend: {
    	                data:['销量']
    	            },
    	            xAxis: {
    	                data: result.dateList,
    	                nameLocation:"center",
    	                nameTextStyle:{
    	                	color:"red"
    	                }
    	            },
    	            yAxis: {},
    	            series: [{
    	                name: '销量',
    	                type: 'line',
    	                data: result.numList
    	            }]
    	        });
    	    });
    }
    </script>

后台代码
Controller：

@RequestMapping("queryCharts")
@ResponseBody
public Map<String,List> queryCharts(Integer time) {
	Map map = new HashMap();
	List<String> dateList = goodsService.queryDate(time);
	//查询日期集合
	map.put("dateList", dateList);
	//查询日期count数据集合
	map.put("numList", goodsService.queryDateCount(dateList));
	
	return map;
}

service层：

	@Override
	public List<String> queryDate(Integer time) {
		List<String> dateList = new ArrayList();
		Date date = new Date();
		Calendar calendar = Calendar.getInstance();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
		for (int i = 0; i < time; i++) {
			calendar.setTime(date);
			calendar.add(Calendar.DAY_OF_MONTH, -i);
			Date time2 = calendar.getTime();
			dateList.add(sdf.format(time2));
		}
		return dateList;
	}
	/* (non-Javadoc)    
	 * @see com.fh.shop.goods.service.GoodsService#queryDateCount(java.util.List)    
	 */
	@Override
	public List<Integer> queryDateCount(List<String> dateList) {
		List<Integer> dateNum = new ArrayList();
		for (String date : dateList) {
			Integer num = goodsDao.queryGoodsCountByDate(date);
			dateNum.add(num);
		}
		return dateNum;
	}

mapper配置文件

<select id="queryGoodsCountByDate" resultType="int">
	select count(*) from t_goods where DATE_FORMAT(addtime,'%Y-%m-%d') =  #{date}
</select>