调整图表细节

src/components/BarChart/BarChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="linBarbox" :style="{ width: '100%', height: '200px' }" class="chart-box">
+  <div id="linBarbox" :style="{ width: '100%', height: '300px' }" class="chart-box">
     <div :id="id" style="width: 100%; height: 100%"></div>
   </div>
 </template>
@@ -34,10 +34,9 @@ export default {
           {
             type: 'value',
             splitLine: { show: false },
-            // boundaryGap: false,
-            // show: true,
-            // axisLine: { show: false },
-            // axisTick: { show: false },
+            min: 0,
+            max: 400,
+            splitNumber: 5,
           },
         ],
         yAxis: [
@@ -47,20 +46,19 @@ export default {
             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
             axisLine: { show: false },
             axisTick: { show: false },
-            // splitLine: { show: false },
-            // data: ['0', '10', '20'],
           },
-          // {
-          //   show: false,
-          //   type: 'value',
-          // },
         ],
         series: [
           {
             type: 'bar',
-            // yAxisIndex: 1,
             color: `${this.color[0]}`,
-            barWidth: '10',
+            barWidth: '20',
+            label: {
+              show: true, //开启数值显示
+              position: 'insideRight',
+              color: '#fff',
+              fontSize: 12,
+            },
             data: [
               {
                 value: 200,
@@ -92,32 +90,6 @@ export default {
               },
             ],
           },
-          // {
-          //   type: 'line',
-          //   stack: '总量',
-          //   smooth: true,
-          //   lineStyle: {
-          //     width: 2,
-          //     color: `rgba(105,207,76,1)`,
-          //     boxShadow: '10px 10px 10px #000',
-          //   },
-          //   showSymbol: false,
-          //   areaStyle: {
-          //     opacity: 0.8,
-          //     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          //       {
-          //         offset: 0,
-          //         color: `rgba(105,207,76,0.4)`,
-          //       },
-          //       {
-          //         offset: 1,
-          //         color: `rgba(105,207,76,0)`,
-          //       },
-          //     ]),
-          //   },
-          //   emphasis: { focus: 'series' },
-          //   data: [140, 232, 101, 264, 90, 340, 250],
-          // },
         ],
       };
     },

src/components/LineChart/LineChart.vue

@@ -33,8 +33,6 @@ export default {
         xAxis: [
           {
             type: 'category',
-            // boundaryGap: false,
-            // show: true,
             axisLine: { show: false },
             axisTick: { show: false },
             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
@@ -42,24 +40,14 @@ export default {
         ],
         yAxis: [
           {
-            // show: true,
             type: 'value',
             splitLine: { show: false },
-            data: ['0', '10', '20'],
+            min: 0,
+            max: 400,
+            splitNumber: 5,
           },
-          // {
-          //   show: false,
-          //   type: 'value',
-          // },
         ],
         series: [
-          // {
-          //   type: 'bar',
-          //   yAxisIndex: 1,
-          //   color: `rgba(105,207,76,0.4)`,
-          //   barWidth: '10',
-          //   data: [null, 140, 232, 101, 264, 90, 340, 250, null],
-          // },
           {
             type: 'line',
             stack: '总量',

src/views/SalarySummary/SalarySummary.vue

@@ -100,8 +100,12 @@
 
     <!-- 员工薪资排行 -->
     <div class="echarts mt-3 p-4 white">
-      <div class="title-box flex items-center justify-between">
+      <div class="title-box relative flex items-center justify-between">
         <div class="title">薪资top排行榜</div>
+
+        <div class="right-search absolute right-0 top-0">
+          <a-input-search class="search-input" placeholder="搜索" style="width: 200px" @search="onSearch" />
+        </div>
       </div>
 
       <div>
@@ -269,10 +273,10 @@ export default {
   methods: {
     // 选择日期
     onChange(date, dateString) {
-      if (dateString == this.today) {
-        isCurr = true;
+      if (dateString == this.currDate) {
+        this.isCurr = true;
       } else {
-        isCurr = false;
+        this.isCurr = false;
       }
     },
 
@@ -307,6 +311,11 @@ export default {
         }
       });
     },
+
+    // 搜索框
+    onSearch(value) {
+      console.log(value);
+    },
   },
 };
 </script>
@@ -381,6 +390,21 @@ export default {
   color: #595959;
 }
 
+.right-search {
+  width: 112px;
+  height: 24px;
+
+  .search-input {
+    width: 100% !important;
+    height: 100%;
+  }
+
+  /deep/ .ant-input {
+    padding: 0 11px;
+    height: 24px;
+  }
+}
+
 .color-gray {
   color: #929292;
 }