样式调整

src/components/barChart.vue

@@ -4,32 +4,13 @@
 
 <script>
 import * as echarts from 'echarts'
-const colors = [
-  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-    offset: 0,
-    color: '#1EBFFF'
-    },
-    {
-    offset: 1,
-    color: '#975BFF'
-    }
-  ]),
-  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-    offset: 0,
-    color: '#FF6E2F'
-    },
-    {
-    offset: 1,
-    color: '#FFCA02'
-    }
-  ])
-]
+const colors = [ '#5470c6','#91cc75' ]
 export default {
   props: {
     id: {type: String, required: true},
     dataset: {type: Array, required: true},
     encode: {type: Array, required: true},
-    barWidth:{type: Number, default: 15},
+    barWidth:{type: Number, default: 30},
     yAxisName: {type: String},
     xlabelFormat: {type: Function},
     showLegend: {type: Boolean, default: true},
@@ -53,14 +34,11 @@ export default {
           left: 70,
           right: 20
         },
-        legend: {right: 20, top: 0, icon: this.legendIcon, textStyle: {color: '#ffffff', fontSize: this.isBig ? 18 : 12}},
+        legend: {right: 20, top: 0, icon: this.legendIcon, textStyle: {color: '#333', fontSize: this.isBig ? 18 : 12}},
         tooltip: {
           trigger: 'axis',
           confine: true,
           backgroundColor: 't',
-          axisPointer: {
-            lineStyle: { color: "#0081AC", type: "dashed" },
-          },
           show: this.tooltip,
           formatter: this.tooltip,
           position: function(point, params, dom,rect,size) {
@@ -73,40 +51,35 @@ export default {
           type: 'category',
           axisLabel: {
             interval: 0,
-            color: '#59BEED',
+            color: '#333',
             fontSize: this.labelSize
           },
            axisLine: {
-            lineStyle: {
-              color: '#1977C6'
-            }
+            show: false,
           },
           splitLine: {
             lineStyle: {
-              color: '#082E81',
-              type: 'dashed'
             }
           },
           axisTick: false
         },
         yAxis: {
           axisLabel: {
-            color: '#59BEED',
+            color: '#333',
             fontSize: this.labelSize
           },
           nameTextStyle: {
-            color: '#59BEED',
+            color: '#333',
             fontSize: this.labelSize
           },
           axisLine: {
+            show: false,
             lineStyle: {
-              color: '#1977C6'
+              // color: '#1977C6'
             }
           },
           splitLine: {
             lineStyle: {
-              color: '#082E81',
-              type: 'dashed'
             }
           },
           axisTick: false,
@@ -150,7 +123,16 @@ export default {
         itemStyle: {
           barBorderRadius: this.legendIcon === 'circle' ? [5, 5, 0, 0] : 0,
           color: isNaN(this.colorIdx) ? this.colorArr[idx] : colors[this.colorIdx]
-        }
+        },
+        label: { //柱体上显示数值
+          show: true,//开启显示
+          position: 'top',//在上方显示
+          textStyle: {//数值样式
+            fontSize: '7px',
+            color: '#333'
+          },
+          // formatter: '{c}',
+        },
       })
     })
     option.dataset.source = this.dataset

src/components/pieChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-const colors = ["#db6749", "#f8cd55", "#3c97d6", "#989bf8"];
+const colors = ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"];
 import * as echarts from 'echarts'
 export default {
   props: {
@@ -42,7 +42,7 @@ export default {
           icon: "circle",
           show: this.legend,
           textStyle: {
-            color: "#8BDFFD",
+            color: "#333",
             fontSize: this.isBig ? 18 : 12,
           },
           ...this.legend,
@@ -87,7 +87,7 @@ export default {
                   padding: [3, 3, 0, -12],
                 },
                 name: {
-                  color: "#8BDFFD",
+                  color: "#333",
                   align: "center",
                   lineHeight: this.labelSize,
                   padding: this.isBig ? [-20, 10, -40, 10] : [-20, 10, -30, 10],

src/pages/index/components/lead_system.vue

@@ -30,7 +30,9 @@
 <!--            </el-col>-->
 <!--          </el-row>-->
 <!--        </el-form>-->
+        <br>
         <h4>停车场数量和分布</h4>
+        <br>
         <el-table border :row-class-name="rowClassName" :data="tableData1" v-loading="loading1">
           <el-table-column v-for="(item, index) in columns1" :key="index" :label="item.label" :prop="item.key">
           </el-table-column>
@@ -40,17 +42,23 @@
 <!--                         :current-page.sync="pageNum1" :page-size.sync="pageSize1">-->
 <!--          </el-pagination>-->
 <!--        </div>-->
+        <br>
         <h4>停车位利用率</h4>
+        <br>
         <el-table border :row-class-name="rowClassName" :data="tableData2" height="300px" v-loading="loading2">
           <el-table-column v-for="(item, index) in columns2" :key="index" :label="item.label" :prop="item.key">
           </el-table-column>
         </el-table>
+        <br>
         <h4>停车时长分布</h4>
+        <br>
         <el-table border :row-class-name="rowClassName" :data="tableData3" height="300px" v-loading="loading3">
           <el-table-column v-for="(item, index) in columns3" :key="index" :label="item.label" :prop="item.key">
           </el-table-column>
         </el-table>
+        <br>
         <h4>停车场运营效率</h4>
+        <br>
         <el-table border :row-class-name="rowClassName" :data="tableData4" height="300px" v-loading="loading4">
           <el-table-column v-for="(item, index) in columns4" :key="index" :label="item.label" :prop="item.key">
           </el-table-column>

src/pages/index/components/parking_index.vue

@@ -1,33 +1,32 @@
 <template xmlns:piechart="http://www.w3.org/1999/html">
   <div class="body-wrapper">
     <div style="display: flex; justify-content: space-between;">
-      <div class="body-box" style="width: 43%;height:400px;border-radius: 5px;background-color: #f6f5f5;padding: 20px;color: #525252;">
-        <h2>概览</h2>
-        <div class="box-item" style="border: 2px dotted #a1a1a1;border-radius: 5px;padding: 20px 20px 40px 20px;margin-top: 15px">
+      <div class="body-box" style="width: 43%;height:300px;border-radius: 5px;background-color: #f6f5f5;padding: 20px;color: #525252;">
+        <h3>概览</h3>
+        <div class="box-item" style="border: 2px dotted #a1a1a1;border-radius: 5px;padding: 10px 20px;margin-top: 15px; display: flex;justify-content: space-between;">
           <h4 style="float: left">停车场总数</h4>
           <span style="float: right;color: red">{{viewData.totalPark}}</span>
         </div>
-        <div class="box-item" style="border: 2px dotted #757575;border-radius: 5px;padding: 20px 20px 40px 20px;margin-top: 15px">
+        <div class="box-item" style="border: 2px dotted #757575;border-radius: 5px;padding: 10px 20px;margin-top: 15px;display: flex;justify-content: space-between;">
           <h4 style="float: left">今日停车记录数</h4>
           <span style="float: right;color: red">{{viewData.totalRecord}}</span>
         </div>
-        <div class="box-item" style="border: 2px dotted #757575;border-radius: 5px;padding: 20px 20px 40px 20px;margin-top: 15px">
+        <div class="box-item" style="border: 2px dotted #757575;border-radius: 5px;padding: 10px 20px;margin-top: 15px;display: flex;justify-content: space-between;">
           <h4 style="float: left">今日实收总额</h4>
           <span style="float: right;color: red">{{viewData.totalFee || 0}}</span>
         </div>
-        <div class="box-item" style="border: 2px dotted #757575;border-radius: 5px;padding: 20px 20px 40px 20px;margin-top: 15px">
+        <div class="box-item" style="border: 2px dotted #757575;border-radius: 5px;padding: 10px 20px;margin-top: 15px;display: flex;justify-content: space-between;">
           <h4 style="float: left">日均时长泊位利用率</h4>
           <span style="float: right;color: red">{{viewData.dayBerthRate}}%</span>
         </div>
       </div>
-      <div class="body-box" style="width: 48%;height:400px;border-radius: 5px;background-color: #f6f5f5;padding: 20px;color: #525252;">
-        <h1>停车收入概览</h1>
+      <div class="body-box" style="width: 48%;height:300px;border-radius: 5px;background-color: #f6f5f5;padding: 20px;color: #525252;">
+        <h3>停车收入概览</h3>
         <piechart
           class="model-pie-body"
           id="chart1"
           :roseType="false"
           :radiusArr="['30%', '70%']"
-          :colorArr="modelPieColor"
           :labelFormat="['{name|{b}}', '{sub|{d}%}', '{hr|}']"
           :dataset="modelData"
           :encode="{ itemName: 'name', value: 'value' }"
@@ -35,18 +34,16 @@
       </div>
     </div>
     <div style="display: flex; justify-content: space-between;">
-      <div class="body-box" style="width:98%;height:400px;border-radius: 5px;background-color: #f6f5f5;padding: 20px;margin-top: 20px;color: #525252;">
+      <div class="body-box" style="width:98%;height:300px;border-radius: 5px;background-color: #f6f5f5;padding: 20px;margin-top: 20px;color: #525252;">
         <h1>停车收入概览</h1>
         <barchart
           class="side-chart"
           :autoStop="false"
-          :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
           legendIcon="react"
-          :bottom="30"
-          :xlabelFormat="xLabelFormat"
-          :top="60"
+          :bottom="50"
+          :top="40"
           yAxisName="(辆)"
-          :tooltip="tooltipFormat"
+          :tooltip="false"
           :dataset="bardata"
           :encode="[
             {x: 'mouth', y: 'hs', seriesName: '停车数量'}]"
@@ -75,7 +72,6 @@ export default {
         totalFee:0,
         dayBerthRate:0
       },
-      modelPieColor: ["#4382f6", "#81f878", "#f2ff90", "#FF9800", "#9C27B0"],
       modelData: [],
       bardata: [],
     }
@@ -124,6 +120,7 @@ export default {
 </script>
 <style  lang="scss" scoped>
 .body-wrapper {
+  background: transparent;
   .form-wrapper {
     .el-form-item {
       margin-bottom: 0px;