曲线图处理

css/index.css

@@ -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;
   display: flex;
 }
 .header-middle ul {
@@ -64,9 +55,6 @@ ul {
   border-bottom: 3px solid #01fff6;
 }
 .header-middle > div {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-      -ms-flex: 1;
   flex: 1;
   text-align: center;
   font-size: 36px;
@@ -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

@@ -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;
+          }
+        }
+      }
+    }
+  }
 }

index.html

@@ -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="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_4"></div>
+          </div>
+        </div>
+
+        <div class="st-box electric-power-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">
+              <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="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_6"></div>
+          </div>
         </div>
       </div>
     </div>
+    <script src="https://cdn.ucyber.cn/common/echarts.js"></script>
   </body>
 </html>

js/index.js

+// 用电量、上送电量
+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
+    )
+  );
+};