使用servlet删除jsp中的一行数据_利用Servlet和Echart完成柱状图显示

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

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

创建对应的类及其属性,放到entity包下

准备连接数据库的工具类

编写连接数据库的代码

创建降雨量的DAO编写一个插入方法

编写对应的代码

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

运行一下 观察数据是否已经存放到数据库中

查看数据

查看数据库

在DAO中查询所有数据，编写一个查询数据的方法

编写对应的代码

做一个测试类，测试代码是否成功

查看运行结果

编写对应的service类及方法

编写对应的代码

创建对应的Servlet，获取页面数据

配置web.xml

编写Servlet中的代码，先不填写jsp，准备jsp页面

编写jsp页面内容

在reqJylDataServlet中，将新建的jsp名字填写

我们引入js文件

填写div中id=main的部分

初始化Echarts图表、指定图表的配置项和数据同时将实例化的Echarts图表设置图表配置项，同时在DOM中渲染图表显示

以下是这个部分的代码

</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>&#8203</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

访问我们的项目

其中的月份数据需要来自数据库，那么我们现在获取该数据

我们目的是更改这一行数据

如何得到这一行数据呢？我们先做一个测试方法

其中为了获取月份的排序，需要改变DAO中的查询字符

编写测试方法

那么我们可以在Servlet中获取数据了，首先在service中获取该数据

接下来在servlet中调用该数据

在jsp中调用该数值

然后在javascript中获取该值

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

查看图表显示