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>