<!DOCTYPE html>
|
<html class="no-js css-menubar" lang="zh-cn">
|
|
<head>
|
<script type="text/javascript" src="echart/echarts4.0.js"></script>
|
<link href="echart/theme/shine.js" rel="stylesheet" />
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
<script type="text/javascript" src="../../lib/jquery/jquery-2.1.4.min.js"></script>
|
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
|
<style>
|
#top10Div {
|
width: 100%;
|
height: 50%;
|
/* background-color: hotpink; */
|
/* margin-bottom: 80px; */
|
/* margin-top: 50px; */
|
}
|
|
#top10Div>table {
|
width: 100%;
|
height: 50%;
|
background-color: rgba(0, 0, 0, 0);
|
/* border-collapse:collapse; */
|
/* color: aqua; */
|
/* font: italic 400 16px "宋体"; */
|
/* border-radius: 10px; */
|
}
|
|
.no_bgc_table{
|
width: 100%;
|
height: 50%;
|
background-color: rgba(0, 0, 0, 0);
|
color:rgba(255,255,255,.7);
|
}
|
|
.no_bgc_table_head{
|
background-color: rgba(0, 0, 0, 0);
|
color:rgba(255,255,255,.7);
|
}
|
table>tr>th {
|
border-radius: 5px;
|
background-color: rgba(0, 0, 0, 0);
|
color:white;
|
}
|
|
.top_10_table tr {
|
border-bottom: 1px solid rgba(77,255,255,.5);
|
}
|
|
.my_sep{
|
width: 96%;
|
/* text-align: center; */
|
height: 2px;
|
margin-left: 2%;
|
}
|
|
.select_tr{
|
background: rgba(255,87,34,.5) !important;
|
}
|
.over_tr{
|
background: rgba(255,87,34,.8) !important;
|
}
|
</style>
|
</head>
|
<body cl>
|
<!-- <body style="padding:5px;text-align:center;background-color: azure;"> -->
|
|
<!-- <div id="chart" style="width:100%;height:310px;"></div> -->
|
<div class="layui-row">
|
<span class="layui-breadcrumb" lay-separator="|" >
|
<a href="#"></a>
|
<a href="#" style="color: white!important;">历史折线图</a>
|
<a href="#"></a>
|
</span>
|
</div>
|
<div class="layui-row">
|
<div id="echart" style="width:100%;height:300px;"></div>
|
</div>
|
<hr class="layui-border-blue my_sep">
|
<div class="layui-row">
|
<span class="layui-breadcrumb" lay-separator="|" >
|
<a href="#"></a>
|
<a href="#" style="color: white!important;">详细指标</a>
|
<a href="#"></a>
|
</span>
|
</div>
|
<div class="layui-row" style="padding-left:1%;padding-right:1%;">
|
<table id="" class="layui-table no_bgc_table top_10_table" lay-skin="nob">
|
<thead>
|
<tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;">
|
<th style="font-weight: bold;">ID</th>
|
<th style="font-weight: bold;">指标编码</th>
|
<th style="font-weight: bold;">指标名称</th>
|
<th style="font-weight: bold;">指标数值</th>
|
<th style="font-weight: bold;">指标单位</th>
|
</tr>
|
</thead>
|
<tbody id="indexTb" style="cursor: pointer;">
|
|
</tbody>
|
</table>
|
</div>
|
|
|
<div id="indexDetail" style="width:100%;height:300px;">
|
|
</div>
|
<script>
|
|
var indexData = {
|
1001:['PM25', 'PM10','NO2', 'CO','SO2']
|
,1002:['PM25', 'PM10','NO2', 'CO','SO2']
|
,1003:['PM25', 'PM10','NO2', 'CO','SO2']
|
,1004:['PM25', 'PM10','NO','NO2', 'NOX','CO']
|
,1005:['PM25', 'PM10','NO','NO2', 'NOX','CO']
|
,1006:['PM25', 'PM10','NO','NO2', 'NOX','CO']
|
}
|
|
var colorList =
|
{
|
1001:['#00EE00', '#FF9F7F', '#FFD700', '#ff6600','#ff0066']
|
,1002:['#00EE00', '#FF9F7F', '#FFD700', '#ff6600','#ff0066']
|
,1003:['#00EE00', '#FF9F7F', '#FFD700', '#ff6600','#ff0066']
|
,1004:['#00EE00', '#FF9F7F', '#FFD700', '#ff6600','#ff0066','#ff6666']
|
,1005:['#00EE00', '#FF9F7F', '#FFD700', '#ff6600','#ff0066','#ff6666']
|
,1006:['#00EE00', '#FF9F7F', '#FFD700', '#ff6600','#ff0066','#ff6666']
|
}
|
|
var myCharts;
|
//对应widget.js中MyWidget实例化后的对象
|
var thisWidget
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget
|
|
}
|
|
function loadIndexTable(siteId,cntId){
|
var dateType = parent.applyDateType();
|
var datetime = encodeURIComponent(parent.getAppDateTime());
|
var backend_url = "http://58.246.27.194:7012/dataapi/Bdata?bid=get_"+cntId+"_single_"+dateType+"&siteid="+siteId+"&datatime="+datetime;
|
//var potency = parent.applyPotency();
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
//crossDomain: true,
|
data: {},
|
async: false,//同步
|
url: backend_url,
|
//jsonp:"callback", //Jquery生成验证参数的名称
|
//processData: false,
|
//jsonpCallback: "handleCallback", // 自定义回调函数名
|
//timeout: 0,
|
success: function (data) {
|
$("#indexTb").empty();
|
var tableData = data.data.result;
|
if(tableData != null && tableData.length > 0){
|
var topObj = tableData[0];
|
var _tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>1</td><td>01</td><td>PM25</td><td>"+topObj.PM25+"</td><td>mg/m³</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>2</td><td>02</td><td>PM10</td><td>"+topObj.PM10+"</td><td>mg/m³</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>3</td><td>03</td><td>CO</td><td>"+topObj.CO+"</td><td>mg/m³</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>4</td><td>04</td><td>NO2</td><td>"+topObj.NO2+"</td><td>mg/m³</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>5</td><td>05</td><td>SO2</td><td>"+topObj.SO2+"</td><td>mg/m³</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>6</td><td>06</td><td>O31</td><td>"+topObj.O31+"</td><td>mg/m³</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>7</td><td>07</td><td>O38</td><td>"+topObj.O38+"</td><td>mg/m³</td></tr>"
|
$("#indexTb").append(_tr);
|
_tr = "<tr onmouseover='over(this)' onmouseout='out(this)' ><td>8</td><td>08</td><td>AQI</td><td>"+topObj.AQI+"</td><td>mg/m³</td></tr>"
|
$("#indexTb").append(_tr);
|
}
|
},
|
error: function (request, textStatus) {
|
|
}
|
});
|
}
|
|
function over(obj){
|
|
$('#indexTb tr').removeClass("over_tr");
|
$(obj).addClass("over_tr");
|
//obj.style.background = "rgba(255,87,34,.8)";
|
}
|
|
function out(obj){
|
|
$(obj).removeClass("over_tr");
|
}
|
|
|
function loadLineChart(siteId,cntId,cntName){
|
if(myCharts){
|
$('#echart').removeAttr('_echarts_instance_');
|
}
|
|
var dateType = parent.applyDateType();
|
var datetime = encodeURIComponent(parent.getAppDateTime());
|
var backend_url = "http://58.246.27.194:7012/dataapi/Bdata?bid=get_"+cntId+"_histoy10_"+dateType+"&siteid="+siteId+"&datatime="+datetime;
|
//console.log(backend_url);
|
//var potency = parent.applyPotency();
|
var legendData = indexData[cntId];
|
if(legendData == null || legendData.length < 1){
|
return;
|
}
|
var colorData = colorList[cntId];
|
var myItemStyle = {
|
normal: {
|
// 拐点上显示数值
|
label: {
|
show: true
|
},
|
borderColor: 'red', // 拐点边框颜色
|
lineStyle: {
|
width: 2, // 设置线宽
|
type: 'solid' //'dotted'虚线 'solid'实线
|
}
|
}
|
};
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
data: {},
|
async: false,//同步
|
url: backend_url,
|
success: function (data) {
|
var tableData = data.data.result;
|
var maxData = 100;
|
if(tableData != null && tableData.length > 0){
|
var seriesObj = {};
|
var seriesData = [];
|
var timeLineData = [];
|
for(var i=0;i<legendData.length;i++){
|
var singleLegend = legendData[i];
|
|
var sdata = {};
|
sdata.name = singleLegend;
|
sdata.data = [];
|
sdata.type = 'line';
|
sdata.symbolSize = 8;
|
sdata.itemStyle = myItemStyle;
|
seriesObj[singleLegend] = sdata;
|
}
|
for(var i=0;i<tableData.length;i++){
|
var indexObj = tableData[i];
|
timeLineData.push(indexObj.timepoint);
|
for(var j=0;j<legendData.length;j++){
|
var singleLegend = legendData[j];
|
var sdata = seriesObj[singleLegend];
|
var value = indexObj[singleLegend];
|
if(value != null && value > maxData){
|
maxData = value + 10;
|
}
|
sdata.data.push(indexObj[singleLegend])
|
}
|
}
|
for(var i=0;i<legendData.length;i++){
|
var singleLegend = legendData[i];
|
var mySeries = seriesObj[singleLegend];
|
seriesData.push(mySeries);
|
}
|
|
options = {
|
title: {
|
text: cntName,
|
textStyle: {
|
color: '#fff', //颜色
|
},
|
top: '20px',
|
x: 'center'
|
},
|
|
|
legend: {
|
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
|
orient: 'horizontal',
|
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
|
x: 'left',
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
|
y: 'top',
|
textStyle: { //图例文字的样式
|
color: '#fff',
|
},
|
data: legendData,
|
// selected: {
|
// 'CO': false,
|
// 'PM10': false,
|
// 'CO2': false
|
// },
|
color: 'white'
|
},
|
|
// 图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
|
grid: {
|
top: '20%', // 等价于 y: '16%'
|
left: '3%',
|
right: '8%',
|
bottom: '3%',
|
containLabel: true
|
},
|
|
// 提示框
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
name: '时间',
|
type: 'category',
|
axisLine: {
|
lineStyle: {
|
// 设置x轴颜色
|
color: '#912CEE'
|
}
|
},
|
// 设置X轴数据旋转倾斜
|
axisLabel: {
|
rotate: 60, // 旋转角度
|
color: '#fff', //坐标的字体颜色
|
interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
|
},
|
// boundaryGap值为false的时候，折线第一个点在y轴上
|
boundaryGap: false,
|
data: timeLineData,
|
axisLine: {
|
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
|
symbolOffset: [0, 8], //箭头段移动8个像素
|
}
|
},
|
yAxis: {
|
name: '指标',
|
type: 'value',
|
min: 0, // 设置y轴刻度的最小值
|
max: maxData, // 设置y轴刻度的最大值
|
splitNumber: 7, // 设置y轴刻度间隔个数
|
axisLine: {
|
lineStyle: {
|
// 设置y轴颜色
|
color: '#87CEFA',
|
symbol: ['none', 'arrow'], //箭头一端没效果,一端箭头
|
symbolOffset: [0, 8], //箭头段移动8个像素
|
}
|
},
|
},
|
series: seriesData,
|
color: colorData
|
};
|
|
|
//var myChart = echarts.init(document.getElementById('chart'));
|
myCharts = echarts.init(document.getElementById('echart'));
|
|
//myChart.setOption(option);
|
myCharts.setOption(options,true);
|
}
|
|
|
},
|
error: function (request, textStatus) {
|
|
}
|
});
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
