skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
							<%@ 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%; height: 60%;"></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 option = {
				title : {
			        text: '项目工作评价统计',
			        subtext: '技术支持：上海鼎善信息科技有限公司',
			        x: 'center'
			    },
		    color: ['#e5323e', '#006699', '#003366', '#4cabce'],
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        } ,
		        formatter: function(params) {
                    var result = params[0].name+"工作评价统计</br>";
                    params.forEach(function (item) {
                        result += item.marker + " " + item.seriesName + "率 : " + item.value +"%</br>";
                    });
                    return result;
                }
		        /* formatter: "{b} <br/>{a0}率: {c0}% <br/> {a1}率: {c1}%"  */
		    },
		    legend: {
		        data: ['差评', '良好'],
		        x: 'right'
		    },
		    toolbox: {
		        show: true,
		        orient: 'vertical',
		        left: 'right',
		        top: 'center',
		        feature: {
		            mark: {show: true},
		            dataView: {show: true, readOnly: false},
		            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
		            restore: {show: true},
		            saveAsImage: {show: true}
		        }
		    },
		    calculable: true,
		 
		xAxis : [ {
				type : 'category',
				axisTick : {
					show : false
				},
				data : [ '嘉定新图', '工业园区', '市环境中心', '检察院', '大众工业学校', '交大附中',
						'群艺馆', '中小企业', '浦阳阁', '行政服务中心', '特保大队', '民防', '科创',
						'青东法庭', '新城', '规土', '行政窗口', '就促', '考培', '建交委' ],
				axisLabel : {//坐标轴刻度标签的相关设置。
					clickable : true,//并给图表添加单击事件  根据返回值判断点击的是哪里
					interval : 0,
					rotate:"45"
					/* formatter : function(params, index) {
						if (index % 2 != 0) {
							return '\n\n' + params;
						} else {
							return params;
						}
					}  */

				}
			} ],
			yAxis : [ {
				type : 'value',
				name:'单位：%',
				axisLabel:{formatter:'{value} %'}
			} ],
			series : [
					{
						name : '差评',
						type : 'bar',
						barGap : 0,
						label : labelOption,
						data : [ 2, 1, 4, 3, 2, 5, 2, 2, 2, 1, 1, 2, 3, 2, 4,
								1, 2, 5, 1, 1 ]
					},
					{
						name : '良好',
						type : 'bar',
						label : labelOption,
						data : [ 24, 52, 34, 42, 12, 21, 12, 24, 32, 42, 12,
								23, 13, 42, 36, 24, 34, 28, 17, 18 ]
					} ]
		};

		myChart.setOption(option);

		// 相当于 document.ready，{代码}
		$(function() {
			//alert("3.页面加载完毕");
		})
	</script>
</body>
</html>