老是获取不到数据，绘制图表格失败
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('分析功能列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 search-collapse">
<form id="formId">
<div class="select-list">
<ul>
<li class="select-time">
<label>日期：</label>
<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="begintime"/>
<span>-</span>
<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endtime"/>
</li>
<li>
<label>客户：</label>
<input type="text" name="cus"/>
</li>
<li>
<label>名称：</label>
<input type="text" name="gname"/>
</li>
<li>
<label>规格：</label>
<input type="text" name="gspecs"/>
</li>
<li>
<label>项数：</label>
<input type="text" name="items" value="20" />
</li>
<li>
<!-- <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>-->
<a class="btn btn-primary btn-rounded btn-sm" onclick="onClick01()"><i class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<!-- <div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="lct:temchart:add">
<i class="fa fa-plus"></i> 添加
</a>
<a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="lct:temchart:edit">
<i class="fa fa-edit"></i> 修改
</a>
<a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="lct:temchart:remove">
<i class="fa fa-remove"></i> 删除
</a>
<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="lct:temchart:export">
<i class="fa fa-download"></i> 导出
</a>
</div>-->
<div class="row">
<DIV>
</DIV>
<div class="col-sm-6">
<div class="ibox float-e-margins">
<br>
<div class="ibox-title">
<h5>客户订单分析(按照数量)</h5>
<div class="ibox-tools">
<a class="close-link"> <i class="fa fa-times"></i> </a>
</div>
</div>
<div class="ibox-content">
<div class="echarts" id="echarts-bar-chart"></div>
</div>
</div>
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
</div>
</div>
</div>
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: footer" />
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('lct:temchart:edit')}]];
var removeFlag = [[${@permission.hasPermi('lct:temchart:remove')}]];
var prefix = ctx + "lct/temchart";
//柱状图1数据值(y轴数据)
var chart1x = [];
//柱状图1x轴的值
var chart1y = [];
function onClick01() {
$.table.search(); // 显示数据表
//gaindata(); // 获取柱状图数据
// paint01(); // 绘制柱状图
paint02(); //
}
$(function() {
var options = {
url: prefix + "/list",
createUrl: prefix + "/add",
updateUrl: prefix + "/edit/{id}",
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
modalName: "分析功能",
firstLoad:false, //点击后出结果
pagination:false, //不分页
columns: [{
checkbox: true
},
{
field: 'id',
title: 'ID',
visible: false
},
{
title: "序号",
formatter: function (value, row, index) {
return $.table.serialNumber(index);
}
},
{
field: 'cus',
title: '客户'
},
{
field: 'gname',
title: '名称'
},
{
field: 'gspecs',
title: '规格'
},
/* {
field: 'items',
title: '项数'
},*/
{
field: 'sumnum',
title: '总数'
},
{
field: 'summoney',
title: '总额'
}
,
{
field: 'begintime',
title: '开始时间'
},
{
field: 'endtime',
title: '结束时间'
}
]
};
$.table.init(options);
});
function gaindata() {
console.log("开始获取数据，以下应为空数组");
chart1x = [];
chart1y = [];
console.log(chart1x);
console.log(chart1y);
$.ajax({
url: prefix + "/list",
data:$('#formId').serialize(),// 序列化表单值
dataType: 'json',
type: 'post',
success: function (data) {
//alert(JSON.stringify(data));
console.log(data);//下面就是错误的了
console.log(data.rows);
console.log(data.rows[0]);
for (var i = 0; i < data.rows.length; i++) {
//y轴的值
chart1y.push(data.rows[i].sumnum);
//x轴的值
chart1x.push(data.rows[i].gspecs)
}
console.log("获取数据结束");
console.log(chart1x);
console.log(chart1y);
}
});
}
function paint01(){
console.log("开始绘制"+52525555);
console.log(chart1x);
console.log(chart1y);
var xxx = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
var yyy = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3];
var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
var baroption = {
title : {
text: '' //客户订单分析(按照数量)
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['销量']
},
grid:{
x:30,
x2:40,
y2:24
},
calculable : true,
xAxis : [
{
type : 'category',
// data : chart1x ,
data : xxx ,
axisLabel: { interval: 0, rotate: 60 }
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
type:'bar',
data : yyy ,
// data:chart1y
}
]
};
barChart.setOption(baroption);
window.onresize = barChart.resize;
}
function paint02(){
//定义局部变量，每次调用都是空值开始
var xxxx = []; //x轴
var yyyy = []; //y轴
console.log("下两行应该是空值");
console.log(xxxx);
console.log(yyyy);
//获取数据
$.ajax({
url: prefix + "/list",
data:$('#formId').serialize(),// 序列化表单值
dataType: 'json',
type: 'post',
success: function (data) {
//alert(JSON.stringify(data));
console.log(data);//下面就是错误的了
console.log(data.rows);
console.log(data.rows[0]);
for (var i = 0; i < data.rows.length; i++) {
xxxx.push(data.rows[i].gspecs)
yyyy.push(data.rows[i].sumnum);
}
console.log("获取到的数据");
console.log(xxxx);
console.log(yyyy);
}
});
//开始绘制表格
var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
var baroption = {
title : {
text: '' //客户订单分析(按照数量)
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['销量']
},
grid:{
x:30,
x2:40,
y2:24
},
calculable : true,
xAxis : [
{
type : 'category',
data : xxxx ,
axisLabel: { interval: 0, rotate: 60 }
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
type:'bar',
data : yyyy ,
}
]
};
barChart.setOption(baroption);
window.onresize = barChart.resize;
}
/*
var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
var baroption = {
title : {
text: '某地区蒸发量和降水量'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
grid:{
x:30,
x2:40,
y2:24
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
barChart.setOption(baroption);
window.onresize = barChart.resize;
*/
</script>
</body>
</html>
