如何將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，和并編寫視圖層代碼

? ? ? ? ?<script src="echarts.min.js"></script>
?<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????????? //數據視圖
?????????????????? }, ?????????????????? 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進行可視化。 ?

?

轉載于:https://www.cnblogs.com/devise/p/9974696.html

總結

以上是生活随笔為你收集整理的利用Ajax实现数据的同步传输，从mysql中提取数据，通过echarts可视化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。