利用Ajax实现数据的同步传输,从mysql中提取数据,通过echarts可视化
步骤一:mysql的创表和插入数据,当然这些数据也可以是你通过爬虫抓取的。
步骤二:
步骤三:通过java连接数据库
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import entity.Bar;
public class BarDao {
private static final String URL="jdbc:mysql://localhost:3306/bar?useUnicode=true&characterEncoding=UTF-8";
private static final String USER="root";
private static final String PASSWORD="123456";
private static Connection conn=null;
public ArrayList<Bar> query(){ //这里的query()方法是将从数据库中读取到的数据存储到集合中
ResultSet rs = null;
Statement st = null;
ArrayList<Bar> barArr=new ArrayList<Bar>();
try{
Class.forName("com.mysql.jdbc.Driver"); //加载数据库驱动
conn =DriverManager.getConnection(URL, USER, PASSWORD); //获取数据库连接对象
st = conn.createStatement();
rs = st.executeQuery("select * from testbar");
while(rs.next()){
Bar bar=new Bar();
bar.setName(rs.getString("name"));
bar.setNum(rs.getInt("num"));
barArr.add(bar); //将从数据库中读取到的数据 以bar对象的方式存储到 集合中
}
conn.close(); //断开连接
}catch(SQLException e){
e.printStackTrace();
}catch (ClassNotFoundException e) {
e.printStackTrace();
}
return barArr; //返回该集合
}
public void update(String name,Integer num){ //该方法用于更新数据
try{
Class.forName("com.mysql.jdbc.Driver"); //加载数据库驱动
conn =DriverManager.getConnection(URL, USER, PASSWORD); //获取数据库连接对象
PreparedStatement ptmt=conn.prepareStatement("update testbar set num=? where name=? ");
ptmt.setInt(1, num);
ptmt.setString(2,name);
ptmt.execute();
}catch(SQLException e){
e.printStackTrace();
}catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
}
步骤四:创建servlet。
throws ServletException, IOException {
BarDao barDao=new BarDao();
ArrayList<Bar> barArr=barDao.query(); //调用BarDao的query方法。返回一个从数据库中读取之后的集合
response.setContentType("text/html;charset=utf-8");
JSONArray json=JSONArray.fromObject(barArr); //将ArrayList对象转化为JSON对象,因为Echarts前台只能识别JSONArray,不能识别ArrayList类型
//返回到jsp
PrintWriter writer =response.getWriter();
writer.println(json);
writer.flush();
writer.close(); //关闭输出流
}
throws ServletException, IOException {
String num=request.getParameter("num");
BarDao bDao=new BarDao();
bDao.update(name,Integer.parseInt(num)); //调用更新方法并传入参数。
}
步骤五:配置web.xml
步骤六:导入echarts,和并编写视图层代码
<script src="jquery-1.8.3.min.js"></script>
</head>
<body οnlοad="loadData()">
<!-- 画图 -->
<div id="content" style="margin:40px auto;width:1300px;height:400px">
<div id="myBarDiv" style="height:300px;width:430px;display:inline-block"></div>
<div id="myLineDiv" style="height:300px;width:430px;display:inline-block"></div>
<div id="myTest" style="width:600px;height:60px;margin:20px auto">
<label for="name">商品名称:</label><input type="text" id="myName">
<label for="num">销量:</label><input type="text" id="myNum">
<button id="myButton" type="submit" onClick="sub()">数据更新</button>
</div>
</div>
<script type="text/javascript">
function sub(){
var j={"name":$("#myName").val(),"num":$("#myNum").val()};
$.ajax({
type:'post',
url:'servlet/JsoService',
dataType:'json',
data:{"name":$("#myName").val(),"num":$("#myNum").val()},
contentType:"application/x-www-form-urlencoded",
success:function(message){
alert("success");
}
//该区域用于数据更新
});
window.location.reload();
}
</script>
<script type="text/javascript">
function loadData(option){
$.ajax({
type:"post", //跳转方式为post
async:false, //同步传输
url:'servlet/BarService', //跳转的界面,这里必须和web.xml中的url-pattern相同。跳转到该servlet之后,获取到JSONArray类型的数据,可以被Echarts识别。
data:{},
dataType:'json',
success:function(result){
if(result){
option.xAxis[0].data=[];
for(var i=0;i<result.length;i++){
option.xAxis[0].data.push(result[i].name); //设置横坐标的数据
}
//初始化series[0]的data
option.series[0].data=[];
for(var i=0;i<result.length;i++){
option.series[0].data.push(result[i].num); //设置纵坐标的数据
}
}
},
error:function(errorMsg){
alert("数据加载失败");
}
});
}
//初始化Echarts
var myChart=echarts.init(document.getElementById('myBarDiv'));
var option={
title:{
text:'柱状图'
},
tooltip:{
show:true
},
legend:{
data:['销量']
},
xAxis:[{
type:'category'
}],
yAxis:[{
type:'value'
}],
series:[{
name:'销量',
type:'bar'
}]
loadData(option); //加载数据到option
myChart.setOption(option); //设置option(画图)
</script>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('myLineDiv'));
var option={
title:{
text:'折线图'
},
tooltip:{
show:true,
trigger:'item'
},
legend:{
data:['销量']
},
toolbox:{ //工具栏组件
show:true,
feature:{ //需要的功能
saveAsImage:{
show:true
}, //保存为图片
dataView:{
show:true //数据视图
},
show:true //区域缩放与区域缩放还原
},
magicType:{
type:['line','bar'] //动态类型转换
}
},
xAxis:[{
type:'category'
}],
yAxis:[{
type:'value'
}],
series:[{
name:'销量',
type:'line'
}]
loadData(option); //加载数据到option
myChart.setOption(option); //设置option
</script>
步骤七:运行效果展示
转载于:https://www.cnblogs.com/devise/p/9974696.html
利用Ajax实现数据的同步传输,从mysql中提取数据,通过echarts可视化相关推荐
- python如何从文本中提取数据_如何从文本文件中提取数据?
所以我有一组文件,我需要从中提取数据并写入一个新的txt文件,我不知道如何使用Python来实现这一点.下面是一个样本数据.我试图从NSF的组织,文件和摘要中提取部分.在 标题:CRB:神秘鲸濒危种群 ...
- php mysql写入数据不成功,向MYSQL中安插数据不成功
SQL codeinsert into product ( p_name,p_class,p_model,re_mark,pic ) values ( '大幅度反对', '大幅度反对', 'ddfdf ...
- mysql中的dump,从mysql中dump数据到本地
方法一:使用mysqldump命令,如: mysqldump -h10.90.6.237 -uf_insplat2car_r -P3306 -pxxxxxxxxx nbmp tb_tag_log -- ...
- android json mysql_Android通过json向MySQL中读写数据的方法详解【写入篇】
本文实例讲述了Android通过json向MySQL中写入数据的方法.,具体如下: 先说一下如何通过json将Android程序中的数据上传到MySQL中: 首先定义一个类JSONParser.Jav ...
- python向数据库写入数据_如何用Python向Mysql中插入数据
我们使用Python经常会和Postgresql进行搭配,很少将python和mysql进行搭配.下面小编给大家分享如何用Python向Mysql中插入数据. 工具/原料 Pycharm 方法/步骤 ...
- MySQL中的数据查询
文章目录 1 简单查询 1.1 查询所有字段数据 1.2 查询指定字段数据 1.3 DISTINCT查询 1.4 IN查询 1.5 BETWEEN AND查询 1.6 LIKE模糊查询 1.7 对查询 ...
- android json mysql_Android通过json向MySQL中读写数据的方法详解【读取篇】
本文实例讲述了Android通过json向MySQL中读取数据的方法.分享给大家供大家参考,具体如下: 首先 要定义几个解析json的方法parseJsonMulti,代码如下: private vo ...
- PHP如何批量更新MYSQL中的数据
最近项目需要用到批量更新数据库里的数据,在网上找了一下这方面的例子,觉得这个还不错,分享给大家. 在这个业务里里面涉及到了更新两张数据表,那么大家是不是会想到非常简单,马上上代码 $sql = &qu ...
- 使用logstash将Mysql中的数据导入到ElasticSearch中(详细步骤,win_Elasticsearch)
在之前转载的一腾讯高级工程师<一文彻底了解Logstash>对logstach有这详细的介绍,这里我只说明一下,将mysql中的数据使用logstash导入到es中,如何操作,具体步骤见下 ...
最新文章
- linux 单个网卡配置多个IP
- .net Csharpt C# UDP 异步发送信息 代码实例
- linux mysql8配置文件_Linux下 MySQL8安装教程
- 《天天数学》连载19:一月十九日
- java三角形创建子类,A派生出子类B,B派生出子类C,并且在Java源代码中有如下声明: 1.A a0=new 2.A a1 =new 3.A a2=new 问以下哪个说法是正确的?()...
- LINUX 添加xp虚拟机
- 高中电子技术——电子元器件的识别
- 软件测试的测试代码,软件测试(示例代码)
- meshlab模型简化
- R语言 霍尔特指数平滑法(Holt)
- 英语大师们讲解英语学习方法
- EasyExcel实现Excel文件导入导出功能
- dismiss和remove_dismiss是什么意思_dismiss在线翻译_英语_读音_用法_例句_海词词典
- 风险投资VC对ESG指标的影响
- docker制作镜像的两种方法
- 15、RDA8910(4GCAT1)CSDK二次开发:通过OneWire驱动库获取DS18B20/DHT11的数据
- QGIS:创建矢量图层
- Android项目开发教程之OpenGL ES
- linux 交换机tftp服务,简单文件传输TFTP服务器搭建 Linux RHEL6
- 使用 nodeJs 实现 js/ts 文件翻译功能