Skip to content

Z
zh_zcb-ems
Commit 36ab4cd1 authored by huangzihao's avatar huangzihao
Browse files
Options

曲线图处理

parent 31de248d
Hide whitespace changes
Inline Side-by-side
Showing with 622 additions and 32 deletions
css/index.css
View file @ 36ab4cd1
......@@ -12,9 +12,6 @@ ul {
width: 100%;
background: url("../images/header-bg.png") no-repeat;
background-size: cover;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.header-left {
......@@ -29,13 +26,7 @@ ul {
}
.header-middle {
color: white;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
flex: 1;
display: flex;
}
.header-middle ul {
......@@ -64,10 +55,7 @@ ul {
border-bottom: 3px solid #01fff6;
}
.header-middle > div {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
flex: 1;
text-align: center;
font-size: 36px;
font-family: Source Han Sans CN;
......@@ -115,4 +103,106 @@ ul {
background-size: contain;
margin-right: 15px;
}
/*# sourceMappingURL=index.css.map */
\ No newline at end of file
.content {
display: flex;
justify-content: space-between;
}
.content .st-box {
width: 446px;
height: 281px;
position: relative;
}
.content .st-box::before,
.content .st-box::after {
position: absolute;
content: " ";
display: block;
top: 50%;
transform: translateY(-50%);
}
.content .st-box::before {
width: 25px;
height: 262px;
background: url(../images/container-left.png) no-repeat;
left: 0;
}
.content .st-box::after {
width: 251px;
height: 278px;
background: url(../images/container-right.png) no-repeat;
right: 0;
}
.content .st-box .bg-center {
display: block;
width: 170px;
height: 262px;
background: url(../images/container-center.png) repeat-x;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 25px;
}
.content .st-box .echarts-box {
position: relative;
z-index: 2;
}
.content .st-box .echarts-box .echarts-header {
justify-content: space-between;
display: flex;
}
.content .st-box .echarts-box .echarts-header .title {
font-size: 16px;
font-weight: bold;
color: #17caf0;
position: relative;
top: 32px;
left: 30px;
text-shadow: 0px 0px 3px #17caf0;
}
.content .st-box .echarts-box .legend {
user-select: none;
display: flex;
margin-top: 35px;
margin-right: 20px;
}
.content .st-box .echarts-box .legend li {
display: flex;
align-items: center;
color: #ffffff;
font-size: 14px;
margin-right: 10px;
}
.content .st-box .echarts-box .legend li::before {
margin-right: 6px;
width: 12px;
height: 12px;
border-radius: 5px;
display: block;
content: " ";
}
.content .st-box .echarts-box .legend li:nth-child(1)::before {
background: #4380f0;
}
.content .st-box .echarts-box .legend li:nth-child(2)::before {
background: #01faf2;
}
.content .st-box .echarts-box .echarts-content {
width: 380px;
height: 160px;
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
}
.content .electric-power-st-box .legend li:nth-child(1)::before {
background-color: #eef043 !important;
}
.content .electric-power-st-box .legend li:nth-child(2)::before {
background-color: #c596ff !important;
}
.content .electric-power-st-box .legend li:nth-child(3)::before {
background-color: #1d5acc !important;
}
.content .electric-power-st-box .legend li:nth-child(4)::before {
background-color: #01faf2 !important;
}
css/index.less
View file @ 36ab4cd1
......@@ -106,4 +106,125 @@ ul {
.stat-bar {
}
.content {
display: flex;
justify-content: space-between;
.st-box {
width: 446px;
height: 281px;
position: relative;
&::before,
&::after {
position: absolute;
content: " ";
display: block;
top: 50%;
transform: translateY(-50%);
}
&::before {
width: 25px;
height: 262px;
background: url(../images/container-left.png) no-repeat;
left: 0;
}
&::after {
width: 251px;
height: 278px;
background: url(../images/container-right.png) no-repeat;
right: 0;
}
.bg-center {
display: block;
width: 170px;
height: 262px;
background: url(../images/container-center.png) repeat-x;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 25px;
}
.echarts-box {
position: relative;
z-index: 2;
.echarts-header {
justify-content: space-between;
display: flex;
.title {
font-size: 16px;
font-weight: bold;
color: #17caf0;
position: relative;
top: 32px;
left: 30px;
text-shadow: 0px 0px 3px #17caf0;
}
}
.legend {
user-select: none;
display: flex;
margin-top: 35px;
margin-right: 20px;
li {
display: flex;
align-items: center;
color: #ffffff;
font-size: 14px;
margin-right: 10px;
&::before {
margin-right: 6px;
width: 12px;
height: 12px;
border-radius: 5px;
display: block;
content: " ";
}
&:nth-child(1) {
&::before {
background: #4380f0;
}
}
&:nth-child(2) {
&::before {
background: #01faf2;
}
}
}
}
.echarts-content {
width: 380px;
height: 160px;
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
}
}
}
.electric-power-st-box {
.legend {
li {
&:nth-child(1) {
&::before {
background-color: #eef043 !important;
}
}
&:nth-child(2) {
&::before {
background-color: #c596ff !important;
}
}
&:nth-child(3) {
&::before {
background-color: #1d5acc !important;
}
}
&:nth-child(4) {
&::before {
background-color: #01faf2 !important;
}
}
}
}
}
}
images/bg.png
View replaced file @ 31de248d View file @ 36ab4cd1
images/bg.png

213 KB | W: | H:

images/bg.png

14 KB | W: | H:

images/bg.png
images/bg.png
images/bg.png
images/bg.png
  • 2-up
  • Swipe
  • Onion skin
images/header-bg.png
View replaced file @ 31de248d View file @ 36ab4cd1
images/header-bg.png

63.8 KB | W: | H:

images/header-bg.png

42.8 KB | W: | H:

images/header-bg.png
images/header-bg.png
images/header-bg.png
images/header-bg.png
  • 2-up
  • Swipe
  • Onion skin
images/logo.png
View replaced file @ 31de248d View file @ 36ab4cd1
images/logo.png

13.5 KB | W: | H:

images/logo.png

3.98 KB | W: | H:

images/logo.png
images/logo.png
images/logo.png
images/logo.png
  • 2-up
  • Swipe
  • Onion skin
images/logout.png
View replaced file @ 31de248d View file @ 36ab4cd1
images/logout.png

439 Bytes | W: | H:

images/logout.png

299 Bytes | W: | H:

images/logout.png
images/logout.png
images/logout.png
images/logout.png
  • 2-up
  • Swipe
  • Onion skin
images/user.png
View replaced file @ 31de248d View file @ 36ab4cd1
images/user.png

1.06 KB | W: | H:

images/user.png

538 Bytes | W: | H:

images/user.png
images/user.png
images/user.png
images/user.png
  • 2-up
  • Swipe
  • Onion skin
index.html
View file @ 36ab4cd1
......@@ -15,7 +15,7 @@
<li class="active"><span>首页</span></li>
<li><span>监控</span></li>
</ul>
<div>珠海横琴零碳建筑能量管理系统</div>
<div></div>
<ul>
<li><span>统计</span></li>
<li><span>系统管理</span></li>
......@@ -40,24 +40,42 @@
<div class="left-section">
<!--科技感框-->
<div class="st-box">
<!--echarts box-->
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header"></div>
<div class="echarts-content"></div>
<div class="echarts-header">
<div class="title">并网点电量（kWh）</div>
<ul class="legend">
<li>用电量</li>
<li>上送电量</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_1"></div>
</div>
</div>
<!--科技感框-->
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header"></div>
<div class="echarts-content"></div>
<div class="echarts-header">
<ul class="legend">
<li>楼层负荷</li>
<li>充电桩负荷</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_2"></div>
</div>
</div>
<!--科技感框-->
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header"></div>
<div class="echarts-content"></div>
<div class="echarts-header">
<ul class="legend">
<li>负荷预测</li>
<li>负荷功率</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_3"></div>
</div>
</div>
</div>
......@@ -99,19 +117,49 @@
</div>
<!--右侧内容区-->
<div class="right-section">
<div class="echarts-box">
<div class="echarts-header"></div>
<div class="echarts-content"></div>
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>光伏发电量</li>
<li>碳减排量</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_4"></div>
</div>
</div>
<div class="echarts-box">
<div class="echarts-header"></div>
<div class="echarts-content"></div>
<div class="st-box electric-power-st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<div class="title">发电计划(kW)</div>
<ul class="legend">
<li>AC/DC</li>
<li>储能</li>
<li>光伏</li>
<li>负荷</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_5"></div>
</div>
</div>
<div class="echarts-box">
<div class="echarts-header"></div>
<div class="echarts-content"></div>
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>光伏预测</li>
<li>光伏功率</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_6"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script>
</body>
</html>
js/index.js
View file @ 36ab4cd1
// 用电量、上送电量
const echart1Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
line1: [200, 190, 250, 100, 90, 100, 250],
line2: [100, 90, 200, 80, 60, 50, 200],
};
// 楼层负荷、充电桩负荷
const echart2Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
line1: [0.02, 0.3, 0.5, 1, 0.2, 0.3, 0.5],
line2: [0.01, 0.1, 0.2, 1, 0.5, 0.3, 0.8],
};
// 负荷预测、负荷功率
const echart3Data = {
date: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
],
line1: [
0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 1, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03,
0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.1,
],
line2: [
0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 1, 0.02, 0.02, 0.03, 0.05, 0.05,
0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
],
};
// 光伏发电量、碳减排量
const echart4Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
line1: [0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.01],
line2: [0.01, 0.01, 0.02, 0.03, 0.1, 0.03, 0.02],
};
// AC/DC、储能、光伏、负荷
const echart5Data = {
date: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
],
line1: [
100, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100,
190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100,
],
line2: [
200, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
100, 90, 100, 250, 100, 1000, 100, 250, 500,
],
line3: [
300, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
100, 90, 100, 250, 100, 1000, 100, 250, 400,
],
line4: [
400, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
100, 90, 100, 250, 100, 1000, 100, 250, 300,
],
};
// 光伏预测、光伏功率
const echart6Data = {
date: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
],
line1: [
0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
0.03, 0.02, 0.02, 0.03, 0.05, 1, 0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.05,
],
line2: [
0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05,
0.05, 0.02, 0.03, 0.02, 0.05, 1, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.05,
],
};
/**
* echartjs 曲线图通用配置
* @param {type: array, desc: x轴数据} xData
* @param {type: array, desc: y轴数据 } yData
* */
const lineChartOption = (xData, yData, interval) => {
const series = [];
yData.forEach((item) => {
series.push({
data: item.data,
color: item.color,
areaStyle: item.areaColor
? {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: item.areaColor[0],
},
{
offset: 1,
color: item.areaColor[1],
},
]),
}
: null,
type: "line",
smooth: true,
symbol: "none",
});
});
return {
tooltip: {
trigger: "axis",
},
grid: {
top: "5%",
bottom: "15%",
right: "5%",
},
xAxis: {
data: xData,
type: "category",
axisLine: { show: false },
axisTick: { show: false },
splitLine: false,
boundaryGap: false,
axisLabel: {
color: "#7c90c8",
fontSize: 10,
margin: 15,
interval,
},
},
yAxis: {
type: "value",
axisLine: { show: false },
axisTick: { show: false },
splitLine: false,
axisLabel: {
color: "#7c90c8",
fontSize: 10,
margin: 15,
},
},
series,
};
};
window.onload = () => {
// echart渲染
const lineChart1 = echarts.init(document.getElementById("line_chart_1"));
lineChart1.setOption(
lineChartOption(echart1Data.date, [
{
data: echart1Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart1Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
])
);
const lineChart2 = echarts.init(document.getElementById("line_chart_2"));
lineChart2.setOption(
lineChartOption(echart2Data.date, [
{
data: echart2Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart2Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
])
);
const lineChart3 = echarts.init(document.getElementById("line_chart_3"));
lineChart3.setOption(
lineChartOption(
echart3Data.date,
[
{
data: echart3Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart3Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
],
3
)
);
const lineChart4 = echarts.init(document.getElementById("line_chart_4"));
lineChart4.setOption(
lineChartOption(echart4Data.date, [
{
data: echart4Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart4Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
])
);
const lineChart5 = echarts.init(document.getElementById("line_chart_5"));
lineChart5.setOption(
lineChartOption(
echart5Data.date,
[
{
data: echart5Data.line1,
color: "#f1ec41",
},
{
data: echart5Data.line2,
color: "#c49ffe",
},
{
data: echart5Data.line3,
color: "#4a76cf",
},
{
data: echart5Data.line4,
color: "#2dc9e3",
},
],
3
)
);
const lineChart6 = echarts.init(document.getElementById("line_chart_6"));
lineChart6.setOption(
lineChartOption(
echart6Data.date,
[
{
data: echart6Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart6Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
],
3
)
);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment