| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- <%@ 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>
- <%-- <script src="plug-in/jquery-1.7.2.js"></script> --%>
- </head>
- <body>
- <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
- <div id="main" style="width: 1400px; height: 400px;"></div>
- <script type="text/javascript">
- // alert("1.准备初始化echarts实例");
- // 基于准备好的dom，初始化echarts实例
- var myChart = echarts.init(document.getElementById('main'));
- // 指定图表的配置项和数据
- var option = {
- title : {
- text: '门禁流量与卫生间流量关系图',
- subtext: '上海鼎善信息科技有限公司',
- x: 'center'
- },
- tooltip : {
- trigger: 'axis',
- formatter: function(params) {
- return params[0].name + '<br/>'
- + params[0].seriesName + ' : ' + params[0].value + ' (人/分钟)<br/>'
- + params[1].seriesName + ' : ' + -params[1].value + ' (人/分钟)';
- }
- },
- legend: {
- data:['卫生间流量','门禁流量'],
- x: 'left'
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true, readOnly: false},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- dataZoom : {
- show : true,
- realtime : true,
- start : 0,
- end : 100
- },
- xAxis : [
- {
- type : 'category',
- boundaryGap : false,
- axisLine: {onZero: false},
- data : [
- '2018/6/12 7:00','2018/6/12 7:10','2018/6/12 7:20','2018/6/12 7:30','2018/6/12 7:40','2018/6/12 7:50','2018/6/12 8:00','2018/6/12 8:10','2018/6/12 8:20','2018/6/12 8:30','2018/6/12 8:40','2018/6/12 8:50','2018/6/12 9:00','2018/6/12 9:10','2018/6/12 9:20','2018/6/12 9:30','2018/6/12 9:40','2018/6/12 9:50','2018/6/12 10:00','2018/6/12 10:10','2018/6/12 10:20','2018/6/12 10:30','2018/6/12 10:40','2018/6/12 10:50','2018/6/12 11:00','2018/6/12 11:10','2018/6/12 11:20','2018/6/12 11:30','2018/6/12 11:40','2018/6/12 11:50','2018/6/12 12:00','2018/6/12 12:10','2018/6/12 12:20','2018/6/12 12:30','2018/6/12 12:40','2018/6/12 12:50','2018/6/12 13:00','2018/6/12 13:10','2018/6/12 13:20','2018/6/12 13:30','2018/6/12 13:40','2018/6/12 13:50','2018/6/12 14:00','2018/6/12 14:10','2018/6/12 14:20','2018/6/12 14:30','2018/6/12 14:40','2018/6/12 14:50','2018/6/12 15:00','2018/6/12 15:10','2018/6/12 15:20','2018/6/12 15:30','2018/6/12 15:40','2018/6/12 15:50','2018/6/12 16:00','2018/6/12 16:10','2018/6/12 16:20','2018/6/12 16:30','2018/6/12 16:40','2018/6/12 16:50','2018/6/12 17:00','2018/6/12 17:10','2018/6/12 17:20','2018/6/12 17:30','2018/6/12 17:40','2018/6/12 17:50','2018/6/12 18:00','2018/6/12 18:10','2018/6/12 18:20','2018/6/12 18:30','2018/6/12 18:40','2018/6/12 18:50'
- ]
- }
- ],
- yAxis : [
- {
- name : '卫生间流量(人/分钟)',
- type : 'value',
- max : 40
- },
- {
- name : '门禁流量(人/分钟)',
- type : 'value',
- axisLabel : {
- formatter: function(v){
- return - v;
- }
- }
- }
- ],
- series : [
- {
- name:'卫生间流量',
- type:'line',
- itemStyle: {normal: {areaStyle: {type: 'default'}}},
- data:[
- 4,5,2,7,8,6,2,3,1,1,2,1,3,1,2,5,6,8,12,3,1,3,4,2,6,9,12,19,2,3,4,9,7,4,6,3,2,5,8,8,5,2,3,4,1,3,2,3,1,4,8,5,3,1,2,4,5,7,5,3,4,4,2,2,2,1,3,2,1,9,8,5
- ]
- },
- {
- name:'门禁流量',
- type:'line',
- yAxisIndex:1,
- itemStyle: {normal: {areaStyle: {type: 'default'}}},
- data: (function(){
- var oriData = [
- 9,40,43,32,23,12,8,6,9,5,7,7,8,9,12,15,9,4,2,4,1,2,4,2,5,12,20,40,43,50,20,31,33,18,12,9,9,12,18,17,9,7,4,5,7,7,6,3,4,2,8,4,9,5,4,5,2,3,6,8,9,20,31,45,50,32,37,12,10,7,3,9
- ];
- var len = oriData.length;
- while(len--) {
- oriData[len] *= -1;
- }
- return oriData;
- })()
- }
- ]
- };
-
- //alert("2.准备指定配置项");
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- // 相当于 document.ready，{代码}
- $(function() {
- //alert("3.页面加载完毕");
- })
- </script>
- </body>
- </html>
|
