蒸发量和降水量环境搭建-柱状图显示数据

蒸发量和降水量环境搭建-柱状图显示数据数据已经存放到列表当中了,接下来要将数据放到数据库中那么我们应该创建对应的数据表创建对应的类及其属性。

大家好,欢迎来到IT知识分享网。

数据已经存放到列表当中了,接下来要将数据放到数据库中

那么我们应该创建对应的数据表

蒸发量和降水量环境搭建-柱状图显示数据

创建对应的类及其属性,放到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: {

text: “某地区蒸发量和降水量”,

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中获取该值

蒸发量和降水量环境搭建-柱状图显示数据

将获取的数值更改放到显示的位置

蒸发量和降水量环境搭建-柱状图显示数据

查看图表显示

蒸发量和降水量环境搭建-柱状图显示数据

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/51465.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信