|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%> // 页面编码为UTF-8，确保中文等字符显示正确
|
|
|
|
|
|
<!DOCTYPE html> // 定义文档类型为HTML5
|
|
|
<html> // 开始HTML文档
|
|
|
<head>
|
|
|
<meta charset="utf-8"> // 定义文档的字符编码为UTF-8
|
|
|
<title>ECharts</title> // 页面标题，显示在浏览器标签上
|
|
|
<!-- 引入 echarts.js -->
|
|
|
<script src="../public/js/echarts.min.js"></script> // 引入本地的echarts.js文件，用于图表渲染
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> // 引入远程的jQuery库，提供AJAX等功能
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
|
|
<div id="main" style="width:1200px;height:500px;"></div> // 为ECharts图表提供一个容器，并设置其宽高
|
|
|
<script type="text/javascript">
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('main')); // 使用ID为'main'的DOM元素初始化ECharts实例
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
myChart.setOption({
|
|
|
title: {
|
|
|
text: '借书情况' // 设置图表标题为“借书情况”
|
|
|
},
|
|
|
tooltip: {}, // 配置工具提示，默认启用
|
|
|
legend: {
|
|
|
data:['借书量'] // 设置图例，显示“借书量”
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: [] // 设置x轴的数据，初始为空
|
|
|
},
|
|
|
yAxis: {}, // 配置y轴
|
|
|
series: [{
|
|
|
name: '借书量', // 设置系列的名称为“借书量”
|
|
|
type: 'line', // 设置图表类型为折线图
|
|
|
data: [] // 设置折线图的数据，初始为空
|
|
|
}]
|
|
|
});
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
//myChart.setOption(option); // 注释掉的原始代码，用于设置配置项
|
|
|
|
|
|
// 异步加载数据
|
|
|
$.get('./libraryData').done(function (data) { // 使用jQuery的get方法从'./libraryData'接口异步请求数据
|
|
|
if(data.code == 0){ // 判断返回的数据是否成功（code == 0）
|
|
|
// 填入数据
|
|
|
myChart.setOption({
|
|
|
xAxis: {
|
|
|
data: data.data.days // 设置x轴的数据为接口返回的days数组
|
|
|
},
|
|
|
series: [{
|
|
|
// 根据名字对应到相应的系列
|
|
|
name: '借书量', // 设置系列的名称为“借书量”
|
|
|
data: data.data.data, // 设置折线图的数据为接口返回的data数组
|
|
|
type: 'line' // 设置图表类型为折线图
|
|
|
}]
|
|
|
});
|
|
|
}else{
|
|
|
$('body').append($("<div style='color:red;'>调用接口失败</div>")); // 如果接口调用失败，显示错误信息
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
