修改

3d8c898d · 呼呼啦啦 · 444c1ed1 · 3d8c898d · 3d8c898d
Commit 3d8c898d authored Jun 14, 2023 by 呼呼啦啦
--- a/energy-report/index.css
+++ b/energy-report/index.css
+* {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+html,
+body {
+    height: 100%;
+}
+.energy-wrap {
+    height: 100%;
+    background-color: #152235;
+    padding: 0 4vw 0 4vw;
+    box-sizing: border-box;
+}
+@media screen and (max-width: 768px) {
+    .energy-wrap .flex {
+        display: block;
+    }
+    .energy-wrap .flex .right {
+        width: 100%;
+    }
+}
+.flex {
+    display: flex;
+}
+.block-bg {
+    background: rgba(8, 16, 24, 0.27);
+}
+.yongdianqushi {
+}
+.echarts-box {
+    width: 100%;
+    height: 30vh;
+}
+.gonglv {
+    height: 30vh;
+}
+.echarts-box1 {
+    flex: 1;
+    height: 30vh;
+}
+.right {
+    width: 40vw;
+    height: 30vh;
+}
--- a/energy-report/index.html
+++ b/energy-report/index.html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<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.6.0/echarts.min.js"></script>
+  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
+  <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+  <div class="energy-wrap">
+    <div class="header">
+    </div>
+    <!--  -->
+    <div class="yongdianqushi">
+      <div class="title">
+      </div>
+      <div id="repair-require" class="echarts-box"></div>
+    </div>
+    <!--  -->
+    <div class="flex gonglv">
+      <div id="repair-require1" class="echarts-box1"></div>
+      <div class="right"></div>
+    </div>
+  </div>
+</body>
+<script>
+  window.onload = function () {
+    const myChart = {}
+    function initEcharts(el, option) {
+      var ele = echarts.init(document.querySelector(el));
+      console.log(el)
+      myChart[el] = ele;
+      console.log(myChart)
+      option && ele.setOption({ ...option })
+    }
+    const getEcharts = () => {
+      let option = {
+        title: {
+          text: '能耗报告',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器,坐标轴触发有效
+            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          axisTick: {
+            alignWithLabel: true
+          },
+          axisLabel: {
+            interval: 0, 
+            textStyle: {
+              fontSize: 12, //更改坐标轴文字大小
+              color: "#A4A9BC",
+              padding: [0, 0, 0, 0],
+            },
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value} ',
+            textStyle: {
+              fontSize: 12, //更改坐标轴文字大小
+              color: "#A4A9BC",
+              padding: [0, 0, 0, 0],
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed'
+            }
+          }
+        },
+        series: [{
+          name: '能耗',
+          type: 'bar',
+          barWidth: '60%',
+          data: [0, 0, 10, 20, 0, 40, 0, 0, 0, 0, 0, 0],
+          itemStyle: {
+            normal: {
+              color: '#fff',
+            },
+            emphasis: {
+              color: '#fff'
+            }
+          }
+        }]
+      }
+      initEcharts('#repair-require', option)
+      initEcharts('#repair-require1', option)
+    }
+    getEcharts();
+    window.onresize = function () {
+      Object.values(myChart).forEach(chart => chart.resize())
+    };
+  }
+</script>
+</html>
\ No newline at end of file