Skip to content

R
report-html-template
Commit eb1e5135 by wangmin
Options

适配修改

parent e1bcb8a1
正在显示 包含 1344 行增加 和 350 行删除
energyPredict/index.html
......@@ -68,397 +68,784 @@
var wBar = echarts.init(document.getElementById("forecast-bar-w"));
eLineOption = {
title: {
text: "月度",
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 90,
},
dataZoom: [
{
type: "slider",
show: true,
start: 0,
end: 50,
height: 20,
},
],
xAxis: {
type: "category",
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisLabel: {
formatter: "{value}月",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
media: [
//手机端
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
query: {
minWidth: 0,
maxWidth: 399,
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
option: {
title: {
text: "月度（单位:mWh）",
textStyle: {
fontSize: 14,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
},
axisLine: {
show: false,
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 55,
},
xAxis: {
type: "category",
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisLabel: {
formatter: "{value}",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
},
},
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}kWh",
textStyle: {
fontSize: 12, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
axisLabel: {
formatter: "{value}",
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
},
},
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
},
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
textStyle: {
color: "#A4A9BC",
},
},
series: [
{
name: "实际",
data: [
35572.8, 60241.6, 13831323.05, 3659438.97, 0, 0, 0, 3023.4,
3466.2, 8428.8, 54465, 0,
],
type: "line",
symbolSize: 7,
smooth: true,
itemStyle: {
color: "#37F1E7",
},
lineStyle: {
type: "solid",
color: "#37F1E7",
width: 3,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
textStyle: {
color: "#A4A9BC",
},
},
series: [
{
offset: 0,
color: `rgba(55, 241, 231,0.3)`,
name: "实际",
data: [
35572.8, 60241.6, 13831.32, 3659.43, 0, 0, 0, 3023.4,
3466.2, 8428.8, 54465, 0,
],
type: "line",
symbolSize: 7,
smooth: true,
itemStyle: {
color: "#37F1E7",
},
lineStyle: {
type: "solid",
color: "#37F1E7",
width: 3,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: `rgba(55, 241, 231,0.3)`,
},
{
offset: 1,
color: `rgba(55, 241, 231,0)`,
},
]),
shadowColor: `rgba(55, 241, 231,0.1)`,
shadowBlur: 10,
opacity: 0.5,
origin: "start",
},
},
{
offset: 1,
color: `rgba(55, 241, 231,0)`,
},
]),
shadowColor: `rgba(55, 241, 231,0.1)`,
shadowBlur: 10,
opacity: 0.5,
origin: "start",
name: "预测",
data: [0, 0, 0, 1232, 2232, 112, 0, 0, 0, 0, 0, 0],
type: "line",
symbolSize: 7,
smooth: true,
itemStyle: {
color: "#FB6364",
},
lineStyle: {
type: "dotted",
color: "#FB6364",
width: 3,
},
},
],
},
},
//网页端
{
name: "预测",
data: [0, 0, 0, 1232, 2232, 112, 0, 0, 0, 0, 0, 0],
type: "line",
symbolSize: 7,
smooth: true,
itemStyle: {
color: "#FB6364",
query: {
minWidth: 400,
},
lineStyle: {
type: "dotted",
color: "#FB6364",
width: 3,
option: {
title: {
text: "月度",
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 90,
},
xAxis: {
type: "category",
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisLabel: {
formatter: "{value}月",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
},
},
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}mWh",
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
},
},
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
textStyle: {
color: "#A4A9BC",
},
},
series: [
{
name: "实际",
data: [
35572.8, 60241.6, 13831.32, 3659.43, 0, 0, 0, 3023.4,
3466.2, 8428.8, 54465, 0,
],
type: "line",
symbolSize: 7,
smooth: true,
itemStyle: {
color: "#37F1E7",
},
lineStyle: {
type: "solid",
color: "#37F1E7",
width: 3,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: `rgba(55, 241, 231,0.3)`,
},
{
offset: 1,
color: `rgba(55, 241, 231,0)`,
},
]),
shadowColor: `rgba(55, 241, 231,0.1)`,
shadowBlur: 10,
opacity: 0.5,
origin: "start",
},
},
{
name: "预测",
data: [0, 0, 0, 1232, 2232, 112, 0, 0, 0, 0, 0, 0],
type: "line",
symbolSize: 7,
smooth: true,
itemStyle: {
color: "#FB6364",
},
lineStyle: {
type: "dotted",
color: "#FB6364",
width: 3,
},
},
],
},
},
],
};
eBarOption = {
title: {
text: "年度",
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 105,
// dataType === "electricity" ? 90 : 40,
},
xAxis: {
type: "category",
data: ["2017", "2018", "2019", "2020", "2021", "2022", "2023"],
axisLabel: {
formatter: "{value}年",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
media: [
//手机端
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
query: { minWidth: 0, maxWidth: 399 },
option: {
title: {
text: "年度（单位:mWh）",
textStyle: {
fontSize: 14,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
},
axisLine: {
show: false,
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 62,
// dataType === "electricity" ? 90 : 40,
},
xAxis: {
type: "category",
data: ["2017", "2018", "2019", "2020", "2021", "2022", "2023"],
axisLabel: {
rotate: -50,
formatter: "{value}",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
},
},
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}kWh",
// dataType === "electricity" ? "{value}kWh" : "{value}m³",
textStyle: {
fontSize: 12, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
axisLabel: {
formatter: "{value}",
// dataType === "electricity" ? "{value}kWh" : "{value}m³",
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
},
},
// min: min,
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
itemWidth: 7,
itemHeight: 7,
textStyle: {
color: "#A4A9BC",
},
},
series: [
{
name: "实际",
data: [250000, 0, 0, 0, 0, 0, 2300.86],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(63,241,217,0.2)` },
{ offset: 1, color: "#3FF1D9" },
]),
},
barGap: "0%",
barWidth: 15,
},
{
name: "预测",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
data: [24000, 0, 0, 0, 0, 1252, 2300],
type: "bar",
itemStyle: {
color: `rgba(251,99,100,0.2)`,
borderColor: "#FB6364",
borderWidth: 2,
borderType: "dashed",
},
barWidth: 15,
},
],
},
// min: min,
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
itemWidth: 7,
itemHeight: 7,
textStyle: {
color: "#A4A9BC",
},
},
dataZoom: [
{
type: "slider",
show: true,
start: 0,
end: 40,
height: 20,
},
],
series: [
{
name: "实际",
data: [250000000, 0, 0, 0, 0, 0, 2300.86],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(63,241,217,0.2)` },
{ offset: 1, color: "#3FF1D9" },
]),
},
barGap: "0%",
barWidth: 20,
},
//网页端
{
name: "预测",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
data: [2400, 0, 0, 0, 0, 1252, 2300],
type: "bar",
itemStyle: {
color: `rgba(251,99,100,0.2)`,
borderColor: "#FB6364",
borderWidth: 2,
borderType: "dashed",
query: { minWidth: 400 },
option: {
title: {
text: "年度",
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 100,
// dataType === "electricity" ? 90 : 40,
},
xAxis: {
type: "category",
data: ["2017", "2018", "2019", "2020", "2021", "2022", "2023"],
axisLabel: {
formatter: "{value}年",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
},
},
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}mWh",
// dataType === "electricity" ? "{value}kWh" : "{value}m³",
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
},
},
// min: min,
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
itemWidth: 7,
itemHeight: 7,
textStyle: {
color: "#A4A9BC",
},
},
series: [
{
name: "实际",
data: [250000, 0, 0, 0, 0, 0, 2300.86],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(63,241,217,0.2)` },
{ offset: 1, color: "#3FF1D9" },
]),
},
barGap: "0%",
barWidth: 20,
},
{
name: "预测",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
data: [2400, 0, 0, 0, 0, 1252, 2300],
type: "bar",
itemStyle: {
color: `rgba(251,99,100,0.2)`,
borderColor: "#FB6364",
borderWidth: 2,
borderType: "dashed",
},
barWidth: 20,
},
],
},
barWidth: 20,
},
],
};
wBarOption = {
title: {
text: "年度",
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 60,
},
xAxis: {
type: "category",
data: ["2017", "2018", "2019", "2020", "2021", "2022", "2023"],
axisLabel: {
formatter: "{value}年",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
media: [
//手机端
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
query: {
minWidth: 0,
maxWidth: 399,
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
option: {
title: {
text: "年度（单位:kt）",
textStyle: {
fontSize: 14,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
},
axisLine: {
show: false,
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 45,
},
xAxis: {
type: "category",
data: ["2017", "2018", "2019", "2020", "2021", "2022", "2023"],
axisLabel: {
rotate: -50,
formatter: "{value}",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
},
},
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}m³",
textStyle: {
fontSize: 12, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
axisLabel: {
formatter: "{value}",
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
},
},
// min: min,
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
itemWidth: 7,
itemHeight: 7,
textStyle: {
color: "#A4A9BC",
},
},
series: [
{
name: "实际",
data: [1300, 0, 0, 0, 0, 0, 29],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(0,221,255,0.2)` },
{ offset: 1, color: "#00DDFF" },
]),
},
barGap: "0%",
barWidth: 15,
},
{
name: "预测",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
data: [100, 0, 0, 0, 0, 0, 112],
type: "bar",
itemStyle: {
color: `rgba(251,99,100,0.2)`,
borderColor: "#FB6364",
borderWidth: 2,
borderType: "dashed",
},
barWidth: 15,
},
],
},
// min: min,
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
itemWidth: 7,
itemHeight: 7,
textStyle: {
color: "#A4A9BC",
},
},
dataZoom: [
{
type: "slider",
show: true,
start: 0,
end: 50,
height: 20,
},
],
series: [
{
name: "实际",
data: [30, 0, 0, 0, 0, 0, 29],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(0,221,255,0.2)` },
{ offset: 1, color: "#00DDFF" },
]),
},
barGap: "0%",
barWidth: 20,
},
//网页端
{
name: "预测",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
query: {
minWidth: 400,
},
data: [100, 0, 0, 0, 0, 0, 112],
type: "bar",
itemStyle: {
color: `rgba(251,99,100,0.2)`,
borderColor: "#FB6364",
borderWidth: 2,
borderType: "dashed",
option: {
title: {
text: "年度",
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 60,
},
xAxis: {
type: "category",
data: ["2017", "2018", "2019", "2020", "2021", "2022", "2023"],
axisLabel: {
formatter: "{value}年",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
},
},
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}kt",
textStyle: {
fontSize: 14, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
},
},
// min: min,
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
itemWidth: 7,
itemHeight: 7,
textStyle: {
color: "#A4A9BC",
},
},
series: [
{
name: "实际",
data: [3000, 0, 0, 0, 0, 0, 29],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(0,221,255,0.2)` },
{ offset: 1, color: "#00DDFF" },
]),
},
barGap: "0%",
barWidth: 20,
},
{
name: "预测",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
data: [100, 0, 0, 0, 0, 0, 112],
type: "bar",
itemStyle: {
color: `rgba(251,99,100,0.2)`,
borderColor: "#FB6364",
borderWidth: 2,
borderType: "dashed",
},
barWidth: 20,
},
],
},
barWidth: 20,
},
],
};
......
energyPredict/index11.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"
/>
<title>能耗数据预测报告</title>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 如果你没有echarts.min.js文件，用下面的语句代替即可
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
-->
<link rel="stylesheet" href="../../../index.css" />
<style></style>
</head>
<body>
<div class="left-top"></div>
<div class="right-top"></div>
<div class="left-bottom"></div>
<div class="right-bottom"></div>
<div class="report-title-bg">
<img src="../../../assets/report-header.png" />
</div>
<div class="report-title">
<span class="report-title-text">能耗数据预测报告</span>
</div>
<div class="dian-wrapper">
<img src="../../../assets/dian.svg" />
<div class="dian-main">
<img class="dian-zs-1" src="../../../assets/zs.svg" />
<img class="dian-ys-1" src="../../../assets/ys.svg" />
<img class="dian-zx-1" src="../../../assets/zx.svg" />
<img class="dian-yx-1" src="../../../assets/yx.svg" />
<div class="dian-box1" id="forecast-line-e"></div>
<img class="dian-zs-2" src="../../../assets/zs.svg" />
<img class="dian-ys-2" src="../../../assets/ys.svg" />
<img class="dian-zx-2" src="../../../assets/zx.svg" />
<img class="dian-yx-2" src="../../../assets/yx.svg" />
<div class="dian-box2" id="forecast-bar-e"></div>
</div>
</div>
<div class="shui-wrapper">
<img src="../../../assets/shui.svg" />
<img class="shui-zs" src="../../../assets/zs.svg" />
<img class="shui-ys" src="../../../assets/ys.svg" />
<img class="shui-zx" src="../../../assets/zx.svg" />
<img class="shui-yx" src="../../../assets/yx.svg" />
<div class="shui-box" id="forecast-bar-w"></div>
</div>
<div class="yuny-wrapper">
<img src="../../../assets/yuny.svg" />
<div class="advise-wrapper-content">
<div class="advise-wrapper-content-item">
<img src="../../../assets/icon.png" />
<div
class="advise-wrapper-content-item-text"
th:text="${suggestions}"
>
根据去年用能情况，预测今年8、9月出现园区限电概率较大，预测6、7月出现全年用电高峰概率较大，请园区做好用电负荷维护与设备巡查工作，增加巡检频次。
</div>
</div>
</div>
</div>
<!--月 电-->
<!--实际-->
<input type="hidden" th:value="${actualJan}" id="actualJan" />
<input type="hidden" th:value="${actualFeb}" id="actualFeb" />
<input type="hidden" th:value="${actualMar}" id="actualMar" />
<input type="hidden" th:value="${actualApr}" id="actualApr" />
<input type="hidden" th:value="${actualMay}" id="actualMay" />
<input type="hidden" th:value="${actualJun}" id="actualJun" />
<input type="hidden" th:value="${actualJul}" id="actualJul" />
<input type="hidden" th:value="${actualAug}" id="actualAug" />
<input type="hidden" th:value="${actualSep}" id="actualSep" />
<input type="hidden" th:value="${actualOct}" id="actualOct" />
<input type="hidden" th:value="${actualNov}" id="actualNov" />
<input type="hidden" th:value="${actualDec}" id="actualDec" />
<!--预测-->
<input type="hidden" th:value="${forecastJan}" id="forecastJan" />
<input type="hidden" th:value="${forecastFeb}" id="forecastFeb" />
<input type="hidden" th:value="${forecastMar}" id="forecastMar" />
<input type="hidden" th:value="${forecastApr}" id="forecastApr" />
<input type="hidden" th:value="${forecastMay}" id="forecastMay" />
<input type="hidden" th:value="${forecastJun}" id="forecastJun" />
<input type="hidden" th:value="${forecastJul}" id="forecastJul" />
<input type="hidden" th:value="${forecastAug}" id="forecastAug" />
<input type="hidden" th:value="${forecastSep}" id="forecastSep" />
<input type="hidden" th:value="${forecastOct}" id="forecastOct" />
<input type="hidden" th:value="${forecastNov}" id="forecastNov" />
<input type="hidden" th:value="${forecastDec}" id="forecastDec" />
<!--年 电-->
<!--实际-->
<input type="hidden" th:value="${actualYearEOne}" id="actualYearEOne" />
<input type="hidden" th:value="${actualYearETwo}" id="actualYearETwo" />
<input type="hidden" th:value="${actualYearEThree}" id="actualYearEThree" />
<input type="hidden" th:value="${actualYearEFour}" id="actualYearEFour" />
<input type="hidden" th:value="${actualYearEFive}" id="actualYearEFive" />
<input type="hidden" th:value="${actualYearESix}" id="actualYearESix" />
<input type="hidden" th:value="${actualYearESeven}" id="actualYearESeven" />
<!--预测-->
<input type="hidden" th:value="${forecastYearEOne}" id="forecastYearEOne" />
<input type="hidden" th:value="${forecastYearETwo}" id="forecastYearETwo" />
<input
type="hidden"
th:value="${forecastYearEThree}"
id="forecastYearEThree"
/>
<input
type="hidden"
th:value="${forecastYearEFour}"
id="forecastYearEFour"
/>
<input
type="hidden"
th:value="${forecastYearEFive}"
id="forecastYearEFive"
/>
<input type="hidden" th:value="${forecastYearESix}" id="forecastYearESix" />
<input
type="hidden"
th:value="${forecastYearESeven}"
id="forecastYearESeven"
/>
<!--年 水-->
<!--实际-->
<input type="hidden" th:value="${actualYearWOne}" id="actualYearWOne" />
<input type="hidden" th:value="${actualYearWTwo}" id="actualYearWTwo" />
<input type="hidden" th:value="${actualYearWThree}" id="actualYearWThree" />
<input type="hidden" th:value="${actualYearWFour}" id="actualYearWFour" />
<!--预测-->
<input type="hidden" th:value="${forecastYearWOne}" id="forecastYearWOne" />
<input type="hidden" th:value="${forecastYearWTwo}" id="forecastYearWTwo" />
<input
type="hidden"
th:value="${forecastYearWThree}"
id="forecastYearWThree"
/>
<input
type="hidden"
th:value="${forecastYearWFour}"
id="forecastYearWFour"
/>
<script type="text/javascript">
var eLine = echarts.init(document.getElementById("forecast-line-e"));
var eBar = echarts.init(document.getElementById("forecast-bar-e"));
var wBar = echarts.init(document.getElementById("forecast-bar-w"));
eLineOption = {
title: {
text: "月度",
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 90,
},
xAxis: {
type: "category",
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisLabel: {
formatter: "{value}月",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
},
},
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}mWh",
textStyle: {
fontSize: 12, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
},
},
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
textStyle: {
color: "#A4A9BC",
},
},
dataZoom: [
{
type: "slider",
show: true,
start: 0,
end: 50,
height: 20,
},
],
series: [
{
name: "实际",
data: [
{ value: $("#actualJan").val() },
{ value: $("#actualFeb").val() },
{ value: $("#actualMar").val() },
{ value: $("#actualApr").val() },
{ value: $("#actualMay").val() },
{ value: $("#actualJun").val() },
{ value: $("#actualJul").val() },
{ value: $("#actualAug").val() },
{ value: $("#actualSep").val() },
{ value: $("#actualOct").val() },
{ value: $("#actualNov").val() },
{ value: $("#actualDec").val() },
],
type: "line",
symbolSize: 7,
smooth: true,
itemStyle: {
color: "#37F1E7",
},
lineStyle: {
type: "solid",
color: "#37F1E7",
width: 3,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: `rgba(55, 241, 231,0.3)`,
},
{
offset: 1,
color: `rgba(55, 241, 231,0)`,
},
]),
shadowColor: `rgba(55, 241, 231,0.1)`,
shadowBlur: 10,
opacity: 0.5,
origin: "start",
},
},
{
name: "预测",
data: [
{ value: $("#forecastJan").val() },
{ value: $("#forecastFeb").val() },
{ value: $("#forecastMar").val() },
{ value: $("#forecastApr").val() },
{ value: $("#forecastMay").val() },
{ value: $("#forecastJun").val() },
{ value: $("#forecastJul").val() },
{ value: $("#forecastAug").val() },
{ value: $("#forecastSep").val() },
{ value: $("#forecastOct").val() },
{ value: $("#forecastNov").val() },
{ value: $("#forecastDec").val() },
],
type: "line",
symbolSize: 7,
smooth: true,
itemStyle: {
color: "#FB6364",
},
lineStyle: {
type: "dotted",
color: "#FB6364",
width: 3,
},
},
],
};
eBarOption = {
title: {
text: "年度",
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 90,
// dataType === "electricity" ? 90 : 40,
},
xAxis: {
type: "category",
data: ["2017", "2018", "2019", "2020", "2021", "2022", "2023"],
axisLabel: {
formatter: "{value}年",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
},
},
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}mWh",
// dataType === "electricity" ? "{value}mWh" : "{value}m³",
textStyle: {
fontSize: 12, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
},
},
// min: min,
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
itemWidth: 7,
itemHeight: 7,
textStyle: {
color: "#A4A9BC",
},
},
dataZoom: [
{
type: "slider",
show: true,
start: 0,
end: 50,
height: 20,
},
],
series: [
{
name: "实际",
data: [
{ value: $("#actualYearEOne").val() },
{ value: $("#actualYearETwo").val() },
{ value: $("#actualYearEThree").val() },
{ value: $("#actualYearEFour").val() },
{ value: $("#actualYearEFive").val() },
{ value: $("#actualYearESix").val() },
{ value: $("#actualYearESeven").val() },
],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(63,241,217,0.2)` },
{ offset: 1, color: "#3FF1D9" },
]),
},
barGap: "0%",
barWidth: 20,
},
{
name: "预测",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
data: [
{ value: $("#forecastYearEOne").val() },
{ value: $("#forecastYearETwo").val() },
{ value: $("#forecastYearEThree").val() },
{ value: $("#forecastYearEFour").val() },
{ value: $("#forecastYearEFive").val() },
{ value: $("#forecastYearESix").val() },
{ value: $("#forecastYearESeven").val() },
],
type: "bar",
itemStyle: {
color: `rgba(251,99,100,0.2)`,
borderColor: "#FB6364",
borderWidth: 2,
borderType: "dashed",
},
barWidth: 20,
},
],
};
wBarOption = {
title: {
text: "年度",
textStyle: {
fontSize: 16,
fontWeight: 400,
color: "#fff",
lineHeight: 12,
},
},
grid: {
top: 50,
right: 10,
bottom: 40,
borderWidth: 1,
left: 60,
},
xAxis: {
type: "category",
data: ["2020", "2021", "2022", "2023"],
axisLabel: {
formatter: "{value}年",
interval: 0,
textStyle: {
fontSize: 14,
color: "#A4A9BC",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
nameTextStyle: {
fontSize: 14,
color: "#A4A9BC",
},
type: "value",
minInterval: 20,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#A4A9BC",
},
},
axisLine: {
show: false,
},
axisLabel: {
formatter: "{value}m³",
textStyle: {
fontSize: 12, //更改坐标轴文字大小
color: "#A4A9BC",
padding: [0, 0, 0, 0],
},
},
// min: min,
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: ["实际", "预测"],
x: "right",
y: "top",
itemWidth: 7,
itemHeight: 7,
textStyle: {
color: "#A4A9BC",
},
},
dataZoom: [
{
type: "slider",
show: true,
start: 0,
end: 50,
height: 20,
},
],
series: [
{
name: "实际",
data: [
{ value: $("#actualYearWOne").val() },
{ value: $("#actualYearWTwo").val() },
{ value: $("#actualYearWThree").val() },
{ value: $("#actualYearWFour").val() },
],
type: "bar",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `rgba(0,221,255,0.2)` },
{ offset: 1, color: "#00DDFF" },
]),
},
barGap: "0%",
barWidth: 20,
},
{
name: "预测",
showBackground: true,
backgroundStyle: {
color: "rgba(255, 255, 255, 0.05)",
},
data: [
{ value: $("#forecastYearWOne").val() },
{ value: $("#forecastYearWTwo").val() },
{ value: $("#forecastYearWThree").val() },
{ value: $("#forecastYearWFour").val() },
],
type: "bar",
itemStyle: {
color: `rgba(251,99,100,0.2)`,
borderColor: "#FB6364",
borderWidth: 2,
borderType: "dashed",
},
barWidth: 20,
},
],
};
eLineOption && eLine.setOption(eLineOption);
eBarOption && eBar.setOption(eBarOption);
wBarOption && wBar.setOption(wBarOption);
window.onresize = function () {
eLine.resize();
eBar.resize();
wBar.resize();
};
</script>
</body>
</html>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论