阅读背景:

ECharts柱状图动态获取数据

来源:互联网 
前台页面代码  
<%@ include file="/config.jsp"%>  
<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>  
</body>  
<script type="text/javascript">  
/*$(document).ready(function(){   
dataX();  
dataY();  
});  
function dataX(){  
var arr=[];  
 $.ajax(  
 {  
     url:"fixedExpensesAccountAction!dataXY.action",  
     dataType:"text",  
     success:function(data)  
     {  
     var rows=eval(data);  
     //调用函数获取值,转换成数组模式  
        for(var i=0;i<rows.length;i++)  
        {  
        arr.push(rows[i].accountUse);  
        }  
      }  
     });  
 return arr;  
  
}  
  
  
function dataY(){  
var arrY=[];  
 $.ajax(  
 {  
     url:"fixedExpensesAccountAction!dataXY.action",  
     dataType:"text",  
     success:function(data)  
     {  
       
          var rows=eval(data);  
     //调用函数获取值,转换成数组模式  
        for(var i=0;i<rows.length;i++)  
        {  
        arrY.push(rows[i].accountAmt);  
        }  
      }  
     });  
                
 return arrY;  
}*/  
  
  
var myChart = echarts.init(document.getElementById('main'));  
myChart.setOption({  
title : {  
        text: '固定支出统计'  
},  
tooltip : {  
trigger: 'axis'  
},  
legend: {  
},  
toolbox: {  
show : true,  
feature : {  
magicType : {show: true, type: ['line', 'bar']},  
restore : {show: true},  
saveAsImage : {  
        show : true,  
        title : '保存为图片',  
        type : 'png',  
        lang : ['点击保存']   
    }  
}  
},  
calculable : true,  
xAxis : [  
{  
type : 'category',  
data :(function(){  
var arr=[];  
 $.ajax(  
 {  
     url:"fixedExpensesAccountAction!dataXY.action",  
     dataType:"text",  
     async: false,  
     success:function(data)  
     {  
     var rows=eval(data);  
     //调用函数获取值,转换成数组模式  
        for(var i=0;i<rows.length;i++)  
        {  
        arr.push(rows[i].accountUse);  
        }  
      }  
     });  
 return arr;  
})()  
}  
],  
yAxis : [  
{  
type : 'value',  
splitArea : {show : true}  
}  
],  
series : [  
{  
name:'支出费用',  
type:'bar',  
data:(function(){  
var arrY=[];  
 $.ajax(  
 {  
     url:"fixedExpensesAccountAction!dataXY.action",  
     dataType:"text",  
     async: false,  
     success:function(data)  
     {  
       
          var rows=eval(data);  
     //调用函数获取值,转换成数组模式  
        for(var i=0;i<rows.length;i++)  
        {  
        arrY.push(rows[i].accountAmt);  
        }  
      }  
     });  
                
 return arrY;  
})()  
}  
]  
});   
  
</script>  
</html>  <%@ include fi



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: