mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
221 lines
7.5 KiB
JavaScript
221 lines
7.5 KiB
JavaScript
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 偏移。
|
|
},
|
|
},
|
|
|
|
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 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' },
|
|
}
|
|
|
|
var optionAxisX_time = {
|
|
type: 'time',
|
|
splitLine: { show: false },
|
|
splitNumber: 8,
|
|
axisTick: { alignWithLabel: true },
|
|
axisLine: { lineStyle: { color: 'white' } },
|
|
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
|
|
},
|
|
},
|
|
}
|
|
|
|
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 = []
|
|
return optionCurve
|
|
}
|
|
|
|
function echartUpdateData(chart, index, data) {
|
|
var option = chart.getOption()
|
|
if (index < option.series.length) {
|
|
option.series[index].data = data
|
|
chart.setOption(option)
|
|
}
|
|
}
|
|
|
|
function initEchartBar(id, seriesItems) {
|
|
var echart = echarts.init(document.getElementById(id))
|
|
var option = echartGetOptionBar()
|
|
option.legend.data = seriesItems
|
|
option.series = []
|
|
seriesItems.forEach(item => {
|
|
option.series.push({ name: item, type: 'bar', data: [] })
|
|
});
|
|
echart.setOption(option)
|
|
return echart
|
|
}
|
|
|
|
function updateEchartBar(chart, index, xdata, ydata) {
|
|
var option = chart.getOption()
|
|
option.xAxis.data = xdata
|
|
if (index < option.series.length) {
|
|
option.series[index].data = ydata
|
|
chart.setOption(option)
|
|
}
|
|
}
|
|
|
|
function initEchartCurve(id, seriesItems) {
|
|
var echart = echarts.init(document.getElementById(id))
|
|
var option = echartGetOptionCurve()
|
|
option.legend.data = seriesItems
|
|
option.series = []
|
|
seriesItems.forEach(item => {
|
|
option.series.push({ name: item, type: 'line', smooth: false, symbolSize: 0, data: [] })
|
|
})
|
|
echart.setOption(option)
|
|
return echart
|
|
}
|
|
|
|
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] }
|
|
}
|
|
chart.setOption(option)
|
|
}
|
|
} |