java
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 ECharts 和 axios -->
<script src="echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- 图表容器 -->
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
// 初始化 ECharts 实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// ========== 数据存储 ==========
var allXAxisData = []; // 存储所有X轴数据
var allSeriesData = []; // 存储所有折线图数据
var currentPage = 1; // 当前页码
var pageSize = 7; // 每页数据条数
var isLoading = false; // 是否正在加载数据
var hasMore = true; // 是否还有更多数据
// ========== 接口地址 ==========
const API_URL = 'http://localhost:8081/home/getTableData';
// ========== 加载数据函数 ==========
function loadData(page) {
// 如果正在加载或没有更多数据，则不执行
if (isLoading || !hasMore) return;
isLoading = true;
// 发送请求获取数据
axios.get(API_URL, {
params: { page: page, size: pageSize, date: '2023-01-01 00:00:00' }
}).then(res => {
const data = res.data.data;
console.log('第' + page + '页数据:', data);
// 将新数据累加到现有数据中
allXAxisData = allXAxisData.concat(data.xAxisData);
allSeriesData = allSeriesData.concat(data.seriesData);
// 更新图表数据
myChart.setOption({
xAxis: [
{ data: allXAxisData },
{ data: allXAxisData },
{ data: allXAxisData }
],
series: [
{ data: allSeriesData },
{ data: allSeriesData },
{ data: allSeriesData },
{ data: allSeriesData },
{ data: allSeriesData },
{ data: allSeriesData }
]
});
// 判断是否还有更多数据（根据返回的总数判断）
if (data.total <= allXAxisData.length) {
console.log('没有更多数据了');
console.log('总数据量:', data.total);
console.log('当前数据量:', allXAxisData.length);
hasMore = false;
}
console.log('pageSize');
// 页码加1，准备加载下一页
currentPage++;
isLoading = false;
}).catch(err => {
console.error('请求失败:', err);
isLoading = false;
});
}
// ========== 监听滚动事件（分页加载） ==========
myChart.on('datazoom', function (params) {
// 如果没有更多数据或正在加载，则不执行
if (!hasMore || isLoading) return;
// 获取当前视图的显示范围（百分比）
var option = myChart.getOption();
var dataZoom = option.dataZoom[0];
var end = dataZoom.end;
// 计算当前视图最后一条数据的索引
var totalData = allXAxisData.length;
var lastIndex = Math.floor(totalData * end / 100);
// 当滚动到倒数第3个数据点时，触发加载下一页
if (lastIndex >= totalData - 3) {
console.log('触发加载下一页');
loadData(currentPage);
}
});
// ========== 图表配置 ==========
var option = {
// 鼠标悬浮提示框配置
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
axis: 'x' // 只显示X轴的竖线
}
},
// 多个图表之间的竖线联动配置
axisPointer: {
link: { xAxisIndex: 'all' }
},
// 图表布局（三个折线图上下排列）
grid: [
// 第一个折线图（顶部）
{
left: "14.5%",
right: "12%",
top: "5%",
height: "28%",
},
// 第二个折线图（中部）
{
left: "14.5%",
right: "12%",
top: "38%",
height: "28%",
},
// 第三个折线图（底部）
{
left: "14.5%",
right: "12%",
top: "71%",
height: "28%",
},
],
// 缩放配置（鼠标滚轮缩放）
dataZoom: [{
start: 0, // 初始显示起始位置（0%）
end: 100, // 初始显示结束位置（100%）
type: 'inside', // 内置缩放（鼠标滚轮）
xAxisIndex: [0, 1, 2], // 同时控制三个x轴
maxSpan: 100 // 最大缩放范围
}],
// X轴配置（三个x轴分别对应三个图表）
xAxis: [
// 第一个图表的X轴（隐藏标签）
{ gridIndex: 0, type: "category", axisLabel: { show: false }, data: [] },
// 第二个图表的X轴（隐藏标签）
{ gridIndex: 1, type: "category", axisLabel: { show: false }, data: [] },
// 第三个图表的X轴（显示标签）
{ gridIndex: 2, type: "category", data: [] },
],
// Y轴配置（三个Y轴分别对应三个图表，都在左侧显示）
yAxis: [
// 第一个图表的Y轴
{
gridIndex: 0,
splitLine: { show: true, lineStyle: { type: 'solid' } }, // 横向网格线
axisLine: { show: true, lineStyle: { color: '#333' } }, // Y轴线
axisTick: { show: true } // 刻度线
},
// 第二个图表的Y轴
{
gridIndex: 1,
splitLine: { show: true, lineStyle: { type: 'solid' } },
axisLine: { show: true, lineStyle: { color: '#333' } },
axisTick: { show: true }
},
// 第三个图表的Y轴
{
gridIndex: 2,
splitLine: { show: true, lineStyle: { type: 'solid' } },
axisLine: { show: true, lineStyle: { color: '#333' } },
axisTick: { show: true }
},
],
// 折线图配置（6条折线，分成3组）
series: [
// 第一个图表的两条折线
{
name: "小件货物",
type: "line",
xAxisIndex: 0,
yAxisIndex: 0,
data: []
},
{
name: "网点负荷",
type: "line",
xAxisIndex: 0,
yAxisIndex: 0,
data: []
},
// 第二个图表的两条折线
{
name: "大件货物",
type: "line",
xAxisIndex: 1,
yAxisIndex: 1,
data: []
},
{
name: "网点负荷2",
type: "line",
xAxisIndex: 1,
yAxisIndex: 1,
data: []
},
// 第三个图表的两条折线
{
name: "新增折线1",
type: "line",
xAxisIndex: 2,
yAxisIndex: 2,
data: []
},
{
name: "新增折线2",
type: "line",
xAxisIndex: 2,
yAxisIndex: 2,
data: []
}
]
};
// 应用配置并初始化图表
myChart.setOption(option);
// 初始加载第一页数据
loadData(currentPage);
</script>
</body>
</html>