利用Ajax实现数据的同步传输，从mysql中提取数据，经过echarts可视化

时间 2019-11-19

标签利用 ajax 实现数据同步传输 mysql 提取经过 echarts 可视化栏目 Ajax 繁體版

原文原文链接

如何将mysql数据库中的方式经过echarts可视化呢，如下面这个简单的例子向你们进行演示：

步骤一：mysql的创表和插入数据，固然这些数据也能够是你经过爬虫抓取的。

步骤二：

建立实体类，

步骤三：经过java链接数据库

将链接数据库所需的jar包，导入WEB-INF下的lib目录下：

package db;

import java.sql.Connection;
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。

这里的BarService经过调用上面的query方法，获取从数据库中读取的Bar实例的集合，须要说明的是因为Echarts前台不能识别ArrayList对象，因此须要转换为JSONArray类型，转换的时候必须导入jar包，否则会报错，具体要使用到的jar包以下：

BarService.java代码：

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

  request.setCharacterEncoding("utf-8");
  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(); //关闭输出流
}

JsoService.java则是用于数据更新，咱们会在下面JSP界面中建立文本框，经过post方式连接到该servlet页面进行业务逻辑，调用更新方法，能够将mysql中的数据进行更新：

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

   String name=request.getParameter("name");
   String num=request.getParameter("num");
   BarDao bDao=new BarDao();
   bDao.update(name,Integer.parseInt(num)); //调用更新方法并传入参数。

}

步骤五：配置web.xml

这里的utl-pattern的地址会在jsp页面中的ajax的url进行使用。

步骤六：导入echarts，和并编写视图层代码

};
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          //数据视图
                   },

                   dataZoom:{
                       show:true            //区域缩放与区域缩放还原
                   },
                   magicType:{
                       type:['line','bar']       //动态类型转换
                   }

               }
           },
  xAxis:[{

   type:'category'
  }],
  yAxis:[{
   type:'value'
  }],
  series:[{
   name:'销量',
   type:'line'

  }]

};
loadData(option); //加载数据到option
myChart.setOption(option); //设置option
</script>

步骤七：运行效果展现

这是初始化界面，固然这里只作了两个图，Echarts中还有不少模型，感兴趣的能够学习。

输入商品名称和销量点击数据更新后：

能够发现数据已经获得了更新，查看数据库中是否获得了更新：

能够看到，后台的数据也经过咱们前台界面的修改获得了更新。至此整个过程就所有结束了。

总结：如何利用数据库中的数据将其可视化。主要步骤为：首先经过编程语言连接到数据库，这里能够选择JAVA.PHP等而后获取到数据库中的数据。在servlet中调用调用方法，获取到数据，而后将其转换为Echarts能够识别的JSONArray类型的数据，固然这里是须要导入jar包的。而后在视图层，经过Ajax的同步传输的方式，指定跳转的方式为post,以及url为跳转的servlet，经过执行该servlet的方法来获取到数据，或者其余操做。最后返回数据；而后就能够导入Echarts进行初始化，经过调用方法获取到ajax中的数据，最后调用该option进行可视化。