Echarts调用Sqlserver动态数据
【JSP】调取数据库，生成动态图表
网上搜的时候没找到使用动态数据的方法，大神们当然是知道的，我来为小虾米同胞们分享一下自己钻研的成果
Echarts的引用:
a) 页面引用:
b) 在body中绘制demo供echarts存放
Area" style="height:500px;border:1px solid #ccc;paddi
c) 然后在head 中绘制饼图:
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.getElement
ById('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 ，
所以要用ajax调用servlet获取数据库的值。
i).servlet输出值 doGet为void无返回方法，所以要将dao查询到的数据用字符串连接起来，
然后out.println();out.flush();
public void doGet(HttpServletRequest request, HttpServletResponse respo
nse)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();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
人事管理
//ajax调用数据，开始绘图
攒一下RP。秋秋358701294;麻烦备注。
浙公网安备 33021202002483
