完整版echarts实时显示sql数据库数据 |
您所在的位置：网站首页 › echarts与react交互 › 完整版echarts实时显示sql数据库数据 |
完整版echarts实时显示sql数据库数据
|
** 首先讲一讲！echarts官网很多很多的例子都是静态数据，对于开发者后续的开发确实不太友好，而且网上许多地方都是部分重要代码，对初学者而言也难以整体掌握。当然我也是初学者中的一员，这次成功的实现可视化之后就打算写篇完整的代码提供给初学者学习。 ** 首先新建web项目；给点初始化dom（记得引入echarts、jquery文件） 写入echarts主题 var myChart = echarts.init(document.getElementById('main')); myChart.setOption ({ title:{ text:'异步数据加载' }, legend: { data:['销量'] }, xAxis : { data:[] } , yAxis : {}, series : [ { "name":"销量", "type":"bar", data:[] } ] }) myChart.showLoading(); //上部分为echarts基本实现，下部分为ajax异步获取数据 var names=[]; var nums=[]; $.ajax({ type : "post", async : true, url : "bar.do", //重点说明！！这个url是后续servlet的映射地址，请相对应。 data : {}, dataType : "json", success : function(result) { if (result) { for(var i=0;i return name; } public void setName(String name) { this.name = name; } public Integer getNum() { return num; } public void setNum(Integer num) { this.num = num; } } 数据库连接类 public class DBUtil { public static Connection getConncetion(){ Connection conn = null; try { Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver"); String url="jdbc:sqlserver://localhost:1433;DatabaseName=test"; String user="sa"; String password="88888888"; conn=DriverManager.getConnection(url, user, password); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block System.out.println("连接失败"); e.printStackTrace(); } return conn; } } Dao实现类：成功连接数据库后对数据进行操作 public class barDao { public ArrayList select_all(){ Connection conn=null; Statement stmt = null; ResultSet rst = null; try { conn=DBUtil.getConncetion(); stmt=conn.createStatement(); String sql = "select * from bar"; rst=stmt.executeQuery(sql); ArrayList array = new ArrayList(); while(rst.next()){ barBean bar = new barBean(); bar.setName(rst.getString("name")); bar.setNum(rst.getInt("num")); array.add(bar); } stmt.close(); rst.close(); conn.close(); return array; } catch (SQLException e) { // TODO Auto-generated catch block System.out.println("读取失败"); return new ArrayList(); } } } 数据库数据 Servlet类：服务器端Servlet接收请求
public class barServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
barDao bardao = new barDao();
ArrayList array = bardao.select_all();
ObjectMapper mapper = new ObjectMapper(); //提供java-json相互转换功能的类
String json = mapper.writeValueAsString(array);//将list中的对象转换为Json格式的数组
System.out.println(json);
//将json数据返回给客户端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
}
}
最后的web.xml配置
barServlet
echart.barServlet //**class地址为包.类名**
barServlet
/bar.do
最后附上运行截图，修改数据库数据后，刷新页面，echarts也随之更新。 |
【本文地址】