Echarts调用Sqlserver动态数据.docVIP

【JSP】调取数据库，生成动态图表 网上搜的时候没找到使用动态数据的方法，大神们当然是知道的，我来为小虾米同胞们分享一下自己钻研的成果 Echarts的引用： 页面引用： script src=js/esl.js/script 在body中绘制demo供echarts存放 div id=chartArea style=height:500px;border:1px solid #ccc;padding:10px;/div 然后在head script type=text/javascript/script 中绘制饼图： 1 为模块加载配置echarts的路径，从当前页面链接到echarts.js，定义所需图标路径 require.config({ paths:{ echarts:js/echarts, echarts/chart/pies : js/echarts }}); 2动态加载echarts然后再回调函数中开始使用，注意保持按需加载结构定义图表路径 require( [ echarts, echarts/chart/pie // 使用类似方法加载pie ], function(ec) { var myChart = ec.init(document.getElementById(chartArea)); var option = { ………… calculable : true, series : [ { name:访问来源, type:pie, radius : 55%, center: [50%, 225], data:[ {value:a, name:已婚}, {value:b, name:未婚},]}]}; myChart.setOption(option);}); 3使用动态数据，因为是在head script type=text/javascript/script ，所以要用ajax调用servlet获取数据库的值。 i).servlet输出值 doGet为void无返回方法，所以要将dao查询到的数据用字符串连接起来，然后out.println();out.flush(); public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { String result=; StatisticsDao dao=new StatisticsDao(); try { String marraige1=dao.count1(); result = marraige1+, +marraige2;} catch (Exception e) {e.printStackTrace(); } PrintWriter out = response.getWriter(); out.println(result); out.flush(); out.close(); } ii).ajax 获取值 $.get()得到的是字符串，所以要用data.indexOf(,)方法将字符串分割得到数据。 $(function(){ $.get(test1,function(data){ if(data != ){ var m =data.indexOf(,); a = parseInt(data.substring(0,m)); b = parseInt(data.substring(m+1));}); 另外，画图函数要写在ajax方法里面。运行的时候会优先绘制图形，导致ajax数据没有读到。 下面附完整jsp页面代码： %@ page language=java import=java.util.*,bean.StatisticsDao pageEncoding=utf-8% % String path = request.getContextPath