127 lines
3.2 KiB
JavaScript
127 lines
3.2 KiB
JavaScript
import * as echarts from "echarts";
|
||
|
||
export function lunarYear(year) {
|
||
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
|
||
}
|
||
|
||
export function getOptions(period, source, trend, options = {}) {
|
||
if (trend[period].length == 0) return null;
|
||
const today = new Date();
|
||
const currentYear = today.getFullYear();
|
||
const currentMonth = today.getMonth() + 1;
|
||
let days = 30;
|
||
if (period == "month") {
|
||
if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
|
||
days = 31;
|
||
} else if (currentMonth == 2) {
|
||
days = lunarYear(currentYear) ? 29 : 28;
|
||
}
|
||
}
|
||
|
||
return {
|
||
color: [
|
||
"#FFD160",
|
||
"#12FFF5",
|
||
"#2760FF",
|
||
"#E80091",
|
||
"#8064ff",
|
||
"#ff8a3b",
|
||
"#8cd26d",
|
||
"#2aa1ff",
|
||
],
|
||
grid: { top: 32, right: 12, bottom: 56, left: 56 },
|
||
xAxis: {
|
||
type: "category",
|
||
data:
|
||
source == "elec"
|
||
? trend[period].map((item) => item.time)
|
||
: // DCS 部分的数据，需要前端自行拼接x轴数据
|
||
Array(period == "week" ? 7 : period == "year" ? 12 : days)
|
||
.fill(1)
|
||
.map((_, index) => {
|
||
if (period == "week") {
|
||
const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
|
||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||
dtimestamp
|
||
).getDate()}`;
|
||
} else if (period == "month") {
|
||
return `${currentMonth}.${days - index}`;
|
||
} else {
|
||
return `${currentYear}.${12 - index}`;
|
||
}
|
||
})
|
||
.reverse(),
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
// rotate: period == 'year' ? 16 : 0,
|
||
},
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "#213259",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: source == "elec" ? "单位/kWh" : "单位/Nm³",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
align: "right",
|
||
},
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
// formatter: "{value} %",
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#213259",
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#213259a0",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data:
|
||
source == "elec"
|
||
? trend[period].map((item) =>
|
||
item.qty == null || isNaN(+item.qty)
|
||
? null
|
||
: (+item.qty).toFixed(2)
|
||
)
|
||
: trend[period].map((item) =>
|
||
item != null ? (+item).toFixed(2) : null
|
||
),
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 6,
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#FFD16040" },
|
||
{ offset: 0.5, color: "#FFD16020" },
|
||
{ offset: 1, color: "#FFD16010" },
|
||
]),
|
||
},
|
||
// smooth: true,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
className: "xc-chart-tooltip",
|
||
},
|
||
...options,
|
||
};
|
||
}
|