yijia-webman/app/view/sales/goods.html

124 lines
4.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

{layout name="layout" /}
<div style="padding: 16px;">
<div class="layui-row">
<div class="layui-col-md3" >
<label class="layui-form-label">开始时间</label>
<div class="layui-input-block">
<input type="text" name="start" class="layui-input" id="start" placeholder="yyyy-MM-dd HH:mm:ss">
</div>
</div>
<div class="layui-col-md3">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-block">
<input type="text" name="end" class="layui-input" id="end" placeholder="yyyy-MM-dd HH:mm:ss">
</div>
</div>
<div class="layui-col-md3">
<div class="layui-input-block">
<select lay-filter="order" id="order" name="order">
<option value="total_sales">total_sales</option>
<option value="total_num">total_num</option>
<option value="total_num_small">total_num_small</option>
</select>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm" id="search">搜索</button>
</div>
</div>
</div>
<div id="sales" style="width: 100%;height:1500px;"></div>
</div>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
var laydate = layui.laydate;
laydate.render({
elem: '#start'
});
laydate.render({
elem: '#end'
});
$('#search').click(function() {
var start = $('#start').val();
var end = $('#end').val();
var order = $('#order').val();
getData(start, end, order);
});
getData();
// 基于准备好的dom初始化echarts实例
var myChart = echarts.init(document.getElementById('sales'));
function getData(start = '', end = '', order = 'total_sales'){
$.get('/sales/apiGetSalesGoods', {start: start, end: end, order: order}).done(function(data) {
// 指定图表的配置项和数据
var option = {
title: {
text: '产品销售统计'
},
tooltip: {},
legend: {
data: ['产品销售额', '大包销量', '小包销量']
},
xAxis: {
// data: data.data.goods_name.map(function(item) {
// return item;
// })
},
yAxis: {
//type: 'value'
data: data.data.goods_name.map(function(item) {
return item;
})
},
series: [
{
name: '产品销售额',
type: 'bar',
data: data.data.total_sales.map(function(item) {
return item;
}),
label: {
normal: {
show: true,
position: 'top'
}
}
},{
name: '大包销量',
type: 'bar',
data: data.data.total_num.map(function(item) {
return item;
}),
label: {
normal: {
show: true,
position: 'top'
}
}
},{
name: '小包销量',
type: 'bar',
data: data.data.total_num_small.map(function(item) {
return item;
}),
label: {
normal: {
show: true,
position: 'top'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
}
</script>