| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- <%@ 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 base = +new Date(2018, 1, 1);
- var oneDay = 24 * 3600 * 1000;
- var valueBase = Math.random() * 10;
- var data = [['2018-2-2',10],['2018-2-3',9],['2018-2-4',8],['2018-2-5',9],['2018-2-6',10],['2018-2-7',9],['2018-2-8',10],['2018-2-9',10],['2018-2-10',12],
- ['2018-2-11',10],['2018-2-12',8],['2018-2-13',6],['2018-2-14',6],['2018-2-15',7],['2018-2-16',9],['2018-2-17',11],['2018-2-18',13],['2018-2-19',11],
- ['2018-2-20',12],['2018-2-21',12],['2018-2-22',11],['2018-2-23',11],['2018-2-24',12],['2018-2-25',11],['2018-2-26',10],['2018-2-27',8],['2018-2-28',7],
- ['2018-3-1',5],['2018-3-2',5],['2018-3-3',5],['2018-3-4',6],['2018-3-5',6],['2018-3-6',5],['2018-3-7',3],['2018-3-8',4],['2018-3-9',4],['2018-3-10',4],
- ['2018-3-11',5],['2018-3-12',5],['2018-3-13',6],['2018-3-14',4],['2018-3-15',2],['2018-3-16',4],['2018-3-17',4],['2018-3-18',3],['2018-3-19',3],
- ['2018-3-20',4],['2018-3-21',3],['2018-3-22',2],['2018-3-23',2],['2018-3-24',2],['2018-3-25',2],['2018-3-26',4],['2018-3-27',4],['2018-3-28',5],
- ['2018-3-29',4],['2018-3-30',5],['2018-3-31',3],['2018-4-1',3],['2018-4-2',3],['2018-4-3',2],['2018-4-4',3],['2018-4-5',5],['2018-4-6',6],['2018-4-7',7],
- ['2018-4-8',9],['2018-4-9',11],['2018-4-10',11],['2018-4-11',10],['2018-4-12',9],['2018-4-13',8],['2018-4-14',10],['2018-4-15',8],['2018-4-16',10],
- ['2018-4-17',12],['2018-4-18',12],['2018-4-19',13],['2018-4-20',13],['2018-4-21',15],['2018-4-22',13],['2018-4-23',12],['2018-4-24',10],['2018-4-25',12],
- ['2018-4-26',10],['2018-4-27',12],['2018-4-28',11],['2018-4-29',12],['2018-4-30',13],['2018-5-1',11],['2018-5-2',9],['2018-5-3',7],['2018-5-4',7],
- ['2018-5-5',9],['2018-5-6',8],['2018-5-7',9],['2018-5-8',7],['2018-5-9',6],['2018-5-10',7],['2018-5-11',8],['2018-5-12',8],['2018-5-13',8],['2018-5-14',9],
- ['2018-5-15',9],['2018-5-16',11],['2018-5-17',13],['2018-5-18',12],['2018-5-19',14],['2018-5-20',14],['2018-5-21',12],['2018-5-22',10],['2018-5-23',11],
- ['2018-5-24',11],['2018-5-25',12],['2018-5-26',12],['2018-5-27',14],['2018-5-28',13],['2018-5-29',11],['2018-5-30',13],['2018-5-31',14],['2018-6-1',15],
- ['2018-6-2',16],['2018-6-3',15],['2018-6-4',17],['2018-6-5',19],['2018-6-6',21],['2018-6-7',23],['2018-6-8',22],['2018-6-9',23],['2018-6-10',25],
- ['2018-6-11',27],['2018-6-12',26],['2018-6-13',27],['2018-6-14',29],['2018-6-15',31],['2018-6-16',29],['2018-6-17',30],['2018-6-18',31],['2018-6-19',33],
- ['2018-6-20',32],['2018-6-21',34],['2018-6-22',34],['2018-6-23',36],['2018-6-24',37],['2018-6-25',39],['2018-6-26',40],['2018-6-27',41],['2018-6-28',42],
- ['2018-6-29',44],['2018-6-30',46],['2018-7-1',46],['2018-7-2',46],['2018-7-3',45],['2018-7-4',45],['2018-7-5',45],['2018-7-6',45],['2018-7-7',45],
- ['2018-7-8',45],['2018-7-9',43],['2018-7-10',45],['2018-7-11',46],['2018-7-12',44],['2018-7-13',44],['2018-7-14',46],['2018-7-15',47],['2018-7-16',46],
- ['2018-7-17',47],['2018-7-18',49],['2018-7-19',49],['2018-7-20',47],['2018-7-21',46],['2018-7-22',44],['2018-7-23',42],['2018-7-24',42],['2018-7-25',40],
- ['2018-7-26',39],['2018-7-27',37],['2018-7-28',35],['2018-7-29',34],['2018-7-30',33],['2018-7-31',35],['2018-8-1',37],['2018-8-2',35],['2018-8-3',34],
- ['2018-8-4',33],['2018-8-5',33],['2018-8-6',32],['2018-8-7',33],['2018-8-8',31],['2018-8-9',29],['2018-8-10',30],['2018-8-11',28],['2018-8-12',30],
- ['2018-8-13',29],['2018-8-14',29],['2018-8-15',29],['2018-8-16',31],['2018-8-17',33],['2018-8-18',32],['2018-8-19',33]];
-
- /* for (var i = 1; i < 200; i++) {
- var now = new Date(base += oneDay);
- var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
- valueBase = Math.round((Math.random() - 0.5) * 5 + valueBase);
- valueBase <= 0 && (valueBase = Math.random() * 10);
- data.push([dayStr, valueBase]);
- } */
-
- console.log(data);
- var option = {
- animation: false,
- title: {
- left: 'center',
- text: '电梯故障报修数',
- subtext: '上海鼎善信息科技有限公司',
- },
- legend: {
- top: 'bottom',
- data:['意向']
- },
- tooltip: {
- triggerOn: 'none',
- position: function (pt) {
- return [pt[0], 130];
- }
- },
- toolbox: {
- left: 'center',
- itemSize: 25,
- top: 55,
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- restore: {}
- }
- },
- xAxis: {
- type: 'time',
- // boundaryGap: [0, 0],
- axisPointer: {
- value: '2018-6-7',
- snap: true,
- lineStyle: {
- color: '#004E52',
- opacity: 0.5,
- width: 2
- },
- label: {
- show: true,
- formatter: function (params) {
- return echarts.format.formatTime('yyyy-MM-dd', params.value);
- },
- backgroundColor: '#004E52'
- },
- handle: {
- show: true,
- color: '#004E52'
- }
- },
- splitLine: {
- show: false
- }
- },
- yAxis: {
- type: 'value',
- axisTick: {
- inside: true
- },
- splitLine: {
- show: false
- },
- axisLabel: {
- inside: true,
- formatter: '{value}\n'
- },
- z: 10
- },
- grid: {
- top: 110,
- left: 15,
- right: 15,
- height: 160
- },
- dataZoom: [{
- type: 'inside',
- throttle: 50
- }],
- series: [
- {
- name:'报修数',
- type:'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- sampling: 'average',
- itemStyle: {
- normal: {
- color: '#8ec6ad'
- }
- },
- stack: 'a',
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#8ec6ad'
- }, {
- offset: 1,
- color: '#ffe'
- }])
- }
- },
- data: data
- }
- ]
- };
- //alert("2.准备指定配置项");
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
- // 相当于 document.ready，{代码}
- $(function() {
- //alert("3.页面加载完毕");
- })
- </script>
- </body>
- </html>
|
