一、Jsp构成
| 标签 | 内容 | 位置 |
|---|---|---|
| meta | 针对搜索引擎和更新频度的描述和关键 | 必须放在最前面 |
| script | 引用网上或系统中的样式js文件 | 必须写在head后body前 |
| script | 自定义函数 | 可以写在.java文件，还可以写在body里 |
| style | 按id名称自定义布局格式 | 也可以单独写在css文件中，还可以写在body里 |
| div | HTML内容 | body里 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- meta标签*必须*放在最前面：针对搜索引擎和更新频度的描述和关键 -->
<title>Insert title here</title>
</head>
<!-- Resources：1、script引用网上或系统中的样式js文件，必须写在head后body前 -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<!--2、script自定义函数，还可以写在body里 -->
<script type="text/javascript">
$(function () {
$('#btn1').hide();
})
<!-- 3、style：按id名称自定义布局格式，也可以单独写在css文件中，还可以写在body里 -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<body>
<!-- HTML：内容 -->
<div id="chartdiv"></div>
</body>
</html>
二、了解什么是表格库
常用的2个表格库：表格库有样式文件option，
1、百度echarts库
2、amcharts库
三、创建表格样式
如何使用？
对，点这里照着做一遍：echarts库官方使用教程，你就理解如何三步在jsp上绘出基本表格
- 引入echarts库
<script>，要下载js文件到你的项目中
- 放置一个容器
<div>, - 在自定义布局中添加你的表格样式了：
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
...
}
</script>
从表格库中找到你心仪的表格类型：不同样式文件option不一样
1、百度echarts库 | 2、amcharts库
-
echarts举例：
前一篇博客 -
amcharts举例：
四、echarts数据处理
如何引入数据库数据？
前一篇博客
附：echarts显示问题
参考教程：echarts x轴文字显示不全