| 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: '4月份会议室使用率与能耗关系图',
- subtext: '上海鼎善信息科技有限公司',
- x: 'center'
- },
- tooltip : {
- trigger: 'axis',
- formatter: function(params) {
- return params[0].name + '<br/>'
- + params[0].seriesName + ' : ' + params[0].value + ' (Kwh)<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/4/1','2018/4/2','2018/4/3','2018/4/4','2018/4/5','2018/4/6','2018/4/7','2018/4/8','2018/4/9','2018/4/10','2018/4/11','2018/4/12','2018/4/13','2018/4/14','2018/4/15','2018/4/16','2018/4/17','2018/4/18','2018/4/19','2018/4/20','2018/4/21','2018/4/22','2018/4/23','2018/4/24','2018/4/25','2018/4/26','2018/4/27','2018/4/28','2018/4/29','2018/4/30'
- ]
- }
- ],
- yAxis : [
- {
- name : '能耗(Kwh)',
- type : 'value',
- max : 150
- },
- {
- name : '会议室使用率(%)',
- type : 'value',
- axisLabel : {
- formatter: function(v){
- return - v;
- }
- }
- }
- ],
- series : [
- {
- name:'能耗',
- type:'line',
- itemStyle: {normal: {areaStyle: {type: 'default'}}},
- data:[
- 15,16,8,8,16,24,26,30,15,12,16,18,32,40,9,13,34,31,33,24,25,38,21,42,51,19,29,46,20,39
- ]
- },
- {
- name:'会议室使用率',
- type:'line',
- yAxisIndex:1,
- itemStyle: {normal: {areaStyle: {type: 'default'}}},
- data: (function(){
- var oriData = [
- 45,48,10,12,50,90,100,30,20,40,50,60,90,10,20,50,90,80,40,50,70,30,60,90,20,50,60,70,30,50
- ];
- var len = oriData.length;
- while(len--) {
- oriData[len] *= -1;
- }
- return oriData;
- })()
- }
- ]
- };
-
- //alert("2.准备指定配置项");
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- // 相当于 document.ready，{代码}
- $(function() {
- //alert("3.页面加载完毕");
- })
- </script>
- </body>
- </html>
|
