skyversation
/
meidu2021


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
							<!DOCTYPE html>
<html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
<!-- context path -->
<!-- update-begin--Author:xuelin  Date:20170428 for：#1755 【美化】用户分析报表，多tab格式，是否可以美化  需要改底层-------------------- -->
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
	<head>
		<meta charset="utf-8">
		<title>美都环卫微管理</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="plug-in/mui/css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="plug-in/mui/css/app.css"/>
		<style>
			@font-face {
			  font-family: "iconfont";   
			  src: url('../css/iconfont.ttf') format('truetype')
			}
			.mui-icon-back::before, .mui-icon-left-nav::before {
			    content: '\e624';
			    color:red;
			}
			.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
		        margin-top: 0;
		    }
		    .mui-table h4{
		        line-height: 21px;
		        font-weight: 500;
		    }
		
		    .mui-table .oa-icon{
		        position: absolute;
		        right:0;
		        bottom: 0;
		    }
		    .mui-table .oa-icon-star-filled{
		        color:#f14e41;
		    }
				.divtitle{
					margin: 20px 15px 7px;
					color: red;
					font-size: 15px;
			}
			.mui-popup{position: fixed;}
			.detailTableName{
				font-size:16px;
				text-align:"left";
			}
			.detailTableValue{
				font-size:16px;
			}
			.mui-popup {
		   		text-align: right;
		    }
		</style>
	</head>

		<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">${projectname }</h1>
		</header>
		<div class="mui-content">
			<div id="echarts-line" style="height:600px;">
			    <div id="container" style="height:80%;"></div>
			</div>
		</div>


	</body>
	<script src="plug-in/mui/mui.min.js"></script>
	<script src = "plug-in/stats/statscommon.js"></script>
	       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
 <!--    <script src = "webpage/cn/com/lzt/wxviewer/wxMultirowViewer.js"></script> -->
   <%--  <c:if test='${not empty defindedJS}'>
    	<script src = "${defindedJS}"></script>
    </c:if>	 --%>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		$(function() {
			$(document).ready(function() {     
			//	attendanceStatssearch();
			});
			
		});

	/* 	function attendanceStatssearch(){
			 var url = '${htmlurl}';
			 handleAjaxSimple(url, "", handleSuccess);
		}

		function handleSuccess(data){
			document.getElementById("mui-table-view").innerHTML=data.obj;
			
		}
		
		function getHeight(className) {
            var height = $(className).height();
            return height;
        }
        function setLineHeight(className) {
            var height = getHeight(className) + "px";
            $(className).css("line-height",height);
        } */
        
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        window.onresize = myChart.resize;  // 适应屏幕放大缩小
        var app = {};
        option = null;
        option = {
          baseOption: {
        	  title : {
					subtext : '单位：万元              ',
					x : 'right'
				},
            tooltip: {
                trigger: 'axis'
            },
            legend: {
            	top:"50px",
                data:['预算','预算执行']
            },
            toolbox: {
                show: true,
                feature: {
                   /* magicType: {show: true, type: ['stack', 'tiled']},*/
                    saveAsImage: {show: true}   //可下载图片
                }
            },
             grid: {
                                left: '10%',     //设置canvas图距左的距离
                                top: '20%',
                                right: '10%',
                                bottom: '10%'
                            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一月','二月','三月','四月','五月','六月','七月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
            {
                name: '预算',
                type: 'line',
                smooth:false, 
                //关键点，为true是不支持虚线，实线就用true
                itemStyle:{
                    normal:{
                        lineStyle:{
                            width:2,
                            color:"red",
                            type:'dotted'  //'dotted'虚线 'solid'实线
                        }
                    }
                }, 
                data: [50, 100, 150, 200, 250, 300, 350]
            },
            {
                name: '预算执行',
                type: 'line',
                smooth:true, 
                itemStyle:{
                    normal:{
                        lineStyle:{
                            color:"green"
                        }
                    }
                }, 
                data: [24, 66, 102, 156, 241, 298, 367]
            }]
            }
		};
		if (option && typeof option === "object") {
		myChart.setOption(option, true);
		}
	</script>
</html>