利用Ajax實現數據的同步傳輸，從mysql中提取數據，通過echarts可視化

本文轉載自查看原文 2017-11-21 13:50 2805 echarts

如何將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進行可視化。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Web jsp開發自學——ajax+servlet+echarts+json+gson 實現ajax傳輸servlert和echarts的數據，可視化結果使用echarts+ajax實現數據可視化統計基於vue和echarts的數據可視化實現 Python利用Plotly實現對MySQL中的數據可視化 flask+sqlite3+echarts2+ajax數據可視化 Flask+Echarts實現數據可視化(一) 使用Echarts實現前台可視化數據展示 django+xadmin+echarts實現數據可視化 java+echarts+mysql數據可視化實戰1 django+Echarts實現數據可視化