Skip to content

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

修改

parent 3a9ce1ba
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 311 additions and 340 deletions
src/css/index.css
View file @ a9a6516d
...@@ -233,6 +233,12 @@ li { ...@@ -233,6 +233,12 @@ li {
.content .st-box .echarts-box .legend li:nth-child(2)::before { .content .st-box .echarts-box .legend li:nth-child(2)::before {
background: #01faf2; background: #01faf2;
} }
.content .st-box .echarts-box .legend li:nth-child(3)::before {
background: #eef043;
}
.content .st-box .echarts-box .legend li:nth-child(4)::before {
background: #c596ff;
}
.content .st-box .echarts-box .echarts-content { .content .st-box .echarts-box .echarts-content {
width: 380px; width: 380px;
height: 160px; height: 160px;
...@@ -259,6 +265,7 @@ li { ...@@ -259,6 +265,7 @@ li {
width: 865px; width: 865px;
height: 540px; height: 540px;
position: relative; position: relative;
top: 0px;
} }
.content .center-section .justify-between { .content .center-section .justify-between {
display: -webkit-box; display: -webkit-box;
...@@ -339,6 +346,9 @@ li { ...@@ -339,6 +346,9 @@ li {
top: 0; top: 0;
left: -72px; left: -72px;
} }
.content .center-section .center-top .center-content {
margin-top: 150px;
}
.content .center-section .center-top .center-content .box_1 { .content .center-section .center-top .center-content .box_1 {
width: 822px; width: 822px;
height: 78px; height: 78px;
...@@ -439,7 +449,7 @@ li { ...@@ -439,7 +449,7 @@ li {
.content .center-section .center-top .center-content .center-title-bottom { .content .center-section .center-top .center-content .center-title-bottom {
position: absolute; position: absolute;
left: 158px; left: 158px;
top: 532px; top: 825px;
width: 549px; width: 549px;
height: 14px; height: 14px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAi4AAAAXCAYAAAAsoMSTAAAAAXNSR0IArs4c6QAAAsNJREFUeF7t2rFrE1EcB/DfpTGpi0jp1M1NcBFEcHUS0cXRzb9BHAQH418hgkMDzioOrq6CuDi5uEmmokJbam3Sk8NLCepwd03ucuFzcKRN37336+fdhe+9SxI2AgQIECBAgEBLBJKW1KlMAgQIECBAgEAILk4CAgQIECBAoDUCgktrpkqhBAgQIECAgODiHCBAgAABAgRaIyC4tGaqFEqAAAECBAgILs4BAgQIECBAoDUCgktrpkqhBCoJTK/xVb7W01xm+loJykEECLRDYJU/zNoxA6okMH+B7LrO9s5/9vmP1myPxxHx954FGCGm2XkxOoGFCQguC6PVMYHaBaaBZS0iuhHRi4j1/PVMRGTvZ2FmVbYssEwi4igifkXEYf5z9nv2fvb3bBNiVmXG/R8E8ruyMhCCThktbQnUJzBdYcnCST8izm7cfH6rv3nxfmdt/VJ9ZTQwUhrp5Gj//fjHl+HOuwdv4+DbXh5ixnmAsQLTwLQYkkBBgdI3FkWDyOxz8uldXcGaNCNAYMECs6Glt3H7xY3++QsPO93+5QWPu3Tdp8fjUfrz+3Dv85vh7qeno4gQXpZulhRE4GQldPamonCAKRNcZp+XcydAYDkETr7Psnnn5fXeua1HSdK9thylNVrF4WRy8Gq8+/XZzuu7H/LHRlZeGp0SgxP4R2D2+2nzCy5b9z4+TiIdACdAgAABAgQILEIgjWQw2r7ypEjfhVZchJcilNoQIECAAAECZQXSSAej7auFQkvWd6HgMlNE2fZl69eeAIHTC7hO/xgWXno+PbkeCBCoKFD6OvUBV1HaYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C8guNRvbkQCBAgQIECgooDgUhHOYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C/wG9ZbZxhkNI47AAAAAElFTkSuQmCC") -4px -5px no-repeat; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAi4AAAAXCAYAAAAsoMSTAAAAAXNSR0IArs4c6QAAAsNJREFUeF7t2rFrE1EcB/DfpTGpi0jp1M1NcBFEcHUS0cXRzb9BHAQH418hgkMDzioOrq6CuDi5uEmmokJbam3Sk8NLCepwd03ucuFzcKRN37336+fdhe+9SxI2AgQIECBAgEBLBJKW1KlMAgQIECBAgEAILk4CAgQIECBAoDUCgktrpkqhBAgQIECAgODiHCBAgAABAgRaIyC4tGaqFEqAAAECBAgILs4BAgQIECBAoDUCgktrpkqhBCoJTK/xVb7W01xm+loJykEECLRDYJU/zNoxA6okMH+B7LrO9s5/9vmP1myPxxHx954FGCGm2XkxOoGFCQguC6PVMYHaBaaBZS0iuhHRi4j1/PVMRGTvZ2FmVbYssEwi4igifkXEYf5z9nv2fvb3bBNiVmXG/R8E8ruyMhCCThktbQnUJzBdYcnCST8izm7cfH6rv3nxfmdt/VJ9ZTQwUhrp5Gj//fjHl+HOuwdv4+DbXh5ixnmAsQLTwLQYkkBBgdI3FkWDyOxz8uldXcGaNCNAYMECs6Glt3H7xY3++QsPO93+5QWPu3Tdp8fjUfrz+3Dv85vh7qeno4gQXpZulhRE4GQldPamonCAKRNcZp+XcydAYDkETr7Psnnn5fXeua1HSdK9thylNVrF4WRy8Gq8+/XZzuu7H/LHRlZeGp0SgxP4R2D2+2nzCy5b9z4+TiIdACdAgAABAgQILEIgjWQw2r7ypEjfhVZchJcilNoQIECAAAECZQXSSAej7auFQkvWd6HgMlNE2fZl69eeAIHTC7hO/xgWXno+PbkeCBCoKFD6OvUBV1HaYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C8guNRvbkQCBAgQIECgooDgUhHOYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C/wG9ZbZxhkNI47AAAAAElFTkSuQmCC") -4px -5px no-repeat;
...@@ -452,7 +462,7 @@ li { ...@@ -452,7 +462,7 @@ li {
width: 818px; width: 818px;
position: absolute; position: absolute;
left: 31px; left: 31px;
top: 135px; top: 240px;
} }
.content .center-section .center-bottom .flex-row { .content .center-section .center-bottom .flex-row {
display: -webkit-box; display: -webkit-box;
......
src/index.html
View file @ a9a6516d
This diff is collapsed.
src/js/index.js
View file @ a9a6516d
...@@ -3,67 +3,80 @@ const testUA = (regexp) => regexp.test(ua); ...@@ -3,67 +3,80 @@ const testUA = (regexp) => regexp.test(ua);
const isSafari = testUA(/safari/g) && !testUA(/chrome/g); const isSafari = testUA(/safari/g) && !testUA(/chrome/g);
const isWeChat = testUA(/micromessenger/g); const isWeChat = testUA(/micromessenger/g);
// 用电量、上送电量
const echart1Data = { const echart1Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"], date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
line1: [200, 190, 250, 100, 90, 100, 250], line1: [200, 190, 250, 100, 90, 100, 250],
line2: [100, 90, 200, 80, 60, 50, 200], line2: [100, 90, 200, 80, 60, 50, 200],
}; };
// 楼层负荷、充电桩负荷
const echart2Data = { const echart2Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"], 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], 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], line2: [0.01, 0.1, 0.2, 1, 0.5, 0.3, 0.8],
}; };
// 负荷预测、负荷功率 const echart3Data = [
const echart3Data = { {
date: [ value: 1048,
"0", name: "暖通",
"1", itemStyle: {
"2", color: "#4380f0",
"3", },
"4", },
"5", {
"6", value: 735,
"7", name: "照明",
"8", itemStyle: {
"9", color: "#01faf2",
"10", },
"11", },
"12", {
"13", value: 580,
"14", name: "电梯",
"15", itemStyle: {
"16", color: "#eef043",
"17", },
"18", },
"19", {
"20", value: 484,
"21", name: "热水",
"22", itemStyle: {
"23", color: "#c596ff",
"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, const echart4Data = [
], {
line2: [ value: 110,
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, name: "暖通",
0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, itemStyle: {
], color: "#4380f0",
}; },
},
// 光伏发电量、碳减排量 {
const echart4Data = { value: 888,
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"], name: "照明",
line1: [0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.01], itemStyle: {
line2: [0.01, 0.01, 0.02, 0.03, 0.1, 0.03, 0.02], color: "#01faf2",
}; },
},
{
value: 222,
name: "电梯",
itemStyle: {
color: "#eef043",
},
},
{
value: 333,
name: "热水",
itemStyle: {
color: "#c596ff",
},
},
];
// AC/DC、储能、光伏、负荷
const echart5Data = { const echart5Data = {
date: [ date: [
"0", "0",
...@@ -110,7 +123,6 @@ const echart5Data = { ...@@ -110,7 +123,6 @@ const echart5Data = {
], ],
}; };
// 光伏预测、光伏功率
const echart6Data = { const echart6Data = {
date: [ date: [
"0", "0",
...@@ -230,6 +242,48 @@ const lineChartOption = (xData, yData, interval) => { ...@@ -230,6 +242,48 @@ const lineChartOption = (xData, yData, interval) => {
}; };
}; };
/**
* echartjs 饼图通用配置
*/
const pieChartOption = (data, isPercent) => {
return {
tooltip: {
trigger: "item",
formatter: isPercent ? "{b}: {c}" : "{b}: {d}%",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: "rgba(25,93,199,.2)",
borderWidth: 2,
},
label: {
show: true,
formatter(param) {
if (isPercent) {
return param.name + ": " + param.percent + "%";
} else {
return param.name + ": " + param.value;
}
},
},
labelLine: {
normal: {
length: 8,
length2: 2,
},
},
data,
},
],
};
};
// 创建多组数字 // 创建多组数字
function createMultiSrollNum(numArr) { function createMultiSrollNum(numArr) {
const scrollBox = document.getElementsByClassName("scroll-box"); const scrollBox = document.getElementsByClassName("scroll-box");
...@@ -426,13 +480,6 @@ function setBallData(list) { ...@@ -426,13 +480,6 @@ function setBallData(list) {
}); });
} }
// 设置环形数据
function setRingData(list) {
list.forEach((_, idx) => {
document.querySelector(".s-ring-" + (idx + 1)).innerHTML = list[idx];
});
}
const leftLineChart = () => { const leftLineChart = () => {
// echart渲染 // echart渲染
const lineChart1 = echarts.init(document.getElementById("line_chart_1")); const lineChart1 = echarts.init(document.getElementById("line_chart_1"));
...@@ -443,11 +490,6 @@ const leftLineChart = () => { ...@@ -443,11 +490,6 @@ const leftLineChart = () => {
color: "#4a76cf", color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], 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)"],
},
]) ])
); );
...@@ -459,51 +501,16 @@ const leftLineChart = () => { ...@@ -459,51 +501,16 @@ const leftLineChart = () => {
color: "#4a76cf", color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], 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")); const pieChart3 = echarts.init(document.getElementById("pie_chart_3"));
lineChart3.setOption( pieChart3.setOption(pieChartOption(echart3Data, true));
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 rightLineChart = () => { const rightLineChart = () => {
const lineChart4 = echarts.init(document.getElementById("line_chart_4")); const pieChart4 = echarts.init(document.getElementById("pie_chart_4"));
lineChart4.setOption( pieChart4.setOption(pieChartOption(echart4Data));
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")); const lineChart5 = echarts.init(document.getElementById("line_chart_5"));
lineChart5.setOption( lineChart5.setOption(
...@@ -513,18 +520,12 @@ const rightLineChart = () => { ...@@ -513,18 +520,12 @@ const rightLineChart = () => {
{ {
data: echart5Data.line1, data: echart5Data.line1,
color: "#f1ec41", color: "#f1ec41",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
}, },
{ {
data: echart5Data.line2, data: echart5Data.line2,
color: "#c49ffe", color: "#c49ffe",
}, areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
{
data: echart5Data.line3,
color: "#4a76cf",
},
{
data: echart5Data.line4,
color: "#2dc9e3",
}, },
], ],
3 3
...@@ -541,11 +542,6 @@ const rightLineChart = () => { ...@@ -541,11 +542,6 @@ const rightLineChart = () => {
color: "#4a76cf", color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], 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 3
) )
...@@ -575,7 +571,4 @@ window.onload = () => { ...@@ -575,7 +571,4 @@ window.onload = () => {
/***********************************中间球体****************************************/ /***********************************中间球体****************************************/
// 球体数据 // 球体数据
setBallData(ballData); setBallData(ballData);
/***********************************底部环形****************************************/
// 环形数据
setRingData(ringData);
}; };
src/less/index.less
View file @ a9a6516d
...@@ -210,6 +210,16 @@ li { ...@@ -210,6 +210,16 @@ li {
background: #01faf2; background: #01faf2;
} }
} }
&:nth-child(3) {
&::before {
background: #eef043;
}
}
&:nth-child(4) {
&::before {
background: #c596ff;
}
}
} }
} }
.echarts-content { .echarts-content {
...@@ -253,6 +263,7 @@ li { ...@@ -253,6 +263,7 @@ li {
width: 865px; width: 865px;
height: 540px; height: 540px;
position: relative; position: relative;
top: 0px;
.justify-between { .justify-between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -322,6 +333,7 @@ li { ...@@ -322,6 +333,7 @@ li {
} }
} }
.center-content { .center-content {
margin-top: 150px;
.box_1 { .box_1 {
width: 822px; width: 822px;
height: 78px; height: 78px;
...@@ -394,7 +406,7 @@ li { ...@@ -394,7 +406,7 @@ li {
.center-title-bottom { .center-title-bottom {
position: absolute; position: absolute;
left: 158px; left: 158px;
top: 532px; top: 825px;
width: 549px; width: 549px;
height: 14px; height: 14px;
//background: url(../images/center-title-bottom.png) -4px -5px no-repeat; //background: url(../images/center-title-bottom.png) -4px -5px no-repeat;
...@@ -411,7 +423,7 @@ li { ...@@ -411,7 +423,7 @@ li {
width: 818px; width: 818px;
position: absolute; position: absolute;
left: 31px; left: 31px;
top: 135px; top: 240px;
} }
} }
} }
......
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