1172 lines
28 KiB
HTML
1172 lines
28 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>接口状态</title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../js/core/layui2.7.6/css/layui.css"/>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../css/electricity/lineStatuFrom.css" />
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 98%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
html{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
body{
|
|||
|
|
width: 97%;
|
|||
|
|
}
|
|||
|
|
.layui-table-view .layui-table td, .layui-table-view .layui-table th {
|
|||
|
|
padding: 5px 0;
|
|||
|
|
border-top: none;
|
|||
|
|
border-right: none;
|
|||
|
|
}
|
|||
|
|
.layui-table-header
|
|||
|
|
{
|
|||
|
|
margin-bottom: 0.4%;
|
|||
|
|
}
|
|||
|
|
.layui-table-header tr{
|
|||
|
|
background-image: url(../../img/index/child/titleLong.png);
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
.layui-table-header tr th{
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.layui-table-main tr{
|
|||
|
|
background-image: url(../../img/index/child/standardColumnLong.png);
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
.layui-table-main tr td{
|
|||
|
|
color: rgba(255,255,255,0.8);
|
|||
|
|
}
|
|||
|
|
.layui-table-main tr:hover{
|
|||
|
|
background-image: url(../../img/index/child/standardColumnHoverLong.png);
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
.layui-table td, .layui-table th, .layui-table-fixed-r, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
|||
|
|
border-width: 0px;
|
|||
|
|
}
|
|||
|
|
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table[lay-even] tr:nth-child(even) {
|
|||
|
|
background-color: rgba(0,0,0,0);
|
|||
|
|
}
|
|||
|
|
.layui-table {
|
|||
|
|
background-color: rgba(0,0,0,0);
|
|||
|
|
}
|
|||
|
|
.layui-laypage-count{
|
|||
|
|
color: #FFFFFF!important;
|
|||
|
|
}
|
|||
|
|
.layui-box a{
|
|||
|
|
color: #FFFFFF!important;
|
|||
|
|
}
|
|||
|
|
.layui-form-label {
|
|||
|
|
position: relative;
|
|||
|
|
float: left;
|
|||
|
|
display: block;
|
|||
|
|
padding: 12px 6px;
|
|||
|
|
width: 80px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 20px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
.layui-table-tool-self{
|
|||
|
|
display:none;
|
|||
|
|
}
|
|||
|
|
.layui-table-box {
|
|||
|
|
margin-left: 1%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-table-tool-self {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-table-page .layui-laypage input {
|
|||
|
|
width: 40px;
|
|||
|
|
background: transparent;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-table-page .layui-laypage button {
|
|||
|
|
background: transparent;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-box, .layui-box * {
|
|||
|
|
box-sizing: content-box;
|
|||
|
|
color: #00e0ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-table-view select[lay-ignore] {
|
|||
|
|
display: inline-block;
|
|||
|
|
color: white;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
.layui-form-select .layui-input {
|
|||
|
|
padding-right: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: transparent;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.layui-layer-title{
|
|||
|
|
color: #f1f1f1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="top">
|
|||
|
|
<div class="top-left" style="border: 1px solid #b3a4a4;border-radius: 30px;">
|
|||
|
|
<div class="top-left-up">
|
|||
|
|
<div class="layui-form">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label" style="font-size: 16px;color: white;">线路选择：</label>
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<select id="dropdown" name="dropdown" lay-filter="dropdown" style="width: 176px;background: transparent;color: white;">
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label" style="font-size: 16px;color: white;">日期选择：</label>
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<input type="text" class="layui-input" id="phyTimeStart" placeholder="yyyy-MM-dd" style="width: 176px;background: transparent;color: white;">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="top-left-down">
|
|||
|
|
<div class="data">
|
|||
|
|
<div class="data-title">A相电流：<div class="data-value" id="currentA">xxx </div><span>A</span></div>
|
|||
|
|
<div class="data-title">B相电流：<div class="data-value" id="currentB">xxx </div><span>A</span></div>
|
|||
|
|
<div class="data-title">C相电流：<div class="data-value" id="currentC">xxx </div><span>A</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="data">
|
|||
|
|
<div class="data-title">A相电压：<div class="data-value" id="voltageA">xxx </div><span>V</span></div>
|
|||
|
|
<div class="data-title">B相电压：<div class="data-value" id="voltageB">xxx </div><span>V</span></div>
|
|||
|
|
<div class="data-title">C相电压：<div class="data-value" id="voltageC">xxx </div><span>V</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="data">
|
|||
|
|
<div class="data-title">A相温度：<div class="data-value" id="tempA">xxx </div><span>℃</span></div>
|
|||
|
|
<div class="data-title">B相温度：<div class="data-value" id="tempB">xxx </div><span>℃</span></div>
|
|||
|
|
<div class="data-title">C相温度：<div class="data-value" id="tempC">xxx </div><span>℃</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="data">
|
|||
|
|
<div class="data-title">零线温度：<div class="data-value" id="zeroTemp">xxx </div><span>℃</span></div>
|
|||
|
|
<div class="data-title">零线电流：<div class="data-value" id="zeroCurrent">xxx </div><span>A</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="data">
|
|||
|
|
<div class="data-title">总功率：<div class="data-value" id="totalPower">xxx </div><span>W</span></div>
|
|||
|
|
<div class="data-title">剩余电流：<div class="data-value" id="residualCurrent">xxx </div><span>mA</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="top-right">
|
|||
|
|
<div class="echarts1" id="after-current"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="bottom">
|
|||
|
|
<div class="bottom-left">
|
|||
|
|
<div class="echarts1" id="temp"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom-middle">
|
|||
|
|
<div class="echarts1" id="voltage"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom-right">
|
|||
|
|
<div class="echarts1" id="current"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
<script type="text/javascript" src="../../js/core/jquery-3.6.0.js"></script>
|
|||
|
|
<script src="../../js/core/public.js" type="text/javascript"></script>
|
|||
|
|
<script src="../../js/core/echarts-v5.4.2/echarts.js"></script>
|
|||
|
|
<script src="../../js/core/layui2.7.6/layui.js"></script>
|
|||
|
|
<!--<script type="text/javascript" src="../../js/electricity/electricityFrom.js"></script>-->
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var params = new URLSearchParams(location.search);
|
|||
|
|
var mac = params.get('value');
|
|||
|
|
|
|||
|
|
layui.use(['form', 'laydate'], function(){
|
|||
|
|
var form = layui.form;
|
|||
|
|
var laydate = layui.laydate;
|
|||
|
|
// 时间选择器配置
|
|||
|
|
|
|||
|
|
getLineName('', '', mac);
|
|||
|
|
// 下拉框选择事件
|
|||
|
|
form.on('select(dropdown)', function(data){
|
|||
|
|
var selectedValue = data.value;
|
|||
|
|
generalInterface(mac, selectedValue, dateValue);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
var lineValue = $("#dropdown").val();
|
|||
|
|
var dateValue = getNowTime();
|
|||
|
|
generalInterface(mac,lineValue,dateValue);
|
|||
|
|
|
|||
|
|
laydate.render({
|
|||
|
|
elem: '#phyTimeStart',
|
|||
|
|
value: getNowTime(),
|
|||
|
|
isInitValue: true,
|
|||
|
|
done: function(value){
|
|||
|
|
dateValue = $("#phyTimeStart").val();
|
|||
|
|
lineValue = $("#dropdown").val();
|
|||
|
|
generalInterface(mac, lineValue, value);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function generalInterface(mac,lineValue,dateValue) {
|
|||
|
|
console.log(mac,lineValue,dateValue)
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
url: dataUrl + 'electricity/getGeneralInterface',
|
|||
|
|
data: {
|
|||
|
|
"mac": mac,
|
|||
|
|
"lineValue": lineValue,
|
|||
|
|
"dateValue": dateValue
|
|||
|
|
},
|
|||
|
|
dataType: 'json',
|
|||
|
|
success: function(res) {
|
|||
|
|
data = res.obj;
|
|||
|
|
document.getElementById('currentA').innerText =data.dataList[0].aa;
|
|||
|
|
document.getElementById('currentB').innerText =data.dataList[0].ba;
|
|||
|
|
document.getElementById('currentC').innerText =data.dataList[0].ca;
|
|||
|
|
document.getElementById('voltageA').innerText =data.dataList[0].av;
|
|||
|
|
document.getElementById('voltageB').innerText =data.dataList[0].bv;
|
|||
|
|
document.getElementById('voltageC').innerText =data.dataList[0].cv;
|
|||
|
|
document.getElementById('tempA').innerText =data.dataList[0].at;
|
|||
|
|
document.getElementById('tempB').innerText =data.dataList[0].bt;
|
|||
|
|
document.getElementById('tempC').innerText =data.dataList[0].ct;
|
|||
|
|
document.getElementById('zeroTemp').innerText =data.dataList[0].nt;
|
|||
|
|
document.getElementById('zeroCurrent').innerText =data.dataList[0].na;
|
|||
|
|
document.getElementById('totalPower').innerText =data.dataList[0].gw;
|
|||
|
|
document.getElementById('residualCurrent').innerText =data.dataList[0].ga;
|
|||
|
|
Residual(data);
|
|||
|
|
temp(data);
|
|||
|
|
voltage(data);
|
|||
|
|
current(data);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getLineName(from, id, mac) {
|
|||
|
|
$("#dropdown").empty();
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
url: dataUrl + 'electricity/getLineName',
|
|||
|
|
data: {
|
|||
|
|
"mac": mac,
|
|||
|
|
},
|
|||
|
|
async: false,
|
|||
|
|
success: function (data) {
|
|||
|
|
var res = data;
|
|||
|
|
var html = '';
|
|||
|
|
// html += '<option value="">请选择线路</option>';
|
|||
|
|
for (var i = 0; i < res.length; i++) {
|
|||
|
|
if (id == res[i].id) {
|
|||
|
|
html += '<option selected value=\'' + res[i].id + '\'>' + res[i].name + '</option>';
|
|||
|
|
} else {
|
|||
|
|
html += '<option value=\'' + res[i].id + '\'>' + res[i].name + '</option>';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$("#dropdown").html(html);
|
|||
|
|
|
|||
|
|
// 设置第一个选项为初始值
|
|||
|
|
var firstOptionValue = $("#dropdown option:first").val();
|
|||
|
|
$("#dropdown").val(firstOptionValue);
|
|||
|
|
|
|||
|
|
layui.form.render("select");
|
|||
|
|
},
|
|||
|
|
error: function (err) {
|
|||
|
|
console.log("获取线路数据失败：", err);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//剩余电流
|
|||
|
|
function Residual(data) {
|
|||
|
|
data.residual
|
|||
|
|
let monthlyChart = echarts.init(document.getElementById('after-current'));
|
|||
|
|
var xData = data.residual.map(function(item) {
|
|||
|
|
var time_parts = item.updateTime.split(" ")[1].split(":");
|
|||
|
|
var hour = time_parts[0];
|
|||
|
|
var minute = time_parts[1];
|
|||
|
|
return hour + ":" + minute;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var lines = data.residual.map(function(item) {
|
|||
|
|
return item.ga;
|
|||
|
|
});
|
|||
|
|
var attrs = [{
|
|||
|
|
name: "剩余电流",
|
|||
|
|
unit: ""
|
|||
|
|
}];
|
|||
|
|
option = {
|
|||
|
|
title: {
|
|||
|
|
text: '剩余电流(mA)',
|
|||
|
|
left: '1%',
|
|||
|
|
top: '5%',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#C9C8CD',
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
backgroundColor: 'none',
|
|||
|
|
padding: 5,
|
|||
|
|
formatter: function(param) {
|
|||
|
|
var resultTooltip = "";
|
|||
|
|
resultTooltip =
|
|||
|
|
"<div style='background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.2);padding:5px;border-radius:3px;'>" +
|
|||
|
|
"<div style='text-align:center;'>" + param[0].name + "</div>" +
|
|||
|
|
"<div style='padding-top:5px;'>" + "<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[0].color + ";'></span>" +
|
|||
|
|
"<span style=''> " + param[0].seriesName + ": </span>" +
|
|||
|
|
"<span style='color:" + param[0].color + "'>" + param[0].value + "</span></span><span>" + attrs[0].unit + "</span>";
|
|||
|
|
for (var i = 1; i < param.length; i++) {
|
|||
|
|
resultTooltip +=
|
|||
|
|
"<div style='padding-top:2px;'>" +
|
|||
|
|
"<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[i].color + ";'></span>" +
|
|||
|
|
"<span style=''> " + param[i].seriesName + ": </span>" +
|
|||
|
|
"<span style='color:" + param[i].color + "'>" + param[i].value + "</span><span>" + attrs[i].unit + "</span>"
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resultTooltip +=
|
|||
|
|
"</div>" +
|
|||
|
|
"</div>";
|
|||
|
|
return resultTooltip
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '10%',
|
|||
|
|
top: '20%',
|
|||
|
|
right: '5%',
|
|||
|
|
bottom: '8%',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
data: xData,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 6,
|
|||
|
|
show: true,
|
|||
|
|
fontSize: 9,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#C9C8CD" //X轴文字颜色
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
formatter: function(value) {
|
|||
|
|
var str = "";
|
|||
|
|
str += value.substring(0, 4) + "\n";
|
|||
|
|
str += value.substring(5, 10);
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true //不显示x轴
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: true //不显示刻度
|
|||
|
|
},
|
|||
|
|
boundaryGap: false,
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
width: 0.08,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: "solid",
|
|||
|
|
color: "#03202E"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisPointer: { //轴指示器
|
|||
|
|
type: 'shadow',
|
|||
|
|
z: 1,
|
|||
|
|
shadowStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(18,155,249,0)' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(18,155,249,1)' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
global: false // 缺省为 false
|
|||
|
|
},
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|||
|
|
shadowBlur: 5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
scale: true, //坐标轴起点不限制0
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 9,
|
|||
|
|
color: "#C9C8CD" //X轴文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false, //不显示刻度
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: "#FFFFFF"
|
|||
|
|
},
|
|||
|
|
splitArea: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: attrs[0].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: lines,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#0099ff',
|
|||
|
|
shadowColor: '#0099ff',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#0099ff',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
monthlyChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
//温度
|
|||
|
|
function temp(data) {
|
|||
|
|
let monthlyChart = echarts.init(document.getElementById('temp'));
|
|||
|
|
var xData = data.temp.map(function(item) {
|
|||
|
|
var time_parts = item.updateTime.split(" ")[1].split(":");
|
|||
|
|
var hour = time_parts[0];
|
|||
|
|
var minute = time_parts[1];
|
|||
|
|
return hour + ":" + minute;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var aTemp = data.temp.map(function(item) {
|
|||
|
|
return item.at;
|
|||
|
|
});
|
|||
|
|
var bTemp = data.temp.map(function(item) {
|
|||
|
|
return item.bt;
|
|||
|
|
});
|
|||
|
|
var cTemp = data.temp.map(function(item) {
|
|||
|
|
return item.ct;
|
|||
|
|
});
|
|||
|
|
var attrs = [{
|
|||
|
|
name: "A相温度",
|
|||
|
|
unit: ""
|
|||
|
|
}, {
|
|||
|
|
name: "B相温度",
|
|||
|
|
unit: ""
|
|||
|
|
}, {
|
|||
|
|
name: "C相温度",
|
|||
|
|
unit: ""
|
|||
|
|
}];
|
|||
|
|
option = {
|
|||
|
|
title: {
|
|||
|
|
text: '温度(℃)',
|
|||
|
|
left: 'left',
|
|||
|
|
top: '5%',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#C9C8CD',
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
backgroundColor: 'none',
|
|||
|
|
padding: 5,
|
|||
|
|
formatter: function(param) {
|
|||
|
|
var resultTooltip = "";
|
|||
|
|
resultTooltip =
|
|||
|
|
"<div style='background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.2);padding:5px;border-radius:3px;'>" +
|
|||
|
|
"<div style='text-align:center;'>" + param[0].name + "</div>" +
|
|||
|
|
"<div style='padding-top:5px;'>" + "<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[0].color + ";'></span>" +
|
|||
|
|
"<span style=''> " + param[0].seriesName + ": </span>" +
|
|||
|
|
"<span style='color:" + param[0].color + "'>" + param[0].value + "</span></span><span>" + attrs[0].unit + "</span>";
|
|||
|
|
for (var i = 1; i < param.length; i++) {
|
|||
|
|
resultTooltip +=
|
|||
|
|
"<div style='padding-top:2px;'>" +
|
|||
|
|
"<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[i].color + ";'></span>" +
|
|||
|
|
"<span style=''> " + param[i].seriesName + ": </span>" +
|
|||
|
|
"<span style='color:" + param[i].color + "'>" + param[i].value + "</span><span>" + attrs[i].unit + "</span>"
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resultTooltip +=
|
|||
|
|
"</div>" +
|
|||
|
|
"</div>";
|
|||
|
|
return resultTooltip
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '10%',
|
|||
|
|
top: '20%',
|
|||
|
|
right: '5%',
|
|||
|
|
bottom: '8%',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
data: xData,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 6,
|
|||
|
|
show: true,
|
|||
|
|
fontSize: 9,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#C9C8CD" //X轴文字颜色
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
formatter: function(value) {
|
|||
|
|
var str = "";
|
|||
|
|
str += value.substring(0, 4) + "\n";
|
|||
|
|
str += value.substring(5, 10);
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true //不显示x轴
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: true //不显示刻度
|
|||
|
|
},
|
|||
|
|
boundaryGap: false,
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
width: 0.08,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: "solid",
|
|||
|
|
color: "#03202E"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisPointer: { //轴指示器
|
|||
|
|
type: 'shadow',
|
|||
|
|
z: 1,
|
|||
|
|
shadowStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(18,155,249,0)' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(18,155,249,1)' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
global: false // 缺省为 false
|
|||
|
|
},
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|||
|
|
shadowBlur: 5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
scale: true, //坐标轴起点不限制0
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 9,
|
|||
|
|
color: "#C9C8CD" //X轴文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false, //不显示刻度
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: "#FFFFFF"
|
|||
|
|
},
|
|||
|
|
splitArea: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: attrs[0].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: aTemp,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#0099ff',
|
|||
|
|
shadowColor: '#0099ff',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#0099ff',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: attrs[1].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: bTemp,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#66ff66',
|
|||
|
|
shadowColor: '#66ff66',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#66ff66',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: attrs[2].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: cTemp,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#fa676c',
|
|||
|
|
shadowColor: '#fa676c',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#fa676c',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
monthlyChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
//电压
|
|||
|
|
function voltage(data) {
|
|||
|
|
let monthlyChart = echarts.init(document.getElementById('voltage'));
|
|||
|
|
var xData = data.voltage.map(function(item) {
|
|||
|
|
var time_parts = item.updateTime.split(" ")[1].split(":");
|
|||
|
|
var hour = time_parts[0];
|
|||
|
|
var minute = time_parts[1];
|
|||
|
|
return hour + ":" + minute;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var aVoltage = data.voltage.map(function(item) {
|
|||
|
|
return item.av;
|
|||
|
|
});
|
|||
|
|
var bVoltage = data.voltage.map(function(item) {
|
|||
|
|
return item.bv;
|
|||
|
|
});
|
|||
|
|
var cVoltage = data.voltage.map(function(item) {
|
|||
|
|
return item.cv;
|
|||
|
|
});
|
|||
|
|
var attrs = [{
|
|||
|
|
name: "A相电压",
|
|||
|
|
unit: ""
|
|||
|
|
}, {
|
|||
|
|
name: "B相电压",
|
|||
|
|
unit: ""
|
|||
|
|
}, {
|
|||
|
|
name: "C相电压",
|
|||
|
|
unit: ""
|
|||
|
|
}];
|
|||
|
|
option = {
|
|||
|
|
title: {
|
|||
|
|
text: '电压(V)',
|
|||
|
|
left: 'left',
|
|||
|
|
top: '5%',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#C9C8CD',
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
backgroundColor: 'none',
|
|||
|
|
padding: 5,
|
|||
|
|
formatter: function(param) {
|
|||
|
|
var resultTooltip = "";
|
|||
|
|
resultTooltip =
|
|||
|
|
"<div style='background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.2);padding:5px;border-radius:3px;'>" +
|
|||
|
|
"<div style='text-align:center;'>" + param[0].name + "</div>" +
|
|||
|
|
"<div style='padding-top:5px;'>" + "<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[0].color + ";'></span>" +
|
|||
|
|
"<span style=''> " + param[0].seriesName + ": </span>" +
|
|||
|
|
"<span style='color:" + param[0].color + "'>" + param[0].value + "</span></span><span>" + attrs[0].unit + "</span>";
|
|||
|
|
for (var i = 1; i < param.length; i++) {
|
|||
|
|
resultTooltip +=
|
|||
|
|
"<div style='padding-top:2px;'>" +
|
|||
|
|
"<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[i].color + ";'></span>" +
|
|||
|
|
"<span style=''> " + param[i].seriesName + ": </span>" +
|
|||
|
|
"<span style='color:" + param[i].color + "'>" + param[i].value + "</span><span>" + attrs[i].unit + "</span>"
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resultTooltip +=
|
|||
|
|
"</div>" +
|
|||
|
|
"</div>";
|
|||
|
|
return resultTooltip
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '10%',
|
|||
|
|
top: '20%',
|
|||
|
|
right: '5%',
|
|||
|
|
bottom: '8%',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
data: xData,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 6,
|
|||
|
|
show: true,
|
|||
|
|
fontSize: 9,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#C9C8CD" //X轴文字颜色
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
formatter: function(value) {
|
|||
|
|
var str = "";
|
|||
|
|
str += value.substring(0, 4) + "\n";
|
|||
|
|
str += value.substring(5, 10);
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true //不显示x轴
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: true //不显示刻度
|
|||
|
|
},
|
|||
|
|
boundaryGap: false,
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
width: 0.08,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: "solid",
|
|||
|
|
color: "#03202E"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisPointer: { //轴指示器
|
|||
|
|
type: 'shadow',
|
|||
|
|
z: 1,
|
|||
|
|
shadowStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(18,155,249,0)' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(18,155,249,1)' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
global: false // 缺省为 false
|
|||
|
|
},
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|||
|
|
shadowBlur: 5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
scale: true, //坐标轴起点不限制0
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 9,
|
|||
|
|
color: "#C9C8CD" //X轴文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false, //不显示刻度
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: "#FFFFFF"
|
|||
|
|
},
|
|||
|
|
splitArea: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: attrs[0].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: aVoltage,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#0099ff',
|
|||
|
|
shadowColor: '#0099ff',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#0099ff',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: attrs[1].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: bVoltage,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#66ff66',
|
|||
|
|
shadowColor: '#66ff66',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#66ff66',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: attrs[2].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: cVoltage,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#fa676c',
|
|||
|
|
shadowColor: '#fa676c',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#fa676c',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
monthlyChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
//电流
|
|||
|
|
function current(data) {
|
|||
|
|
let monthlyChart = echarts.init(document.getElementById('current'));
|
|||
|
|
var xData = data.current.map(function(item) {
|
|||
|
|
var time_parts = item.updateTime.split(" ")[1].split(":");
|
|||
|
|
var hour = time_parts[0];
|
|||
|
|
var minute = time_parts[1];
|
|||
|
|
return hour + ":" + minute;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var aCurrent = data.current.map(function(item) {
|
|||
|
|
return item.aa;
|
|||
|
|
});
|
|||
|
|
var bCurrent = data.current.map(function(item) {
|
|||
|
|
return item.ba;
|
|||
|
|
});
|
|||
|
|
var cCurrent = data.current.map(function(item) {
|
|||
|
|
return item.ca;
|
|||
|
|
});
|
|||
|
|
var attrs = [{
|
|||
|
|
name: "A相电流",
|
|||
|
|
unit: ""
|
|||
|
|
}, {
|
|||
|
|
name: "B相电流",
|
|||
|
|
unit: ""
|
|||
|
|
}, {
|
|||
|
|
name: "C相电流",
|
|||
|
|
unit: ""
|
|||
|
|
}];
|
|||
|
|
option = {
|
|||
|
|
title: {
|
|||
|
|
text: '电流(A)',
|
|||
|
|
left: 'left',
|
|||
|
|
top: '5%',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#C9C8CD',
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
backgroundColor: 'none',
|
|||
|
|
padding: 5,
|
|||
|
|
formatter: function(param) {
|
|||
|
|
var resultTooltip = "";
|
|||
|
|
resultTooltip =
|
|||
|
|
"<div style='background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.2);padding:5px;border-radius:3px;'>" +
|
|||
|
|
"<div style='text-align:center;'>" + param[0].name + "</div>" +
|
|||
|
|
"<div style='padding-top:5px;'>" + "<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[0].color + ";'></span>" +
|
|||
|
|
"<span style=''> " + param[0].seriesName + ": </span>" +
|
|||
|
|
"<span style='color:" + param[0].color + "'>" + param[0].value + "</span></span><span>" + attrs[0].unit + "</span>";
|
|||
|
|
for (var i = 1; i < param.length; i++) {
|
|||
|
|
resultTooltip +=
|
|||
|
|
"<div style='padding-top:2px;'>" +
|
|||
|
|
"<span style='display: inline-block; width: 4px; height:10px; border-radius: 5px;background-color: " + param[i].color + ";'></span>" +
|
|||
|
|
"<span style=''> " + param[i].seriesName + ": </span>" +
|
|||
|
|
"<span style='color:" + param[i].color + "'>" + param[i].value + "</span><span>" + attrs[i].unit + "</span>"
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resultTooltip +=
|
|||
|
|
"</div>" +
|
|||
|
|
"</div>";
|
|||
|
|
return resultTooltip
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '10%',
|
|||
|
|
top: '20%',
|
|||
|
|
right: '5%',
|
|||
|
|
bottom: '8%',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
data: xData,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 6,
|
|||
|
|
show: true,
|
|||
|
|
fontSize: 9,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#C9C8CD" //X轴文字颜色
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
formatter: function(value) {
|
|||
|
|
var str = "";
|
|||
|
|
str += value.substring(0, 4) + "\n";
|
|||
|
|
str += value.substring(5, 10);
|
|||
|
|
return str;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true //不显示x轴
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: true //不显示刻度
|
|||
|
|
},
|
|||
|
|
boundaryGap: false,
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
width: 0.08,
|
|||
|
|
lineStyle: {
|
|||
|
|
type: "solid",
|
|||
|
|
color: "#03202E"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisPointer: { //轴指示器
|
|||
|
|
type: 'shadow',
|
|||
|
|
z: 1,
|
|||
|
|
shadowStyle: {
|
|||
|
|
color: {
|
|||
|
|
type: 'linear',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: 'rgba(18,155,249,0)' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: 'rgba(18,155,249,1)' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
global: false // 缺省为 false
|
|||
|
|
},
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|||
|
|
shadowBlur: 5
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
scale: true, //坐标轴起点不限制0
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 9,
|
|||
|
|
color: "#C9C8CD" //X轴文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false, //不显示刻度
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: "#FFFFFF"
|
|||
|
|
},
|
|||
|
|
splitArea: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
series: [{
|
|||
|
|
name: attrs[0].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: aCurrent,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#0099ff',
|
|||
|
|
shadowColor: '#0099ff',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#0099ff',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: attrs[1].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: bCurrent,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#66ff66',
|
|||
|
|
shadowColor: '#66ff66',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#66ff66',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: attrs[2].name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: cCurrent,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 2,
|
|||
|
|
color: '#fa676c',
|
|||
|
|
shadowColor: '#fa676c',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
shadowOffsetY: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
symbol: 'emptyCircle',
|
|||
|
|
showSymbol: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#fa676c',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
monthlyChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// function getUrlParam(name) {
|
|||
|
|
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|||
|
|
// var r = window.location.search.substr(1).match(reg);
|
|||
|
|
// if (r != null) {
|
|||
|
|
// return decodeURI(r[2]);
|
|||
|
|
// }
|
|||
|
|
// return null;
|
|||
|
|
// }
|
|||
|
|
</script>
|