后端正常返回查询所有的信息
前端使用echarts.min.js和jquery.min.js进行使用
ajax使用：
$(document).ready(function() {
$.ajax({
url: 'http://localhost:7070/selectHang', //你的url
method: 'GET', //方法名
dataType: 'json',
success: function(responseData) {
renderBarChart(responseData);
},
error: function(error) {
console.error('Error fetching data:', error);
}
});
});
显示的页面全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>带背景的柱状图</title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="barChart" style="width: 800px; height: 400px;"></div>
<script>
$(document).ready(function() {
$.ajax({
url: 'http://localhost:7070/selectHang',
method: 'GET',
dataType: 'json',
success: function(responseData) {
renderBarChart(responseData);
},
error: function(error) {
console.error('Error fetching data:', error);
}
});
});
function renderBarChart(data) {
var uniqueDates = [...new Set(data.map(item => item.day_id))];
var seriesData = [];
uniqueDates.forEach(date => {
var series = {
name: date,
type: 'bar',
data: []
};
data.forEach(item => {
if (item.day_id === date) {
series.data.push(item.round);
} else {
series.data.push(null);
}
});
seriesData.push(series);
});
var option = {
title: {
text: '带背景的柱状图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: uniqueDates
},
xAxis: {
type: 'category',
data: uniqueDates
},
yAxis: {
type: 'value'
},
series: seriesData
};
var myChart = echarts.init(document.getElementById('barChart'));
myChart.setOption(option);
}
</script>
</body>
</html>
标签：function,springboot,series,前端,item,error,var,data,echarts From： https://www.cnblogs.com/JJTyyds/p/17724187.html