chart\、card组件优化

src/components/chart/LineChart.vue

@@ -7,7 +7,7 @@ export default {
   name: "LineChart",
   data() {
     return {
-      lineChart: null,
+      lineChart: null
     };
   },
   props: {
@@ -15,22 +15,22 @@ export default {
       type: Array,
       default() {
         return [];
-      },
+      }
     },
     valueData: {
       type: Array,
       default() {
         return [];
-      },
-    },
+      }
+    }
   },
   watch: {
     categoryData: {
       handler(val) {
         console.log(val, "categoryData");
       },
-      immediate: true,
-    },
+      immediate: true
+    }
     // categoryData(val){
     //   console.log(val,"categoryData");
     // }
@@ -46,12 +46,64 @@ export default {
         this.lineChart = echarts.init(this.$refs.line);
       }
       let option = {
+        tooltip: {
+          show: true,
+          trigger: "axis"
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          top: "20px",
+          containLabel: true
+        },
         xAxis: {
           type: "category",
           data: xData,
+          axisTick: {
+            show: false // 不显示坐标轴刻度线
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(219,225,255,1)",
+              width: 1,
+              type: "solid"
+            }
+          },
+          axisLabel: {
+            //x轴文字的配置
+            show: true,
+            textStyle: {
+              color: "rgba(219,225,255,1)"
+            }
+          }
         },
         yAxis: {
+          // min: 1000,
+          // max: 1100,
+          // interval: 50,
+          // axisLabel: {
+          //   formatter: function (value, index) {
+          //     return (value * 100).toFixed(0) + "%";
+          //   }
+          // },
           type: "value",
+          scale: true,
+          splitLine: {
+            show: false // 不显示网格线
+          },
+          axisLine: {
+            show: false // 不显示坐标轴线
+          },
+          axisLabel: {
+            //y轴文字的配置
+            textStyle: {
+              color: "rgba(219,225,255,1)",
+              margin: 15
+            }
+            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
+          }
         },
         series: [
           {
@@ -59,17 +111,32 @@ export default {
             // data: this.seriesData,
             type: "line",
             smooth: true,
-          },
-        ],
+            itemStyle: {
+              color: "#00aaff"
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#00aaff"
+                },
+                {
+                  offset: 1,
+                  color: "#00aaff00"
+                }
+              ])
+            }
+          }
+        ]
       };
       this.lineChart.setOption(option);
-    },
-  },
+    }
+  }
 };
 </script>
 <style>
-#lineChart{
+#lineChart {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>

src/components/common/ChartCard.vue

@@ -9,9 +9,9 @@
         <div class="chartTitleBorder"></div>
       </div>
     </div>
-    <div style="height: 100px">
+    <div style="height: 87px">
       <!-- 需要重写 -->
-      <LineChart :categoryData="['2020年', '2021年', '2022年']" :valueData="[1024, 1026, 1029]" />
+      <LineChart :categoryData="['2020年', '2021年', '2022年']" :valueData="[1024, 1026, 1025]" />
     </div>
   </div>
 </template>

src/components/layout/MenuCard.vue

@@ -6,34 +6,24 @@
       width: boxWidth ? boxWidth + 'px' : '410px',
       height: boxHeight + 'px',
       border: type !== 'chart' ? '' : '1px solid #2FB8FF',
-      background: boxBackground ? boxBackground : '',
+      background: boxBackground ? boxBackground : ''
     }"
   >
     <!-- 头部 -->
     <div class="menuMainBox_top" v-if="type !== 'chart'">
       <!-- 头部左侧 -->
-      <div
-        class="menuMainBox_top_left"
-        :style="{ width: titleWidth ? titleWidth + '%' : '50%' }"
-      >
+      <div class="menuMainBox_top_left" :style="{ width: titleWidth ? titleWidth + '%' : '50%' }">
         <!-- 左侧箭头图标 -->
         <div class="menuMainBox_top_left_iconS"></div>
         <!-- 标题 -->
         <div class="menuMainBox_top_left_title">{{ title }}</div>
         <!-- 右侧倾斜图标1 -->
-        <div
-          class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"
-        ></div>
+        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"></div>
         <!-- 右侧倾斜图标2 -->
-        <div
-          class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"
-        ></div>
+        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"></div>
       </div>
       <!-- 头部右侧 -->
-      <div
-        class="menuMainBox_top_right"
-        :style="{ width: titleWidth ? 110 - titleWidth + '%' : '60%' }"
-      >
+      <div class="menuMainBox_top_right" :style="{ width: titleWidth ? 110 - titleWidth + '%' : '60%' }">
         <!-- 方块1 -->
         <div class="menuMainBox_top_right_d1"></div>
         <!-- 方块2 -->
@@ -47,11 +37,7 @@
       </div>
     </div>
     <!-- 折线 -->
-    <div
-      class="menuMainBox_topBottom"
-      v-if="type !== 'chart'"
-      :style="{ left: titleWidth ? titleWidth - 40 + '%' : '10%' }"
-    >
+    <div class="menuMainBox_topBottom" v-if="type !== 'chart'" :style="{ left: titleWidth ? titleWidth - 40 + '%' : '10%' }">
       <!-- 圆球 -->
       <div></div>
     </div>
@@ -96,16 +82,9 @@ export default {
    * boxBackground: 背景色，默认为渐变蓝色（非必填）
    * titleWidth: 标题宽度，默认为50（非必填）
    */
-  props: [
-    "type",
-    "title",
-    "boxWidth",
-    "boxHeight",
-    "boxBackground",
-    "titleWidth",
-  ],
+  props: ["type", "title", "boxWidth", "boxHeight", "boxBackground", "titleWidth"],
   methods: {},
-  watch: {},
+  watch: {}
 };
 </script>
 
@@ -124,9 +103,6 @@ export default {
   border-image: --webkit-linear-gradient(to top, @borderColor, transparent) 1;
   border-image: --moz-linear-gradient(to top, @borderColor, transparent) 1;
   border-image: linear-gradient(to top, @borderColor, transparent) 1;
-  background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
-  background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
-  background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
   opacity: 0.9;
   //   type !== chart
   &_top {
@@ -146,24 +122,9 @@ export default {
       flex-wrap: nowrap;
       align-content: center;
       height: 100%;
-      background-image: --webkit-linear-gradient(
-        to left,
-        @topTitleMinLeft,
-        @borderColor,
-        @topTitleMinLeft
-      );
-      background-image: --moz-linear-gradient(
-        to left,
-        @topTitleMinLeft,
-        @borderColor,
-        @topTitleMinLeft
-      );
-      background-image: linear-gradient(
-        to left,
-        @topTitleMinLeft,
-        @borderColor,
-        @topTitleMinLeft
-      );
+      background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+      background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
       border-bottom: 2px solid @borderColor;
       &_iconS {
         margin: 10px;
@@ -183,12 +144,7 @@ export default {
         margin-left: 10px;
         width: 15px;
         height: 30px;
-        background-image: linear-gradient(
-          to bottom,
-          transparent,
-          transparent,
-          #00a6c0
-        );
+        background-image: linear-gradient(to bottom, transparent, transparent, #00a6c0);
         transform: skew(-45deg);
       }
       &_iconE1 {
@@ -206,12 +162,7 @@ export default {
       border-left: 2px solid @borderColor;
       transform: skew(-45deg);
       background-color: @topTitleBgLeft;
-      border-image: --webkit-linear-gradient(
-          to right,
-          @borderColor,
-          transparent
-        )
-        1;
+      border-image: --webkit-linear-gradient(to right, @borderColor, transparent) 1;
       border-image: --moz-linear-gradient(to right, @borderColor, transparent) 1;
       border-image: linear-gradient(to right, @borderColor, transparent) 1;
       &_d1 {
@@ -263,6 +214,7 @@ export default {
     border-image: --webkit-linear-gradient(to left, @borderColor, transparent) 1;
     border-image: --moz-linear-gradient(to left, @borderColor, transparent) 1;
     border-image: linear-gradient(to left, @borderColor, transparent) 1;
+    z-index: 9999;
     div {
       position: absolute;
       top: -2px;
@@ -284,24 +236,9 @@ export default {
     flex-wrap: nowrap;
     justify-content: center;
     align-content: center;
-    background-image: --webkit-linear-gradient(
-      to left,
-      @topTitleMinLeft,
-      @borderColor,
-      @topTitleMinLeft
-    );
-    background-image: --moz-linear-gradient(
-      to left,
-      @topTitleMinLeft,
-      @borderColor,
-      @topTitleMinLeft
-    );
-    background-image: linear-gradient(
-      to left,
-      @topTitleMinLeft,
-      @borderColor,
-      @topTitleMinLeft
-    );
+    background-image: --webkit-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+    background-image: --moz-linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
+    background-image: linear-gradient(to left, @topTitleMinLeft, @borderColor, @topTitleMinLeft);
     &_title {
       font-size: 18px;
       font-family: PingFang SC;
@@ -313,18 +250,24 @@ export default {
   // 卡片主题
   &_main {
     position: relative;
-    margin: 10px;
-    width: calc(100% - 20px);
-    height: calc(100% - 50px);
+    padding-top: 10px;
+    width: 100%;
+    height: calc(100% - 40px);
+    background-image: --webkit-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
+    background-image: --moz-linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
+    background-image: linear-gradient(to top, @topTitleMinLeft, @topTitleBgLeft);
     &_top {
-      width: 100%;
+      margin:0 10px;
+      width: calc(100% - 20px);
     }
     &_bottom {
-      width: 100%;
+      margin:0 10px;
+      width: calc(100% - 20px);
     }
     &_all {
-      width: 100%;
-      height: 100%;
+      margin:0 10px;
+      width: calc(100% - 20px);
+      height: calc(100% - 10px);
     }
   }
 }

src/views/HomeView.vue

@@ -284,7 +284,7 @@ export default {
   padding-right: 10px;
   margin-right: 10px;
   height: calc(100% - 60px);
-  z-index: 999999;
+  z-index: 999;
   box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: auto;
@@ -319,6 +319,7 @@ export default {
     right: 10px;
     top: 30px;
     z-index: 999999;
+    overflow: hidden;
     .bar-btn {
       width: 100%;
       height: 10%;