jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-27 18:59:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

实现系统总览、统计分析的图标数据接口

Browse Source
This commit is contained in:
lixiaoyuan
2025-07-31 17:56:08 +08:00
parent 0958fcc224
commit 697193a7aa
19 changed files with 984 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

485
bin/Release/assets/html/js/common.js
View File

@@ -1,238 +1,261 @@
var G = {
user: { username: '' },
user: { username: '' },
loadPage: function (pagename) {
while (1) {
var script = document.querySelector("script[id='mytempfile']")
if (!script) break
script.remove()
}
var file = 'assets/html/pages/' + pagename + '.html'
G.cppNative.readFile(file).then(function (text) {
// 加载 html 页面内容文件
document.getElementById('mypage').innerHTML = text
// 加载 js 脚本文件
var jsUrl = './pages/' + pagename + '.js'
var element = document.createElement('script')
element.src = jsUrl + '?t=' + new Date().getTime()
element.async = false // 脚本按照加载先后顺序处理
element.setAttribute('id', 'mytempfile')
document.body.appendChild(element)
})
},
switchSetStatus: function (id1, id2, checked, callback) {
document.getElementById(id2).checked = !(document.getElementById(id1).checked = checked)
if (callback) callback(checked)
},
switchGetStatus: function (id) { return document.getElementById(id).checked },
initTable: function (id, info) {
if (info.table) {
info.table.ajax.reload()
return;
}
var tableOption = G.tableGetOption()
tableOption.columns = info.columns
tableOption.ajax = function (req, callback, settings) {
G.cppNative.log('lxy=== table ajax start')
if (info.query) {
info.query(1, 10).then(res => {
var result = []
res.data.forEach(function (item, index) {
var rowData = []
info.header.forEach(function (key, index) { rowData.push(item[key]) })
result.push(rowData)
})
G.cppNative.log("table ajax: " + JSON.stringify(result))
callback({ draw: req.draw, recordsTotal: result.length, recordsFiltered: result.length, data: result })
})
} else {
callback({ draw: req.draw, recordsTotal: 0, recordsFiltered: 0, data: [] })
}
}
// 初始化表格
info.table = $('#' + id + 'Table').DataTable(tableOption)
G.cppNative.log('lxy=== table init end')
//$('div.gotopage').html('<b style="color:#7f8fa4">跳转至 </b><input id="searchNumber" style="width:80px"/><b style="color:#7f8fa4;"> 页</b>')
},
updateTableData: function (queryFunc, params) {
if (queryFunc) {
}
},
cppCall: function (id) {
var cppfunc = G.cppNative[id]
if (cppfunc) {
G.cppNative.log('call cpp function [' + id + ']')
cppfunc()
} else {
G.cppNative.log('call cpp function [' + id + '] error: not exist')
}
},
cppSignal: function (id, callback) {
var signal = G.cppNative[id]
if (signal) {
G.cppNative.log('cpp signal [' + id + '] ')
signal.connect(callback)
} else {
G.cppNative.log('cpp signal [' + id + '] error: not exist')
}
},
initForm: function (id, funcPopConfirm) {
var form = document.getElementById(id + 'Form')
var formBtnOk = document.getElementById(id + 'FormOk')
if (form && formBtnOk) {
// 监听表单的输入事件，检查表单的必填项是否完成输入，如果未完成，则确认按钮不可用
form.addEventListener('input', function () { formBtnOk.disabled = !form.checkValidity() })
// 编辑弹窗的确定按钮监听点击事件
formBtnOk.addEventListener('click', function () { if (funcPopConfirm) { funcPopConfirm(id) } })
}
},
showElement: function (id, visible) {
var elemt = document.getElementById(id)
if (elemt) { elemt.style.display = visible ? 'block' : 'none' }
},
popSetParams: function (id, keys, rowdata, callback) {
keys.forEach(function (key, index) {
var val = ''
if (rowdata && rowdata.length > index) { val = rowdata[index] }
if (key == 'is_open') {
G.switchSetStatus(id + 'Form_on', id + 'Form_off', parseInt(val))
} else {
var myval = (callback) ? callback(id, key, val) : val
// 回调函数返回 undefined 时， 不需要设置参数值
if (myval != undefined) {
val = myval
var element = $('#' + id + 'Form_' + key)
if (element) {
if (element.prop("tagName") == "SELECT" && val == '') {
element.get(0).selectedIndex = 0;
} else {
element.val(val)
}
}
}
}
})
},
popGetParams: function (id, keys, rowdata, callback) {
var params = {}
keys.forEach(function (key, index) {
var val
if (key == 'is_open') {
val = G.switchGetStatus(id + 'Form_on') ? '1' : '0'
} else {
var myval = callback ? callback(id, key) : undefined
val = myval != undefined ? myval : $('#' + id + 'Form_' + key).val()
}
if (rowdata) {
if (rowdata.length > index && val != rowdata[index]) { params[key] = val }
} else {
if (val != '') { params[key] = val }
}
})
G.cppNative.log('POP get params： id=' + id + ', params=' + JSON.stringify(params))
return params
},
popSetParamReadonly: function (id, key, isReadonly) {
$('#' + id + 'Form_' + key).attr('readonly', isReadonly)
},
tableGetOption: function () {
return {
data: [],
columns: [],
bSort: false,
scollY: "600px",
//aLengthMenu: [10, 20, 50, 100], //设置每页显示数据条数的下拉选项
//displayLength: 5, //每页初始显示最大记录数量
// 设置：表格（t）、分页数据条数（l）、搜索框（f）、表格信息（i）、分页（p）、加载信息（r）
dom: 'rt<"mydt-ext"p<"item"<"gotopage">><"item"i><"item"f>>',
language: {
emptyTable: '无数据',
lengthMenu: '每页显示 _MENU_ 条记录',
zeroRecords: '对不起，查询不到任何相关数据',
info: '共有 _TOTAL_ 条记录', // '当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录',
infoEmpty: '共 0 页',
infoFiltered: '数据表中共为 _MAX_ 条记录)',
processing: '正在加载中...',
search: '结果中搜索',
paginate: {
previous: '上一页', next: '下一页', first: '首页', last: '尾页'
},
},
columnDefs: [{ targets: '_all', className: 'dt-head-left' }, { targets: '_all', className: 'dt-body-left' }],
//serverSide: true,
processing: false,
ajax: function (req, callback, settings) {
// 查询服务器获取数据， 同时获取总数据条数
callback({ draw: req.draw, recordsTotal: 0, recordsFiltered: 0, data: [] })
},
createdRow: function (row, data, dataIndex) {
if (dataIndex % 2 === 0) {
//$(row).css('background-color', '#ff000010')
} else {
//$(row).css('background-color', '#00ff0010')
}
$(row).on('mouseenter', function () {
//if (curEditRow && myTableApi.row(curEditRow).index() == myTableApi.row($(this)).index()) return
$(this).css('background-color', '#ff808050') // 高亮颜色
})
$(row).on('mouseleave', function () {
//if (curEditRow && myTableApi.row(curEditRow).index() == myTableApi.row($(this)).index()) return
$(this).css('background-color', '') // 恢复默认
})
},
}
},
clickSubpageBtn: function (id) {
if (G.curSubpageId == id) return
if (G.curSubpageId) {
var oldBtn = document.getElementById(G.curSubpageId + 'Btn')
if (oldBtn) { oldBtn.className = 'btn btn-primary' }
var oldSubpage = $('#' + G.curSubpageId)
if (oldSubpage) { oldSubpage.hide() }
}
if (id) {
var curBtn = document.getElementById(id + 'Btn')
if (curBtn) { curBtn.className = 'btn btn-success btn-lg' }
var curSubpage = $('#' + id)
if (curSubpage) { curSubpage.show() }
}
G.curSubpageId = id
},
getRandDataDay: function (a, b, n) {
var data = []
var t0 = Date.parse('2025-03-01 00:00:00')
if (!n) { n = 24 }
var step = 86400 / n
var y = a;
for (var i = 0; i < n; ++i) {
// data[i] = { x: t0 + i * step * 1000, y: Math.sin(i * 0.1) * (n - m) }
y = Math.floor((y + RAND(0, 50) - 25) * 100) / 100
data[i] = { x: t0 + i * step * 1000, y: y }
}
return data
loadPage: function (pagename) {
while (1) {
var script = document.querySelector("script[id='mytempfile']")
if (!script) break
script.remove()
}
var file = 'assets/html/pages/' + pagename + '.html'
G.cppNative.readFile(file).then(function (text) {
// 加载 html 页面内容文件
document.getElementById('mypage').innerHTML = text
// 加载 js 脚本文件
var jsUrl = './pages/' + pagename + '.js'
var element = document.createElement('script')
element.src = jsUrl + '?t=' + new Date().getTime()
element.async = false // 脚本按照加载先后顺序处理
element.setAttribute('id', 'mytempfile')
document.body.appendChild(element)
})
},
switchSetStatus: function (id1, id2, checked, callback) {
document.getElementById(id2).checked = !(document.getElementById(id1).checked = checked)
if (callback) callback(checked)
},
switchGetStatus: function (id) { return document.getElementById(id).checked },
initTable: function (id, info) {
if (info.table) {
info.table.ajax.reload()
return;
}
var tableOption = G.tableGetOption()
tableOption.columns = info.columns
tableOption.ajax = function (req, callback, settings) {
G.cppNative.log('lxy=== table ajax start')
if (info.query) {
info.query(1, 10).then(res => {
var result = []
res.data.forEach(function (item, index) {
var rowData = []
info.header.forEach(function (key, index) { rowData.push(item[key]) })
result.push(rowData)
})
G.cppNative.log("table ajax: " + JSON.stringify(result))
callback({ draw: req.draw, recordsTotal: result.length, recordsFiltered: result.length, data: result })
})
} else {
callback({ draw: req.draw, recordsTotal: 0, recordsFiltered: 0, data: [] })
}
}
// 初始化表格
info.table = $('#' + id + 'Table').DataTable(tableOption)
G.cppNative.log('lxy=== table init end')
//$('div.gotopage').html('<b style="color:#7f8fa4">跳转至 </b><input id="searchNumber" style="width:80px"/><b style="color:#7f8fa4;"> 页</b>')
},
updateTableData: function (queryFunc, params) {
if (queryFunc) {
}
},
cppCall: function (id) {
var cppfunc = G.cppNative[id]
if (cppfunc) {
G.cppNative.log('call cpp function [' + id + ']')
cppfunc()
} else {
G.cppNative.log('call cpp function [' + id + '] error: not exist')
}
},
cppSignal: function (id, callback) {
var signal = G.cppNative[id]
if (signal) {
G.cppNative.log('cpp signal [' + id + '] ')
signal.connect(callback)
} else {
G.cppNative.log('cpp signal [' + id + '] error: not exist')
}
},
initForm: function (id, funcPopConfirm) {
var form = document.getElementById(id + 'Form')
var formBtnOk = document.getElementById(id + 'FormOk')
if (form && formBtnOk) {
// 监听表单的输入事件，检查表单的必填项是否完成输入，如果未完成，则确认按钮不可用
form.addEventListener('input', function () { formBtnOk.disabled = !form.checkValidity() })
// 编辑弹窗的确定按钮监听点击事件
formBtnOk.addEventListener('click', function () { if (funcPopConfirm) { funcPopConfirm(id) } })
}
},
showElement: function (id, visible) {
var elemt = document.getElementById(id)
if (elemt) { elemt.style.display = visible ? 'block' : 'none' }
},
popSetParams: function (id, keys, rowdata, callback) {
keys.forEach(function (key, index) {
var val = ''
if (rowdata && rowdata.length > index) { val = rowdata[index] }
if (key == 'is_open') {
G.switchSetStatus(id + 'Form_on', id + 'Form_off', parseInt(val))
} else {
var myval = (callback) ? callback(id, key, val) : val
// 回调函数返回 undefined 时， 不需要设置参数值
if (myval != undefined) {
val = myval
var element = $('#' + id + 'Form_' + key)
if (element) {
if (element.prop("tagName") == "SELECT" && val == '') {
element.get(0).selectedIndex = 0;
} else {
element.val(val)
}
}
}
}
})
},
popGetParams: function (id, keys, rowdata, callback) {
var params = {}
keys.forEach(function (key, index) {
var val
if (key == 'is_open') {
val = G.switchGetStatus(id + 'Form_on') ? '1' : '0'
} else {
var myval = callback ? callback(id, key) : undefined
val = myval != undefined ? myval : $('#' + id + 'Form_' + key).val()
}
if (rowdata) {
if (rowdata.length > index && val != rowdata[index]) { params[key] = val }
} else {
if (val != '') { params[key] = val }
}
})
G.cppNative.log('POP get params： id=' + id + ', params=' + JSON.stringify(params))
return params
},
popSetParamReadonly: function (id, key, isReadonly) {
$('#' + id + 'Form_' + key).attr('readonly', isReadonly)
},
tableGetOption: function () {
return {
data: [],
columns: [],
bSort: false,
scollY: "600px",
//aLengthMenu: [10, 20, 50, 100], //设置每页显示数据条数的下拉选项
//displayLength: 5, //每页初始显示最大记录数量
// 设置：表格（t）、分页数据条数（l）、搜索框（f）、表格信息（i）、分页（p）、加载信息（r）
dom: 'rt<"mydt-ext"p<"item"<"gotopage">><"item"i><"item"f>>',
language: {
emptyTable: '无数据',
lengthMenu: '每页显示 _MENU_ 条记录',
zeroRecords: '对不起，查询不到任何相关数据',
info: '共有 _TOTAL_ 条记录', // '当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录',
infoEmpty: '共 0 页',
infoFiltered: '数据表中共为 _MAX_ 条记录)',
processing: '正在加载中...',
search: '结果中搜索',
paginate: {
previous: '上一页', next: '下一页', first: '首页', last: '尾页'
},
},
columnDefs: [{ targets: '_all', className: 'dt-head-left' }, { targets: '_all', className: 'dt-body-left' }],
//serverSide: true,
processing: false,
ajax: function (req, callback, settings) {
// 查询服务器获取数据， 同时获取总数据条数
callback({ draw: req.draw, recordsTotal: 0, recordsFiltered: 0, data: [] })
},
createdRow: function (row, data, dataIndex) {
if (dataIndex % 2 === 0) {
//$(row).css('background-color', '#ff000010')
} else {
//$(row).css('background-color', '#00ff0010')
}
$(row).on('mouseenter', function () {
//if (curEditRow && myTableApi.row(curEditRow).index() == myTableApi.row($(this)).index()) return
$(this).css('background-color', '#ff808050') // 高亮颜色
})
$(row).on('mouseleave', function () {
//if (curEditRow && myTableApi.row(curEditRow).index() == myTableApi.row($(this)).index()) return
$(this).css('background-color', '') // 恢复默认
})
},
}
},
clickSubpageBtn: function (id) {
if (G.curSubpageId == id) return
if (G.curSubpageId) {
var oldBtn = document.getElementById(G.curSubpageId + 'Btn')
if (oldBtn) { oldBtn.className = 'btn btn-primary' }
var oldSubpage = $('#' + G.curSubpageId)
if (oldSubpage) { oldSubpage.hide() }
}
if (id) {
var curBtn = document.getElementById(id + 'Btn')
if (curBtn) { curBtn.className = 'btn btn-success btn-lg' }
var curSubpage = $('#' + id)
if (curSubpage) { curSubpage.show() }
}
G.curSubpageId = id
},
getRandDataDay: function (a, b, n) {
var data = []
var t0 = Date.parse('2025-07-01 00:00:00')
if (!n) { n = 24 }
var step = 86400 / n
var y = a;
for (var i = 0; i < n; ++i) {
// data[i] = { x: t0 + i * step * 1000, y: Math.sin(i * 0.1) * (n - m) }
var x = t0 + i * step * 1000
y = Math.floor((y + RAND(0, 50) - 25) * 100) / 100
data[i] = { name: x, value: [x, y] }
}
return data
},
// 格式化日期为YYYY-MM-DD
formatDateMD: function (date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
//return `${year}-${month}-${day}`;
return `${month}-${day}`;
},
alertMessage: function (type, message) {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
const elemtParent = document.getElementById('alertBox')
if (elemtParent) { elemtParent.append(wrapper); }
}
}
function RAND(a, b) {
return a + Math.random() * (b - a)
return a + Math.random() * (b - a)
}

308
bin/Release/assets/html/js/myecharts.js
View File

@@ -1,80 +1,96 @@
var optionBar = {
animation: false,
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: { left: '2%', right: '2%', bottom: '2%', containLabel: true },
legend: {
show: true, //是否显示
orient: 'horizontal',
x: 'center', //可设定图例在左、右、居中
y: 'top', //可设定图例在上、下、居中
padding: [20, 10, 10, 50], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
// data: ['日发电电量', '日入网电量'],
textStyle: {
//图例的公用文本样式。
color: '#ffffff', // 文字的颜色。
// fontStyle: "normal", // 文字字体的风格。'italic'
// fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
// fontFamily: "sans-serif", // 文字的字体系列。
// fontSize: 12, // 文字的字体大小。
// lineHeight: 20, // 行高。
// backgroundColor: "transparent", // 文字块背景色。
// borderColor: "transparent", // 文字块边框颜色。
// borderWidth: 0, // 文字块边框宽度。
// borderRadius: 0, // 文字块的圆角。
// padding: 0, // 文字块的内边距
// shadowColor: "transparent", // 文字块的背景阴影颜色
// shadowBlur: 0, // 文字块的背景阴影长度。
// shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
// shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
// width: 50, // 文字块的宽度。 默认
// height: 40, // 文字块的高度 默认
// textBorderColor: "transparent", // 文字本身的描边颜色。
// textBorderWidth: 0, // 文字本身的描边宽度。
// textShadowColor: "transparent", // 文字本身的阴影颜色。
// textShadowBlur: 0, // 文字本身的阴影长度。
// textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
// textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
},
var optionLegend = {
show: true, //是否显示
orient: 'horizontal',
x: 'center', //可设定图例在左、右、居中
y: 'top', //可设定图例在上、下、居中
padding: [20, 10, 10, 50], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
// data: ['日发电电量', '日入网电量'],
textStyle: {
//图例的公用文本样式。
color: '#ffffff', // 文字的颜色。
// fontStyle: "normal", // 文字字体的风格。'italic'
// fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
// fontFamily: "sans-serif", // 文字的字体系列。
// fontSize: 12, // 文字的字体大小。
// lineHeight: 20, // 行高。
// backgroundColor: "transparent", // 文字块背景色。
// borderColor: "transparent", // 文字块边框颜色。
// borderWidth: 0, // 文字块边框宽度。
// borderRadius: 0, // 文字块的圆角。
// padding: 0, // 文字块的内边距
// shadowColor: "transparent", // 文字块的背景阴影颜色
// shadowBlur: 0, // 文字块的背景阴影长度。
// shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
// shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
// width: 50, // 文字块的宽度。 默认
// height: 40, // 文字块的高度 默认
// textBorderColor: "transparent", // 文字本身的描边颜色。
// textBorderWidth: 0, // 文字本身的描边宽度。
// textShadowColor: "transparent", // 文字本身的阴影颜色。
// textShadowBlur: 0, // 文字本身的阴影长度。
// textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
// textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
},
xAxis: {
type: 'category',
//data: ['2025/3/1', '2025/3/2', '2025/3/3', '2025/3/4', '2025/3/5', '2025/3/6', '2025/3/7'],
data: ['1', '2', '3', '4', '5', '6', '7'],
axisTick: { alignWithLabel: true },
axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
},
yAxis: [
{
type: 'value',
axisTick: { show: true },
axisLine: { show: true },
axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
//网格线
splitLine: { show: true, interval: 2, lineStyle: { type: 'dashed', color: 'gray' } },
},
],
series: [
// { name: '日发电电量', type: 'bar', data: [30, 28, 35, 18, 36, 27, 19], color: '#2a82e4' },
],
}
function echartGetOptionBar() {
return JSON.parse(JSON.stringify(optionBar))
var axisLabel = { color: 'white', fontSize: 12, margin: 8, interval: 'auto' };
var splitLine = { show: true, interval: 2, lineStyle: { type: 'dashed', color: 'gray' } }; //网格线
function echartGetOptionBar(yAxisLeft, yAxisRight) {
var option = {
animation: false,
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: { left: '2%', right: '2%', bottom: '2%', containLabel: true },
legend: optionLegend,
xAxis: { type: 'category', axisTick: { alignWithLabel: true }, axisLabel: axisLabel, data: [] },
yAxis: [
{
type: 'value',
show: true,
name: yAxisLeft,
nameTextStyle: { color: 'white', fontSize: 15, width: 300 },
axisTick: { show: true },
axisLine: { show: true },
axisLabel: axisLabel,
splitLine: splitLine,
//boundaryGap: [0, '100%'],
},
{
position: 'right',
type: 'value',
show: true,
name: yAxisRight,
nameTextStyle: { color: 'white', fontSize: 15, width: '160px' },
axisTick: { show: true },
axisLine: { show: true },
axisLabel: axisLabel,
splitLine: splitLine,
//boundaryGap: [0, '100%'],
}
],
series: [
// { name: '日发电电量', type: 'bar', data: [30, 28, 35, 18, 36, 27, 19], color: '#2a82e4' },
],
}
//if (yAxisLeft) { option.yAxis[0].name = yAxisLeft; }
//if (yAxisRight) { option.yAxis[1].name = yAxisRight; }
// yaxis.forEach(item => { })
//return JSON.parse(JSON.stringify(optionBar))
return option;
}
var optionAxisX_category = {
type: 'category',
//data: ['2025/3/1', '2025/3/2', '2025/3/3', '2025/3/4', '2025/3/5', '2025/3/6', '2025/3/7'],
data: ['1'],
axisTick: { alignWithLabel: true },
axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
data: [],
}
var optionAxisX_time = {
type: 'time',
splitLine: { show: false },
splitNumber: 8,
axisTick: { alignWithLabel: true },
axisLine: { lineStyle: { color: 'white' } },
@@ -84,88 +100,67 @@ var optionAxisX_time = {
var date = new Date(value)
var hour = date.getHours()
var minutes = date.getMinutes()
if (hour < 10) {
hour = '0' + hour
}
if (minutes < 10) {
minutes = '0' + minutes
}
if (hour < 10) { hour = '0' + hour }
if (minutes < 10) { minutes = '0' + minutes }
return hour + ':' + minutes
},
},
}
var optionCurve = {
animation: false,
title: [], //
grid: { left: '2%', right: '2%', bottom: '2%', containLabel: true },
legend: { show: true, orient: 'horizontal', x: 'center', y: 'top', padding: [20, 10, 10, 50], textStyle: { color: '#ffffff' }, data: [], },
tooltip: {
trigger: 'axis',
// formatter: function (params) {
// params = params[0]
// var date = new Date(params.name)
// var hour = date.getHours()
// var minutes = date.getMinutes()
// if (hour < 10) { hour = '0' + hour }
// if (minutes < 10) { minutes = '0' + minutes }
// var dateStr = hour + ':' + minutes
// return dateStr + ' ' + params.value[1]
// },
axisPointer: { animation: false },
},
xAxis: {
type: 'time',
splitLine: { show: false },
splitNumber: 8,
axisTick: { alignWithLabel: true },
axisLine: { lineStyle: { color: 'white' } },
//interval: 3600, // 设置x轴时间间隔
axisLabel: {
color: 'white',
// formatter: function (value, index) {
// var date = new Date(value)
// var hour = date.getHours()
// var minutes = date.getMinutes()
// if (hour < 10) { hour = '0' + hour }
// if (minutes < 10) { minutes = '0' + minutes }
// //return hour + ':' + minutes
// return "value"
// },
// 格式化x轴显示
formatter: function (value, index) {
var date = new Date(value)
var hour = date.getHours()
var minutes = date.getMinutes()
if (hour < 10) { hour = '0' + hour }
if (minutes < 10) { minutes = '0' + minutes }
return hour + ':' + minutes
// alert(new Date().toLocaleDateString())
// // 如果时间是 23:59:59 , 格式化为 24:00
// if (value === new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')).getTime()) {
// return moment(value).format("24:00");
// } else {
// // 其他的时间返回格式化 00:00
// return moment(value).format("HH:mm");
// }
}
},
},
yAxis: {
type: 'value',
axisTick: { show: true },
axisLine: { show: true, lineStyle: { color: 'white' } },
axisLabel: { color: 'white' },
splitLine: { show: true, lineStyle: { type: 'dashed', color: 'gray' } },
nameTextStyle: { color: 'white', fontSize: 15 },
boundaryGap: [0, '100%'],
},
// series: [{ name: '数据', type: 'line', hoverAnimation: false, smooth: false, symbolSize: 4, data: [] }],
}
function echartGetOptionCurve() {
optionCurve.legend.data = []
optionCurve.series = []
function echartGetOptionCurve(yAxisLeft, yAxisRight) {
var optionCurve = {
animation: false,
title: [], //
grid: { left: '2%', right: '2%', bottom: '2%', containLabel: true },
legend: optionLegend,
tooltip: { trigger: 'axis', axisPointer: { animation: false } },
xAxis: {
type: 'time',
axisTick: { alignWithLabel: true },
//axisLine: { lineStyle: { color: 'white' } },
//interval: 3600, // 设置x轴时间间隔
axisLabel: {
color: 'white',
fontSize: 12,
// 格式化x轴显示
formatter: function (value, index) {
var date = new Date(value)
var hour = date.getHours()
var minutes = date.getMinutes()
if (hour < 10) { hour = '0' + hour }
if (minutes < 10) { minutes = '0' + minutes }
return hour + ':' + minutes
}
},
},
yAxis: [
{
type: 'value',
show: true,
name: yAxisLeft,
nameTextStyle: { color: 'white', fontSize: 15 },
axisTick: { show: true },
axisLine: { show: true },
axisLabel: axisLabel,
splitLine: splitLine,
//boundaryGap: [0, '100%'],
},
{
position: 'right',
type: 'value',
show: true,
name: yAxisRight,
nameTextStyle: { color: 'white', fontSize: 15 },
axisTick: { show: true },
axisLine: { show: true },
axisLabel: axisLabel,
splitLine: splitLine,
//boundaryGap: [0, '100%'],
}
],
// series: [{ name: '数据', type: 'line', hoverAnimation: false, smooth: false, symbolSize: 4, data: [] }],
}
return optionCurve
}
@@ -177,11 +172,17 @@ function echartUpdateData(chart, index, data) {
}
}
function initEchartBar(id, seriesItems) {
function initEchartBar(id, seriesItems, xdata, yAxisLeft, yAxisRight) {
var echart = echarts.init(document.getElementById(id))
var option = echartGetOptionBar()
var option = echartGetOptionBar(yAxisLeft, yAxisRight)
option.legend.data = seriesItems
option.series = []
option.xAxis = {
type: 'category',
axisTick: { alignWithLabel: true },
axisLabel: { color: 'white', fontSize: 12, margin: 8, interval: 'auto' },
data: xdata
}
seriesItems.forEach(item => {
option.series.push({ name: item, type: 'bar', data: [] })
});
@@ -189,18 +190,18 @@ function initEchartBar(id, seriesItems) {
return echart
}
function updateEchartBar(chart, index, xdata, ydata) {
function updateEchartBar(chart, xdata, series) {
var option = chart.getOption()
option.xAxis.data = xdata
if (index < option.series.length) {
option.series[index].data = ydata
chart.setOption(option)
}
option.xAxis = { data: xdata }
//var series = [];
//ydataArray.forEach((d => { series.push({ data: d }) }))
option.series = series
chart.setOption(option)
}
function initEchartCurve(id, seriesItems) {
function initEchartCurve(id, seriesItems, yAxisLeft, yAxisRight) {
var echart = echarts.init(document.getElementById(id))
var option = echartGetOptionCurve()
var option = echartGetOptionCurve(yAxisLeft, yAxisRight)
option.legend.data = seriesItems
option.series = []
seriesItems.forEach(item => {
@@ -213,9 +214,10 @@ function initEchartCurve(id, seriesItems) {
function updateEchartCurve(chart, index, data) {
var option = chart.getOption()
if (index < option.series.length) {
for (var i = 0; i < data.length; ++i) {
option.series[index].data[i] = { name: data[i].x, value: [data[i].x, data[i].y] }
}
option.series[index].data = data
// for (var i = 0; i < data.length; ++i) {
// option.series[index].data[i] = { name: data[i].x, value: [data[i].x, data[i].y] }
// }
chart.setOption(option)
}
}