增加了主界面的item1

src/components/newmain/item1/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <!-- 支架压力柱状图 -->
+  <div class="main">
+    <div ref="bar" style="height: 170px; width: 300px"></div>
+    <div style="display: flex;flex-flow: column;">
+      <div class="botton1">
+        <span class="name">486 /万吨</span>
+        <span class="value">今年产量</span>
+      </div>
+      <div class="botton2">
+        <span class="name">495 /万吨</span>
+        <span class="value">计划产量</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Bars",
+  data() {
+    return {
+      myChart: null,
+      xData: [],
+      yData: [],
+    };
+  },
+  mounted() {
+    const option = {
+      title: {
+        text: "煤炭产量",
+        // 标题内边距 上下边距 左右边距
+        padding: [10, 0, 0, 70],
+        textStyle: {
+          fontWeight: "bolder", //标题颜色
+          color: "white",
+          fontSize: 18,
+        },
+      },
+      tooltip: {
+        // show: false,
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+        formatter: (params) => {
+          let round = "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4693EC;\"></span>";
+          return round + "产量:" + params[0].data + "万吨";
+          // if (params[0].data > 39) {
+          //   return params[0].marker + "压力过高:" + params[0].data;
+          // } else if (params[0].data < 26) {
+          //   return params[0].marker + "压力过低:" + params[0].data;
+          // } else {
+          //   return params[0].marker + "压力正常:" + params[0].data;
+          // }
+        },
+      },
+      color: ["#FF6666", "#99CC66", "#FFFF66"],
+      legend: {
+        show: false,
+        orient: "horizontal",
+        left: "right",
+        padding: [25, 20],
+        icon: "rect",
+        textStyle: {
+          color: "#fff",
+        },
+        data: ["压力超限", "压力正常", "压力过低"],
+      },
+      grid: {
+        top: "22%",
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLabel: {
+            color: "#fff",
+            interval: 0,
+            fontSize: 9,
+          },
+          axisLine: {
+            show: true,
+          },
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          name: "万吨",
+          axisLabel: {
+            color: "#fff",
+            // fontSize: 11,
+          },
+          nameTextStyle: {
+            color: "white",
+            padding: [0, 0, 0, -30],
+          },
+          min: 0,
+          max: 100,
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: "dotted",
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "数据",
+          type: "bar",
+          barWidth: 12,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#00FFE3",
+                },
+                {
+                  offset: 1,
+                  color: "#4693EC",
+                },
+              ]),
+            },
+          },
+          // barWidth: "10",
+          barCategoryGap: "5%",
+          data: [70, 80, 80, 80, 80, 80, 90, 75, 95, 72, 73, 82],
+        },
+        // {
+        //   //这两组数据用来模拟markLine线段开关,data可以为空
+        //   name: "压力超限",
+        //   type: "line",
+        //   markLine: {
+        //     data: [
+        //       {
+        //         name: "压力超限",
+        //         yAxis: "64",
+        //         itemStyle: {
+        //           normal: {
+        //             show: true,
+        //             color: "#FF6666",
+        //           },
+        //         },
+        //       },
+        //     ],
+        //   },
+        // },
+        // {
+        //   //这两组数据用来模拟markLine线段开关,data可以为空
+        //   name: "压力正常",
+        //   type: "line",
+        //   markLine: {
+        //     data: [
+        //       {
+        //         name: "压力正常",
+        //         yAxis: "24",
+        //         itemStyle: {
+        //           normal: {
+        //             show: true,
+        //             color: "#FFFF66",
+        //           },
+        //         },
+        //       },
+        //     ],
+        //   },
+        // },
+        // {
+        //   name: "压力过低",
+        //   type: "line",
+        //   itemStyle: {
+        //     normal: {
+        //       color: "#FFFF66",
+        //     },
+        //   },
+        // },
+      ],
+    };
+
+    this.myChart = this.$echarts.init(this.$refs.bar);
+    // 获取数据
+
+    this.myChart.setOption(option);
+  },
+};
+</script>
+
+<style scoped lang="less">
+.main {
+  display: flex;
+}
+.botton1 {
+  margin-top: 20px;
+}
+.botton2 {
+  margin-top: 20px;
+}
+.name {
+  color: #4adefe;
+  font-size: 20px;
+  display: block;
+}
+.value {
+  display: block;
+  color: white;
+}
+</style>

src/components/newmain/Main.vue → src/components/newmain/item2/Main.vue

@@ -173,12 +173,6 @@ export default {
 #outer {
   width: 100%;
   height: 100%;
-  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
-    linear-gradient(
-      to top,
-      rgba(255, 255, 255, 0.4) 0%,
-      rgba(0, 0, 0, 0.25) 200%
-    );
   position: relative;
 
   .warning_box {

src/router/index.js

@@ -531,7 +531,7 @@ const router = new Router({
           path: "/main",
           name: "主界面",
           id: 111,
-          component: () => import("../views/newmain.vue"),
+          component: () => import("../views/newMain.vue"),
           hidden: false,
         },
         {

src/views/newmain.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="grid">
-    <div class="item1">Item 1</div>
-    <div class="span-col-2 span-row-3 item2"><Main></Main></div>
+    <div class="item1"><item1></item1></div>
+    <!-- <div class="span-col-2 span-row-3 item2"><Main></Main></div> -->
+    <div class="span-col-2 span-row-3 item2">item2</div>
     <div class="item3">Item 3</div>
     <div class="item4">Item 4</div>
     <div class="item5">Item 5</div>
@@ -23,19 +24,27 @@
 </template>
 
 <script>
-import Main from "../components/newmain/Main";
+import Main from "../components/newMain/item2/Main";
+import item1 from "@/components/newMain/item1"
 export default {
-  name: "newmain",
+  name: "newMain",
   components: {
     Main,
+    item1
   },
 };
 </script>
 
 <style lang="less">
 .grid {
+  background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
+    linear-gradient(
+      to top,
+      rgba(255, 255, 255, 0.4) 0%,
+      rgba(0, 0, 0, 0.25) 200%
+    );
   width: 100%;
-  height: 900px;
+  height: 890px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(5, 1fr);