<script type="text/javascript">
var officeurl="${ctx}/budgetall/budgetAll/qiantai?bumen=${officename}";
var url="${ctx}/reimburse/budgetReimburse/shouye";
function mainall(officeid){
officeurl="${ctx}/budgetall/budgetAll/qiantai?bumen="+officeid;
url="${ctx}/reimburse/budgetReimburse/shouye?bumen="+officeid;
getChartData();
getdata();
}
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// title: {
// text: '预算指标', //标题文本内容
// },
series: [{
name: '预算指标',
type: 'gauge',
startAngle: 180,
endAngle: 0,
radius : 150, //仪表盘的半径
center : [ '20%','70%' ],//圆心坐标,支持绝对值(px)和百分比
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, 'lightgreen'],[0.4, 'orange'],[1, '#ff4500']],
width: 80
}
},
splitLine: { //分割线样式
length: 80
},
detail : {
offsetCenter: [0, 30], // x, y,单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontSize : 30
}
},
data: [{value: 0}]
},
{
name: '预算指标',
type: 'gauge',
startAngle: 180,
endAngle: 0,
radius : 150, //仪表盘的半径
center : [ '50%','70%' ],//圆心坐标,支持绝对值(px)和百分比
axisLine : { // 坐标轴线
lineStyle : { // 属性lineStyle控制线条样式
color: [[0.2, 'lightgreen'],[0.5, 'orange'],[1, '#ff4500']],
width: 80
}
},
splitLine: { // 分隔线
show: true, // 默认显示,属性show控制显示与否
length :80, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: '#eee',
width: 2,
type: 'solid'
}
},
detail : {
offsetCenter: [0, 30], // x, y,单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontSize : 30
}
},
data: [{value: 0}]
},
{
name: '预算指标',
type: 'gauge',
startAngle: 180,
endAngle: 0,
radius : 150, //仪表盘的半径
center : [ '80%','70%' ],//圆心坐标,支持绝对值(px)和百分比
axisLine : { // 坐标轴线
lineStyle : { // 属性lineStyle控制线条样式
color: [[0.2, 'lightgreen'],[0.6, 'orange'],[1, '#ff4500']],
width: 80
}
},
splitLine: { //分割线样式
length: 80
},
detail : {
offsetCenter: [0, 30], // x, y,单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontSize : 30
}
},
data: [{value: 0}]
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
getChartData();
// setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
// option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
// myChart.setOption(option, true);
// }, 2000);
function getChartData() {
//获得图表的options对象
var options = myChart.getOption();
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url : url,
dataType : "json", //返回数据形式为json
success : function(result) {
var result=eval(result);
console.log(result)
$("#span1").html( result.list1[0].reimburseCode);
$("#span2").html( result.list2[0].reimburseCode);
$("#span3").html( result.list3[0].reimburseCode);
$("#span11").html( result.list1[0].reimburseNum);
$("#span22").html( result.list2[0].reimburseNum);
$("#span33").html( result.list3[0].reimburseNum);
$("#span111").html( result.list1[0].halfYear+"%");
$("#span222").html( result.list2[0].halfYear+"%");
$("#span333").html( result.list3[0].halfYear+"%");
options.series[0].data = result.list1[0].halfYear;
options.series[1].data = result.list2[0].halfYear;
options.series[2].data = result.list3[0].halfYear;
myChart.hideLoading();
myChart.setOption(options);
},
error : function(errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!");
myChart.hideLoading();
}
});
}
var keChart = echarts.init(document.getElementById('kemu'));
keChart.title = '堆叠条形图';
var kmoption = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
show:false,
data: ['预算剩余金额', '已报销金额','总金额']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
/* data: ['科目一','科目二','科目三','科目四','科目五','科目六'] */
data: []
},
series: [
{
name: '预算剩余金额',
type: 'bar',
stack: '总量',
/* color:'white', */
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '已报销金额',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
}
/* {
name: '总金额',
type: 'bar',
stack: '总量',
show:false,
label: {
show:false,
normal: {
show:false,
position: 'insideRight'
}
},
data: []
} */
]
};
keChart.setOption(kmoption);
getdata();
function getdata() {
//获得图表的options对象
/* var options = myChart.getOption(); */
var options1 = kmoption;
for(var k=0;k<options1.yAxis.data.length;k++){
options1.yAxis.data=[];
options1.series[0].data=[];
options1.series[1].data=[];
/* options1.series[2].data=[]; */
}
//通过Ajax获取数据
$.ajax({
type : "POST",
async : false, //同步执行
url : officeurl,
dataType : "json", //返回数据形式为json
success : function(data) {
for(i in data)
{
for(var j=0;j<data[i].length;j++){
options1.yAxis.data[j]=data[i][j].acname+'\n总金额:'+data[i][j].zjout;
options1.series[0].data[j]=data[i][j].zjout-data[i][j].reimbursableNum;
options1.series[1].data[j]=data[i][j].reimbursableNum;
/* options1.series[2].data[j]=data[i][j].outresult; */
/* options1.series[2].show=false; */
}
}
keChart.setOption(options1, true);
},
error : function(errorMsg) {
alert("失败");
myChart.hideLoading();
}
});
}
</script>
var officeurl="${ctx}/budgetall/budgetAll/qiantai?bumen=${officename}";
var url="${ctx}/reimburse/budgetReimburse/shouye";
function mainall(officeid){
officeurl="${ctx}/budgetall/budgetAll/qiantai?bumen="+officeid;
url="${ctx}/reimburse/budgetReimburse/shouye?bumen="+officeid;
getChartData();
getdata();
}
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// title: {
// text: '预算指标', //标题文本内容
// },
series: [{
name: '预算指标',
type: 'gauge',
startAngle: 180,
endAngle: 0,
radius : 150, //仪表盘的半径
center : [ '20%','70%' ],//圆心坐标,支持绝对值(px)和百分比
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, 'lightgreen'],[0.4, 'orange'],[1, '#ff4500']],
width: 80
}
},
splitLine: { //分割线样式
length: 80
},
detail : {
offsetCenter: [0, 30], // x, y,单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontSize : 30
}
},
data: [{value: 0}]
},
{
name: '预算指标',
type: 'gauge',
startAngle: 180,
endAngle: 0,
radius : 150, //仪表盘的半径
center : [ '50%','70%' ],//圆心坐标,支持绝对值(px)和百分比
axisLine : { // 坐标轴线
lineStyle : { // 属性lineStyle控制线条样式
color: [[0.2, 'lightgreen'],[0.5, 'orange'],[1, '#ff4500']],
width: 80
}
},
splitLine: { // 分隔线
show: true, // 默认显示,属性show控制显示与否
length :80, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: '#eee',
width: 2,
type: 'solid'
}
},
detail : {
offsetCenter: [0, 30], // x, y,单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontSize : 30
}
},
data: [{value: 0}]
},
{
name: '预算指标',
type: 'gauge',
startAngle: 180,
endAngle: 0,
radius : 150, //仪表盘的半径
center : [ '80%','70%' ],//圆心坐标,支持绝对值(px)和百分比
axisLine : { // 坐标轴线
lineStyle : { // 属性lineStyle控制线条样式
color: [[0.2, 'lightgreen'],[0.6, 'orange'],[1, '#ff4500']],
width: 80
}
},
splitLine: { //分割线样式
length: 80
},
detail : {
offsetCenter: [0, 30], // x, y,单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
fontSize : 30
}
},
data: [{value: 0}]
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
getChartData();
// setInterval(function(){//把option.series[0].data[0].value的值使用random()方法获取一个随机数
// option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
// myChart.setOption(option, true);
// }, 2000);
function getChartData() {
//获得图表的options对象
var options = myChart.getOption();
//通过Ajax获取数据
$.ajax({
type : "post",
async : false, //同步执行
url : url,
dataType : "json", //返回数据形式为json
success : function(result) {
var result=eval(result);
console.log(result)
$("#span1").html( result.list1[0].reimburseCode);
$("#span2").html( result.list2[0].reimburseCode);
$("#span3").html( result.list3[0].reimburseCode);
$("#span11").html( result.list1[0].reimburseNum);
$("#span22").html( result.list2[0].reimburseNum);
$("#span33").html( result.list3[0].reimburseNum);
$("#span111").html( result.list1[0].halfYear+"%");
$("#span222").html( result.list2[0].halfYear+"%");
$("#span333").html( result.list3[0].halfYear+"%");
options.series[0].data = result.list1[0].halfYear;
options.series[1].data = result.list2[0].halfYear;
options.series[2].data = result.list3[0].halfYear;
myChart.hideLoading();
myChart.setOption(options);
},
error : function(errorMsg) {
alert("不好意思,大爷,图表请求数据失败啦!");
myChart.hideLoading();
}
});
}
var keChart = echarts.init(document.getElementById('kemu'));
keChart.title = '堆叠条形图';
var kmoption = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
show:false,
data: ['预算剩余金额', '已报销金额','总金额']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
/* data: ['科目一','科目二','科目三','科目四','科目五','科目六'] */
data: []
},
series: [
{
name: '预算剩余金额',
type: 'bar',
stack: '总量',
/* color:'white', */
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
},
{
name: '已报销金额',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: []
}
/* {
name: '总金额',
type: 'bar',
stack: '总量',
show:false,
label: {
show:false,
normal: {
show:false,
position: 'insideRight'
}
},
data: []
} */
]
};
keChart.setOption(kmoption);
getdata();
function getdata() {
//获得图表的options对象
/* var options = myChart.getOption(); */
var options1 = kmoption;
for(var k=0;k<options1.yAxis.data.length;k++){
options1.yAxis.data=[];
options1.series[0].data=[];
options1.series[1].data=[];
/* options1.series[2].data=[]; */
}
//通过Ajax获取数据
$.ajax({
type : "POST",
async : false, //同步执行
url : officeurl,
dataType : "json", //返回数据形式为json
success : function(data) {
for(i in data)
{
for(var j=0;j<data[i].length;j++){
options1.yAxis.data[j]=data[i][j].acname+'\n总金额:'+data[i][j].zjout;
options1.series[0].data[j]=data[i][j].zjout-data[i][j].reimbursableNum;
options1.series[1].data[j]=data[i][j].reimbursableNum;
/* options1.series[2].data[j]=data[i][j].outresult; */
/* options1.series[2].show=false; */
}
}
keChart.setOption(options1, true);
},
error : function(errorMsg) {
alert("失败");
myChart.hideLoading();
}
});
}
</script>