![6bbe35103d8c79e2556225fbe3a84a52.png](https://i-blog.csdnimg.cn/blog_migrate/ea50bec8cd7d4f94e764402e6779affb.jpeg)
数据已经存放到列表当中了,接下来要将数据放到数据库中
那么我们应该创建对应的数据表
![f453720b44171ebc3978f601c456bed3.png](https://i-blog.csdnimg.cn/blog_migrate/38bd8a8c2c4042420a5805c44f784ad3.jpeg)
创建对应的类及其属性,放到entity包下
![2c2a67304b43295e32962e9d086cf108.png](https://i-blog.csdnimg.cn/blog_migrate/cb47564d88d5a3a03009e942ab9e6ce1.jpeg)
准备连接数据库的工具类
![fa8d5530304b990ea3f50b1bb76c7c3d.png](https://i-blog.csdnimg.cn/blog_migrate/707fe97ac24fec13335e4663ac7d105e.jpeg)
编写连接数据库的代码
![4a4f917ab8c87f5d1c45c4ff9b6c8aa3.png](https://i-blog.csdnimg.cn/blog_migrate/ec10f2dccfc531519e1e9b8b625732d1.jpeg)
创建降雨量的DAO编写一个插入方法
![ce6e5695712e41df382ae75b1c27a56e.png](https://i-blog.csdnimg.cn/blog_migrate/6b679df0f0d8f8c1aaf111de1887cd85.jpeg)
编写对应的代码
![b3230d023b3f12bf772c0a91955cc42e.png](https://i-blog.csdnimg.cn/blog_migrate/58640d34d49a4ec3784d0f0053bb6c6c.jpeg)
数据已经存放到列表当中了,接下来要将数据放到数据库中
![b495575368c450a1073d81202a152f09.png](https://i-blog.csdnimg.cn/blog_migrate/dba0fc582fe5ba056e8c348366c165ef.jpeg)
运行一下 观察数据是否已经存放到数据库中
![d4b64aed6b48b5bb987d36c3eaf604df.png](https://i-blog.csdnimg.cn/blog_migrate/de10d5770d7ae32f99897dd57dc021df.jpeg)
查看数据
![43c47b37b221717363c3c5c21c153df8.png](https://i-blog.csdnimg.cn/blog_migrate/f3422445da8ea96d519f83c29de2312b.jpeg)
查看数据库
![83f1db3f365c0e3cde5d7d7ce92921dd.png](https://i-blog.csdnimg.cn/blog_migrate/e06d8f2257849760ca5bab1a78053e98.jpeg)
在DAO中查询所有数据,编写一个查询数据的方法
![e6ac2ccc10aeed97fec1c2b541072673.png](https://i-blog.csdnimg.cn/blog_migrate/252a6e11f146a83339aea7e21ec66bf5.jpeg)
编写对应的代码
![88a341ba6c2a7fe57764823775d3505f.png](https://i-blog.csdnimg.cn/blog_migrate/70c20921e13a43b7d339ded32e59e0b4.jpeg)
![eb7fa1ef4a85b7b05f9b73ff01bc7d79.png](https://i-blog.csdnimg.cn/blog_migrate/b0b847f0d2517f9a15e3ad43d7e16a43.jpeg)
做一个测试类,测试代码是否成功
![cc410526c5fedcad532c3dfcb65c1ed3.png](https://i-blog.csdnimg.cn/blog_migrate/887c49d326d565021599775600a883f6.jpeg)
查看运行结果
![ce8840ebd68dd770b7e9c45fc443dc1d.png](https://i-blog.csdnimg.cn/blog_migrate/269e6d7e789b81fb75c32d667591f306.jpeg)
编写对应的service类及方法
![ecb979bfee8c4563f64f54e21402a3c9.png](https://i-blog.csdnimg.cn/blog_migrate/7f755cb01bd7d449a393c9ba6bb48543.jpeg)
编写对应的代码
![1243f53a37785148cd2f65f8aa1312c7.png](https://i-blog.csdnimg.cn/blog_migrate/c120a2dbe211656177c346db37c8b22e.jpeg)
创建对应的Servlet,获取页面数据
![cf9fdc092760d5d065e2c33c06780850.png](https://i-blog.csdnimg.cn/blog_migrate/d1bc320f4cf9fe72e226ab47cd812cc6.jpeg)
配置web.xml
![4176943f33699c625be1f4e677dd4c5b.png](https://i-blog.csdnimg.cn/blog_migrate/c191e520450bf6671d893a6cdafa08ef.jpeg)
编写Servlet中的代码,先不填写jsp,准备jsp页面
![6c9e64133ca74216c67dc490a9c03063.png](https://i-blog.csdnimg.cn/blog_migrate/589ab47ed9a6632c287d495f5bf27015.jpeg)
编写jsp页面内容
![c5c1e72fb12bb179bb40f7b427808b4b.png](https://i-blog.csdnimg.cn/blog_migrate/04bbd9ef69db455de2a5fb076bcab2c2.jpeg)
在reqJylDataServlet中,将新建的jsp名字填写
![95b12ed98828f08afba124f2fa22a9f4.png](https://i-blog.csdnimg.cn/blog_migrate/5550a42e18cbd4105e7a1b43bcc8b938.jpeg)
我们引入js文件
![40877597b574c569a513c6556f150633.png](https://i-blog.csdnimg.cn/blog_migrate/f8f661d01a43d59419f182daa4a6b148.jpeg)
填写div中id=main的部分
![7f755e7e2ff4d7e4143243723a0134e3.png](https://i-blog.csdnimg.cn/blog_migrate/2e2b991ed8d7296c71aeee1cbe42e3dd.jpeg)
初始化Echarts图表、指定图表的配置项和数据同时将实例化的Echarts图表设置图表配置项,同时在DOM中渲染图表显示
![ec98769fb2a5ec07421f489aa978009d.png](https://i-blog.csdnimg.cn/blog_migrate/309c4e436916c48177761e8b9f6ef749.jpeg)
以下是这个部分的代码
</p><p> //Step 3:初始化Echarts图表</p><p> var myChart = echarts.init(document.getElementById('main'));</p><p> </p><p> //Step4: 指定图表的配置项和数据</p><p> var option ={</p><p> title: {</p><p> text: "某地区蒸发量和降水量",</p><p> left:"center",</p><p> backgroundColor:"#000000",</p><p> textStyle:{</p><p> color:"#ffffff",</p><p> fontWeight:"bold"</p><p> },</p><p> subtext:"纯属虚构",</p><p> borderWidth:5,</p><p> borderColor:"red"</p><p> </p><p>​</p><p> </p><p> },</p><p> tooltip: {</p><p> trigger: "axis",</p><p> show: true,</p><p> backgroundColor: "rgb(255, 0, 0)",</p><p> textStyle: {</p><p> color: "rgb(0, 0, 0)",</p><p> fontSize: 15,</p><p> fontStyle: "oblique",</p><p> fontWeight: "bold"</p><p> }</p><p> },</p><p> legend: {</p><p> left:"left",</p><p> data: ["蒸发量", "降水量","大数据"],</p><p> },</p><p> toolbox: {</p><p> show: true,</p><p> feature: {</p><p> mark: {</p><p> show: true</p><p> },</p><p> dataView: {</p><p> show: true,</p><p> readOnly: false</p><p> },</p><p> magicType: {</p><p> show: true,</p><p> type: ["line", "bar"]</p><p> },</p><p> restore: {</p><p> show: true</p><p> },</p><p> saveAsImage: {</p><p> show: true</p><p> }</p><p> }</p><p> },</p><p> calculable: true,</p><p> xAxis: [</p><p> {</p><p> type: "category",</p><p> data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],</p><p> axisLabel : {</p><p> formatter: '{value}月'</p><p> },</p><p> }</p><p> ],</p><p> yAxis: [</p><p> {</p><p> type: "value",</p><p> axisLabel : {</p><p> formatter: '{value} mm'</p><p> },</p><p> }</p><p> ],</p><p> series: [</p><p> {</p><p>itemStyle:{</p><p>normal:{</p><p>color:'#d48265'</p>
}
},
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);
然后我们启动tomcat
![c33f4ece4fcc6bf04a2f7cda81723691.png](https://i-blog.csdnimg.cn/blog_migrate/9949c2ef71bd5c062658742a3575effc.jpeg)
访问我们的项目
![f89541a22352271605734bb1a5934545.png](https://i-blog.csdnimg.cn/blog_migrate/53a3292ae2413aa984354914ecd07260.jpeg)
其中的月份数据需要来自数据库,那么我们现在获取该数据
我们目的是更改这一行数据
![6779cab4cf387d4497fdb1edb7c3d175.png](https://i-blog.csdnimg.cn/blog_migrate/695826baeeeb944c6d6389237a7735a9.jpeg)
如何得到这一行数据呢?我们先做一个测试方法
![def16e13b8bb9585f4f92f7277772122.png](https://i-blog.csdnimg.cn/blog_migrate/dee7284df2e3636e877a66dbea33da6c.jpeg)
其中为了获取月份的排序,需要改变DAO中的查询字符
![206e5a7026dbd6cbf98361f299d5ae0d.png](https://i-blog.csdnimg.cn/blog_migrate/e69a031ac4bc449e12bca9aaac5dff24.jpeg)
编写测试方法
![fbf9f89d1f4b90ad037289b8f29223fd.png](https://i-blog.csdnimg.cn/blog_migrate/be9a8397aef2ec043f15cfa381ea12e5.jpeg)
那么我们可以在Servlet中获取数据了,首先在service中获取该数据
![622b6d40bbd8b4babd77513e215b028e.png](https://i-blog.csdnimg.cn/blog_migrate/aaf37bed2110ef8a846ba90b3e106e99.jpeg)
接下来在servlet中调用该数据
![a3f3a044e52f6f815171ce29ffaf9ef5.png](https://i-blog.csdnimg.cn/blog_migrate/c08dbd19df0be45646809a3e6f40cb7e.jpeg)
在jsp中调用该数值
![b15634dcc74e974cac599a685f6431e5.png](https://i-blog.csdnimg.cn/blog_migrate/d13165056075c84dbc19839e61f3a3d5.jpeg)
然后在javascript中获取该值
![8ec9e5fd1a1e61127fcbe866899aacdd.png](https://i-blog.csdnimg.cn/blog_migrate/28d6d8f3aeff54e5162ee9e6970d1508.jpeg)
将获取的数值更改放到显示的位置
![36ff7048d55ac240f3f5e7e84d70db60.png](https://i-blog.csdnimg.cn/blog_migrate/2fab7222415e558fa64de74809cd7880.jpeg)
查看图表显示
![516409ec4688fe7aa42fe209897c2c43.png](https://i-blog.csdnimg.cn/blog_migrate/5cf7f9f778b844762b74b0dbea6643c4.jpeg)