如何將mysql數(shù)據(jù)庫中的方式通過echarts可視化呢，以下面這個簡單的例子向大家進(jìn)行演示： ?

步驟一：mysql的創(chuàng)表和插入數(shù)據(jù)，當(dāng)然這些數(shù)據(jù)也可以是你通過爬蟲抓取的。

? ?

步驟二：

? 創(chuàng)建實體類， ? ? ?

步驟三：通過java連接數(shù)據(jù)庫

? 將連接數(shù)據(jù)庫所需的jar包，導(dǎo)入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()方法是將從數(shù)據(jù)庫中讀取到的數(shù)據(jù)存儲到集合中
?? ResultSet rs = null;
???Statement st = null;
?? ArrayList<Bar> barArr=new ArrayList<Bar>();
??try{
???Class.forName("com.mysql.jdbc.Driver"); //加載數(shù)據(jù)庫驅(qū)動
??conn =DriverManager.getConnection(URL, USER, PASSWORD);? //獲取數(shù)據(jù)庫連接對象
??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);???? //將從數(shù)據(jù)庫中讀取到的數(shù)據(jù) 以bar對象的方式存儲到 集合中
???}
???conn.close();? //斷開連接
??}catch(SQLException e){
???e.printStackTrace();
??}catch (ClassNotFoundException e) {
???e.printStackTrace();
??}
??
??return barArr;?? //返回該集合
? }
?
?
?
? public void update(String name,Integer num){????????? //該方法用于更新數(shù)據(jù)
?? try{
???
????Class.forName("com.mysql.jdbc.Driver"); //加載數(shù)據(jù)庫驅(qū)動
????conn =DriverManager.getConnection(URL, USER, PASSWORD);? //獲取數(shù)據(jù)庫連接對象
????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();
??}
???
? }
?
} ?

步驟四：創(chuàng)建servlet。

? 這里的BarService通過調(diào)用上面的query方法，獲取從數(shù)據(jù)庫中讀取的Bar實例的集合，需要說明的是由于Echarts前臺不能識別ArrayList對象，所以需要轉(zhuǎn)換為JSONArray類型，轉(zhuǎn)換的時候必須導(dǎo)入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();? //調(diào)用BarDao的query方法。返回一個從數(shù)據(jù)庫中讀取之后的集合
??response.setContentType("text/html;charset=utf-8");
??JSONArray json=JSONArray.fromObject(barArr);?? //將ArrayList對象轉(zhuǎn)化為JSON對象，因為Echarts前臺只能識別JSONArray，不能識別ArrayList類型
??//返回到j(luò)sp
??PrintWriter writer =response.getWriter();
??writer.println(json);
??writer.flush();
??writer.close(); //關(guān)閉輸出流
?} ? ? JsoService.java則是用于數(shù)據(jù)更新，我們會在下面JSP界面中創(chuàng)建文本框，通過post方式鏈接到該servlet頁面進(jìn)行業(yè)務(wù)邏輯，調(diào)用更新方法，可以將mysql中的數(shù)據(jù)進(jìn)行更新： ? ?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));? //調(diào)用更新方法并傳入?yún)?shù)。
??
?} ?

?步驟五：配置web.xml

????? ? ? 這里的utl-pattern的地址會在jsp頁面中的ajax的url進(jìn)行使用。 ?

步驟六：導(dǎo)入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()">數(shù)據(jù)更新</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");
????}
?????????????????????????????????????????????? //該區(qū)域用于數(shù)據(jù)更新
???
???});
???window.location.reload();
??}
?</script>
?
?<script type="text/javascript">
??function loadData(option){
???$.ajax({
????type:"post",???????????????????????? //跳轉(zhuǎn)方式為post
????async:false,???????????????????????? //同步傳輸
????url:'servlet/BarService',????? //跳轉(zhuǎn)的界面，這里必須和web.xml中的url-pattern相同。跳轉(zhuǎn)到該servlet之后，獲取到JSONArray類型的數(shù)據(jù)，可以被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);? //設(shè)置橫坐標(biāo)的數(shù)據(jù)
??????}
??????
??????//初始化series[0]的data
??????option.series[0].data=[];
??????for(var i=0;i<result.length;i++){
???????option.series[0].data.push(result[i].num);?? //設(shè)置縱坐標(biāo)的數(shù)據(jù)
??????}
?????}
????},
????error:function(errorMsg){
?????alert("數(shù)據(jù)加載失敗");
????}
????
????
???});
??}
?//初始化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);? //加載數(shù)據(jù)到option
?myChart.setOption(option);? //設(shè)置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????????? //數(shù)據(jù)視圖
?????????????????? }, ?????????????????? dataZoom:{
?????????????????????? show:true??????????? //區(qū)域縮放與區(qū)域縮放還原
?????????????????? },
?????????????????? magicType:{
?????????????????????? type:['line','bar']?????? //動態(tài)類型轉(zhuǎn)換
?????????????????? } ?????????????? }
?????????? },
??xAxis:[{
??
???type:'category'
??}],
??yAxis:[{
???type:'value'
??}],
??series:[{
???name:'銷量',
???type:'line'
???
??}] ?};
?loadData(option);? //加載數(shù)據(jù)到option
?myChart.setOption(option);? //設(shè)置option
?</script> ? ?

步驟七：運行效果展示

? 這是初始化界面，當(dāng)然這里只做了兩個圖，Echarts中還有很多模型，感興趣的可以學(xué)習(xí)。 ? 輸入商品名稱和銷量點擊數(shù)據(jù)更新后： ? 可以發(fā)現(xiàn)數(shù)據(jù)已經(jīng)得到了更新，查看數(shù)據(jù)庫中是否得到了更新： ? ? 可以看到，后臺的數(shù)據(jù)也通過我們前臺界面的修改得到了更新。至此整個過程就全部結(jié)束了。 ? 總結(jié)：如何利用數(shù)據(jù)庫中的數(shù)據(jù)將其可視化。主要步驟為：首先通過編程語言鏈接到數(shù)據(jù)庫，這里可以選擇JAVA.PHP等 然后獲取到數(shù)據(jù)庫中的數(shù)據(jù)。在servlet中調(diào)用調(diào)用方法，獲取到數(shù)據(jù)，然后將其轉(zhuǎn)換為Echarts可以識別的JSONArray類型的數(shù)據(jù)，當(dāng)然這里是需要導(dǎo)入jar包的。然后在視圖層，通過Ajax的同步傳輸?shù)姆绞?#xff0c;指定跳轉(zhuǎn)的方式為post,以及url為跳轉(zhuǎn)的servlet，通過執(zhí)行該servlet的方法來獲取到數(shù)據(jù)，或者其他操作。最后返回數(shù)據(jù)；然后就可以導(dǎo)入Echarts進(jìn)行初始化，通過調(diào)用方法獲取到ajax中的數(shù)據(jù)，最后調(diào)用該option進(jìn)行可視化。 ?

?

轉(zhuǎn)載于:https://www.cnblogs.com/devise/p/9974696.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。