<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.datagrid-header {
position: absolute; visibility: hidden;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="basejs.jsp" %>
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div style="float: right;top:40%;right: 2%;overflow: hidden;width: auto">
<table id="xiaoshou" title="主要指标" class="easyui-datagrid" style="width: 74px;"
url="data/my_datagrid_data.json">
<thead>
<tr>
<th field="ck" checkbox="true">ck</th>
<th field="zhibiao" width="auto"></th>
</tr>
</thead>
</table>
</div>
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'));
// Based on the prepared dom, initialize the echarts instance
var data = [
{name:'2016/12/18 6:38:08', value:['2016/12/18 6:38:08', 80]},
{name:'2016/12/18 16 :18:18', value:['2016/12/18 16:18:18', 60]},
{name:'2016/12/18 19:18:18', value:['2016/12/ 18 19:18:18', 90]}
];
var anchor = [
{name:'2016/12/18 00:00:00', value:['2016/12/18 00:00:00', 0 ]},
{name:'2016/12/19 00:00:00', value:['2016/12/19 00:00:00', 0]}
];
option = {
title: {
text: 'dynamic data + time axis'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
},
{
name:'.anchor',
type:'line',
showSymbol:false,
data:anchor,
itemStyle:{normal:{opacity:0}},
lineStyle:{normal:{opacity:0}}
}]
};
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
</script>
</body>
</html>