那么我们该当创建对应的数据表
创建对应的类及其属性,放到entity包下
准备连接数据库的工具类
编写连接数据库的代码
创建降雨量的DAO编写一个插入方法
编写对应的代码
数据已经存放到列表当中了，接下来要将数据放到数据库中
运行一下 不雅观察数据是否已经存放到数据库中
查看数据
查看数据库
在DAO中查询所有数据，编写一个查询数据的方法
编写对应的代码
做一个测试类，测试代码是否成功
查看运行结果
编写对应的service类及方法
编写对应的代码
创建对应的Servlet，获取页面数据
配置web.xml
编写Servlet中的代码，先不填写jsp，准备jsp页面
编写jsp页面内容
在reqJylDataServlet中，将新建的jsp名字填写
我们引入js文件
填写div中id=main的部分
初始化Echarts图表、指定图表的配置项和数据同时将实例化的Echarts图表设置图表配置项，同时在DOM中渲染图表显示
以下是这个部分的代码
<script>
//Step 3:初始化Echarts图表
var myChart = echarts.init(document.getElementById('main'));
//Step4: 指定图表的配置项和数据
var option ={
title: {
left:\"大众center\公众,
backgroundColor:\"大众#000000\"大众,
textStyle:{
color:\"大众#ffffff\"大众,
fontWeight:\"大众bold\"大众
},
subtext:\"大众纯属虚构\"大众,
borderWidth:5,
borderColor:\"大众red\公众
},
tooltip: {
trigger: \公众axis\"大众,
show: true,
backgroundColor: \"大众rgb(255, 0, 0)\"大众,
textStyle: {
color: \"大众rgb(0, 0, 0)\"大众,
fontSize: 15,
fontStyle: \公众oblique\"大众,
fontWeight: \"大众bold\公众
}
},
legend: {
left:\"大众left\"大众,
data: [\"大众蒸发量\公众, \"大众降水量\"大众,\公众大数据\公众],
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: [\"大众line\"大众, \公众bar\公众]
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [
{
type: \"大众category\"大众,
data: [\"大众1\"大众, \"大众2\公众, \"大众3\"大众, \公众4\公众, \"大众5\公众, \"大众6\"大众, \"大众7\"大众, \"大众8\"大众, \"大众9\"大众, \"大众10\"大众, \公众11\"大众, \公众12\"大众],
axisLabel : {
formatter: '{value}月'
},
}
],
yAxis: [
{
type: \公众value\公众,
axisLabel : {
formatter: '{value} mm'
},
}
],
series: [
{
itemStyle:{
normal:{
color:'#d48265'
}
},
name: \公众蒸发量\公众,
type: \"大众bar\"大众,
data: [2, 4.9, 7, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20, 6.4, 3.3]
},
{
name: \"大众降水量\"大众,
type: \"大众bar\"大众,
data: [2.6, 5.9, 9, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6, 2.3]
},
{
name: \"大众大数据\"大众,
type: \"大众bar\"大众,
data: [2.6, 5.9, 9, 26.4, 98.7, 70.17, 175.6, 182.2, 48.7, 18.8, 6, 2.3]
}
]
};
//将实例化的Echarts图表设置图表配置项，同时在DOM中渲染图表显示
myChart.setOption(option);
</script>
然后我们启动tomcat
访问我们的项目
个中的月份数据须要来自数据库，那么我们现在获取该数据
我们目的是变动这一行数据
如何得到这一行数据呢？我们先做一个测试方法
个中为了获取月份的排序，须要改变DAO中的查询字符
编写测试方法
那么我们可以在Servlet中获取数据了，首先在service中获取该数据
接下来在servlet中调用该数据
在jsp中调用该数值
然后在javascript中获取该值
将获取的数值变动放到显示的位置
查看图表显示
