skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
							<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
	<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 引入echarts文件 -->
<script src="plug-in/echarts/echarts.js"></script>
<link type="text/css" href="css/stats.css" rel="stylesheet" />
<%-- <script src="plug-in/jquery-1.7.2.js"></script> --%>
</head>
<body>

	<div id="main" style="width: 90%;"></div>
	<script type="text/javascript">
		// alert("1.准备初始化echarts实例");
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		var posList = [
		    'left', 'right', 'top', 'bottom',
		    'inside',
		    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
		    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
		];
		myChart.configParameters = {
			    rotate: {
			        min: -90,
			        max: 90
			    },
			    align: {
			        options: {
			            left: 'left',
			            center: 'center',
			            right: 'right'
			        }
			    },
			    verticalAlign: {
			        options: {
			            top: 'top',
			            middle: 'middle',
			            bottom: 'bottom'
			        }
			    },
			    position: {
			        options: echarts.util.reduce(posList, function (map, pos) {
			            map[pos] = pos;
			            return map;
			        }, {})
			    },
			    distance: {
			        min: 0,
			        max: 100
			    }
			};

		myChart.config = {
			    rotate: 90,
			    align: 'left',
			    verticalAlign: 'middle',
			    position: 'insideBottom',
			    distance: 15,
			    onChange: function () {
			        var labelOption = {
			            normal: {
			                rotate: app.config.rotate,
			                align: app.config.align,
			                verticalAlign: app.config.verticalAlign,
			                position: app.config.position,
			                distance: app.config.distance
			            }
			        };
			        myChart.setOption({
			            series: [{
			                label: labelOption
			            }, {
			                label: labelOption
			            }, {
			                label: labelOption
			            }, {
			                label: labelOption
			            }]
			        });
			    }
			};
		
		var labelOption = {
			    normal: {
			        show: true,
			        position: myChart.config.position,
			        distance: myChart.config.distance,
			        align: myChart.config.align,
			        verticalAlign: myChart.config.verticalAlign,
			        rotate: myChart.config.rotate,
			        formatter: '{c}  {name|{a}}',
			        fontSize: 16,
			        rich: {
			            name: {
			                textBorderColor: '#fff'
			            }
			        }
			    }
			};

        var colorList = ['#66DD00','#AAAAAA','#00CC33','#DD0000','#996666','#DDDDDD'];
		var option = {
				 title : {
				        text: '项目成本和收入实时表',
				        subtext: '技术支持：上海鼎善信息科技有限公司',
				        x: 'center'
				    },
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        },
			        formatter : function(params) { //数据格式
			        var sale = Number(params[0].value)+Number(params[1].value);
			        var cost = Number(params[2].value)+Number(params[3].value)+Number(params[4].value)+Number(params[5].value);
			            var relVal = params[0].name+"<br/>";
			        relVal += '销售金额：'+format(sale)+"元<br/>";
			            relVal +=  "&nbsp;&nbsp;"+params[0].marker + params[0].seriesName+ ' : ' + format(params[0].value)+"元<br/>";
			            relVal +=  "&nbsp;&nbsp;"+params[1].marker + params[1].seriesName+ ' : ' + format(params[1].value) +"元<br/>";
			        relVal += '项目预算：'+format(cost)+"元<br/>";
			            relVal +=  "&nbsp;&nbsp;"+params[2].marker + params[2].seriesName+ ' : ' + format(params[2].value) +"元<br/>";
			            relVal +=  "&nbsp;&nbsp;"+params[3].marker + params[3].seriesName+ ' : ' + format(params[3].value) +"元<br/>";
			            relVal +=  "&nbsp;&nbsp;"+params[4].marker + params[4].seriesName+ ' : ' + format(params[4].value) +"元<br/>";
			            relVal +=  "&nbsp;&nbsp;"+params[5].marker + params[5].seriesName+ ' : ' + format(params[5].value) +"元<br/>";
			            return relVal;
			        }
			    },
			    legend: {
			    	top:"50px",
			        data:[/* '销售金额', */'已收物业费','应收账款',/* '项目预算', */'外包成本','人员工资','物料成本','预算结余']
			    },
			    grid: {
			    	top:'80px',
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    yAxis : [
			        {
			            type : 'category',
			            data : ['北斗西虹桥基地','青浦地税','青浦工业园区','曲水园','青浦检察院','交大附中','群艺馆',
			            	'司法残联','科技创业中心','地税干部学校(青浦)','老干部局','徐泾镇社区卫生中心','青浦区环境监测站']
			        }
			    ],
			    xAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			     /*    {
			            name:'销售金额',
			            type:'bar',
			            data:[3796400, 7344700, 6558196, 1283260, 3398088, 5758220, 4828392,    
			            	1412932,1096221,2359180,917192,706200,1473512]
			        }, */
			        {
			            name:'已收物业费',
			            type:'bar',
			            stack: '物业费',
			            barWidth : 16,
			            data:[2160000, 3452000, 2170000, 680000, 1699044, 1439555, 2000000,
			            	941954,7730814	,
			            	1572787	,
			            	611461	,
			            	470800	,
			            	982341	]
			        },
			        {
			            name:'应收账款',
			            type:'bar',
			            stack: '物业费',
			            barWidth : 16,
			            itemStyle:{  
		                     normal:{  
		                    	 color: '#CCCCCC'
		                     }  
		                  },  
			            data:[1636400, 3892700, 4388196, 603260, 1699044, 4318665, 2828392,
			            	470978,365407	,
			            	786393	,
			            	305731	,
			            	235400	,
			            	491171	]
			        },
			        /* {
			            name:'项目预算',
			            type:'bar',
			            data:[3037120, 5875760, 5246556, 1026608, 2718470, 4606576, 3862713]
			        }, */
			        {
			            name:'外包成本',
			            type:'bar',
			            stack: '成本',
			            barWidth : 16,
			            data:[1189800, 1894090, 2190020, 129300, 263100, 1238000, 345200,
			            	452138	,
			            	350791	,
			            	754938	,
			            	293501	,
			            	225984	,
			            	471524	]
			        },
			        {
			            name:'人员工资',
			            type:'bar',
			            stack: '成本',
			            barWidth : 16,
			            data:[580000, 1653000, 668000, 239000, 1138000, 1925800, 1689000,
			            	339104	,
			            	263093	,
			            	566203	,
			            	220126	,
			            	169488	,
			            	353643	]
			        },
			        {
			            name:'物料成本',
			            type:'bar',
			            stack: '成本',
			            barWidth : 16,
			            data:[45880, 62000, 94100, 4500, 21093, 123870, 12100,
			            	21090	,
			            	23980	,
			            	47833	,
			            	7629	,
			            	6510	,
			            	19209	]
			        },
			        {
			            name:'预算结余',
			            type:'bar',
			            stack: '成本',
			            barWidth : 16,
			            itemStyle:{  
		                     normal:{  
		                    	 color: '#00AA00'
		                     }  
		                  },  
			            data:[1221440, 2266670, 2294436, 653808, 1296277, 1318906, 1816413,
			            	318014	,
			            	239113	,
			            	518370	,
			            	212497	,
			            	162978	,
			            	334434	]
			        }
			    ]
			};
		myChart.setOption(option);
		// getDom() 获取 ECharts 实例容器的 dom 节点
		var counts = 13;
        this.autoHeight = counts * 60 + 50; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
        myChart.getDom().style.height = this.autoHeight + "px";
        myChart.getDom().childNodes[0].style.height = this.autoHeight + "px";
        myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",this.autoHeight);
        myChart.getDom().childNodes[0].childNodes[0].style.height = this.autoHeight + "px";
        myChart.resize();
		
		function format (num) {  
		    var reg=/\d{1,3}(?=(\d{3})+$)/g;   
		    return (num + '').replace(reg, '$&,');  
		}
		// 相当于 document.ready，{代码}
		$(function() {
			//alert("3.页面加载完毕");
		})
	</script>
</body>
</html>