利用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進行可視化。