diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue
index 51111e7..4ea5d26 100644
--- a/src/views/dashboard/components/orderStatistics.vue
+++ b/src/views/dashboard/components/orderStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">订单统计</span>
@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
     </div>
@@ -118,10 +118,15 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue
index 51111e7..4ea5d26 100644
--- a/src/views/dashboard/components/orderStatistics.vue
+++ b/src/views/dashboard/components/orderStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">订单统计</span>
@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
     </div>
@@ -118,10 +118,15 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue
index 674e50c..a6f7690 100644
--- a/src/views/dashboard/components/supplierAssessment.vue
+++ b/src/views/dashboard/components/supplierAssessment.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商年度考核统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart
         :seriesData="seriesData"
@@ -155,11 +155,14 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue
index 51111e7..4ea5d26 100644
--- a/src/views/dashboard/components/orderStatistics.vue
+++ b/src/views/dashboard/components/orderStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">订单统计</span>
@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
     </div>
@@ -118,10 +118,15 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue
index 674e50c..a6f7690 100644
--- a/src/views/dashboard/components/supplierAssessment.vue
+++ b/src/views/dashboard/components/supplierAssessment.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商年度考核统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart
         :seriesData="seriesData"
@@ -155,11 +155,14 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierCommon.vue b/src/views/dashboard/components/supplierCommon.vue
index e9f478f..6364694 100644
--- a/src/views/dashboard/components/supplierCommon.vue
+++ b/src/views/dashboard/components/supplierCommon.vue
@@ -1,16 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -288,11 +289,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue
index 51111e7..4ea5d26 100644
--- a/src/views/dashboard/components/orderStatistics.vue
+++ b/src/views/dashboard/components/orderStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">订单统计</span>
@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
     </div>
@@ -118,10 +118,15 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue
index 674e50c..a6f7690 100644
--- a/src/views/dashboard/components/supplierAssessment.vue
+++ b/src/views/dashboard/components/supplierAssessment.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商年度考核统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart
         :seriesData="seriesData"
@@ -155,11 +155,14 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierCommon.vue b/src/views/dashboard/components/supplierCommon.vue
index e9f478f..6364694 100644
--- a/src/views/dashboard/components/supplierCommon.vue
+++ b/src/views/dashboard/components/supplierCommon.vue
@@ -1,16 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -288,11 +289,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/supplierCount.vue b/src/views/dashboard/components/supplierCount.vue
index 7073cd1..ae47437 100644
--- a/src/views/dashboard/components/supplierCount.vue
+++ b/src/views/dashboard/components/supplierCount.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{type === 'supplier' ? '供应商注册统计' : '设备注册数量统计'}}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -80,11 +80,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue
index 51111e7..4ea5d26 100644
--- a/src/views/dashboard/components/orderStatistics.vue
+++ b/src/views/dashboard/components/orderStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">订单统计</span>
@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
     </div>
@@ -118,10 +118,15 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue
index 674e50c..a6f7690 100644
--- a/src/views/dashboard/components/supplierAssessment.vue
+++ b/src/views/dashboard/components/supplierAssessment.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商年度考核统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart
         :seriesData="seriesData"
@@ -155,11 +155,14 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierCommon.vue b/src/views/dashboard/components/supplierCommon.vue
index e9f478f..6364694 100644
--- a/src/views/dashboard/components/supplierCommon.vue
+++ b/src/views/dashboard/components/supplierCommon.vue
@@ -1,16 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -288,11 +289,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/supplierCount.vue b/src/views/dashboard/components/supplierCount.vue
index 7073cd1..ae47437 100644
--- a/src/views/dashboard/components/supplierCount.vue
+++ b/src/views/dashboard/components/supplierCount.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{type === 'supplier' ? '供应商注册统计' : '设备注册数量统计'}}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -80,11 +80,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierEvaluation.vue b/src/views/dashboard/components/supplierEvaluation.vue
index 9a36402..0a80c2c 100644
--- a/src/views/dashboard/components/supplierEvaluation.vue
+++ b/src/views/dashboard/components/supplierEvaluation.vue
@@ -1,30 +1,21 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商季度评价统计</span>
       <el-select v-model="value" placeholder="请选择" size="mini">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
-      <MixChart
-        :seriesData="seriesData"
-        :xAxisData="xAxisData"
-        :yAxisData="yAxisData"
-      />
+      <MixChart :seriesData="seriesData" :xAxisData="xAxisData" :yAxisData="yAxisData" :style="{ 'height': parseInt(height) - 40 + 'px'}"/>
     </div>
   </div>
 </template>
     
-    <script>
+<script>
 import MixChart from "@/components/echart/barChart/MixChart.vue";
 import { getSelectContent, getEvaluate } from "@/api/cockpit/cockpit";
 export default {
@@ -145,7 +136,7 @@
     fetchChartData() {
       getEvaluate(this.value).then((res) => {
         let seriesData = [];
-        let legend=[]
+        let legend = []
         if (res.data.length > 0) {
           for (var user in res.data[0]) {
             legend.push(user);
@@ -205,7 +196,7 @@
         //     interval: 20,
         //   },
         // ];
-        this.legend = legend.slice(0,5);
+        this.legend = legend.slice(0, 5);
       });
     },
   },
@@ -217,13 +208,20 @@
 };
 </script>
     
-    <style lang="scss" scoped>
+<style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
+
   }
 }
 </style>
\ No newline at end of file

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue
index 51111e7..4ea5d26 100644
--- a/src/views/dashboard/components/orderStatistics.vue
+++ b/src/views/dashboard/components/orderStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">订单统计</span>
@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
     </div>
@@ -118,10 +118,15 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue
index 674e50c..a6f7690 100644
--- a/src/views/dashboard/components/supplierAssessment.vue
+++ b/src/views/dashboard/components/supplierAssessment.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商年度考核统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart
         :seriesData="seriesData"
@@ -155,11 +155,14 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierCommon.vue b/src/views/dashboard/components/supplierCommon.vue
index e9f478f..6364694 100644
--- a/src/views/dashboard/components/supplierCommon.vue
+++ b/src/views/dashboard/components/supplierCommon.vue
@@ -1,16 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -288,11 +289,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/supplierCount.vue b/src/views/dashboard/components/supplierCount.vue
index 7073cd1..ae47437 100644
--- a/src/views/dashboard/components/supplierCount.vue
+++ b/src/views/dashboard/components/supplierCount.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{type === 'supplier' ? '供应商注册统计' : '设备注册数量统计'}}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -80,11 +80,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierEvaluation.vue b/src/views/dashboard/components/supplierEvaluation.vue
index 9a36402..0a80c2c 100644
--- a/src/views/dashboard/components/supplierEvaluation.vue
+++ b/src/views/dashboard/components/supplierEvaluation.vue
@@ -1,30 +1,21 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商季度评价统计</span>
       <el-select v-model="value" placeholder="请选择" size="mini">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
-      <MixChart
-        :seriesData="seriesData"
-        :xAxisData="xAxisData"
-        :yAxisData="yAxisData"
-      />
+      <MixChart :seriesData="seriesData" :xAxisData="xAxisData" :yAxisData="yAxisData" :style="{ 'height': parseInt(height) - 40 + 'px'}"/>
     </div>
   </div>
 </template>
     
-    <script>
+<script>
 import MixChart from "@/components/echart/barChart/MixChart.vue";
 import { getSelectContent, getEvaluate } from "@/api/cockpit/cockpit";
 export default {
@@ -145,7 +136,7 @@
     fetchChartData() {
       getEvaluate(this.value).then((res) => {
         let seriesData = [];
-        let legend=[]
+        let legend = []
         if (res.data.length > 0) {
           for (var user in res.data[0]) {
             legend.push(user);
@@ -205,7 +196,7 @@
         //     interval: 20,
         //   },
         // ];
-        this.legend = legend.slice(0,5);
+        this.legend = legend.slice(0, 5);
       });
     },
   },
@@ -217,13 +208,20 @@
 };
 </script>
     
-    <style lang="scss" scoped>
+<style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
+
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue
index 3e41367..89b5263 100644
--- a/src/views/dashboard/components/supplierList.vue
+++ b/src/views/dashboard/components/supplierList.vue
@@ -1,104 +1,107 @@
 <template>
-    <!-- 供应商注册、审核通过、注册设备数量 -->
-    <div class="container" :style="{'height':height,'width':width}">
-      <div
-        v-for="(item) of device"
-        class="device"
-        :key="item.title"
-      >
-        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
-        <div class="content">
-          <div>{{ item.title }}</div>
-          <div class="count">{{ item.count }}</div>
-        </div>
+  <!-- 供应商注册、审核通过、注册设备数量 -->
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item) of device" class="device" :key="item.title">
+      <div>
+        <svg-icon :icon-class="item.icon"></svg-icon>
       </div>
+      <div class="title">{{ item.title }}</div>
+      <div class="count">{{ item.count }}</div>
     </div>
-  </template>
+  </div>
+</template>
     
-    <script>
-  import SvgIcon from "@/components/SvgIcon";
-  import { getSupplierCount } from "@/api/cockpit/cockpit";
-  export default {
-    name: "supplierList",
-    components: {
-      SvgIcon,
+<script>
+import SvgIcon from "@/components/SvgIcon";
+import { getSupplierCount } from "@/api/cockpit/cockpit";
+export default {
+  name: "supplierList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    width: {
+      type: String,
+      default: '500px'
     },
-    props:{
-        width:{
-            type:String,
-            default:'500px'
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      device: [
+        {
+          title: "供应商注册设备总数量",
+          count: "",
+          icon: "cockpit-device-register",
+          type: "deviceCount",
         },
-        height:{
-            type:String,
-            default:'300px'
-        }
-    },
-    data() {
-      return {
-        device: [
-          {
-            title: "供应商注册设备总数量",
-            count: "",
-            icon: "cockpit-device-register",
-            type: "deviceCount",
-          },
-          {
-            title: "供应商审核通过总数量",
-            count: "",
-            icon: "cockpit-approved",
-            type: "approvedCount",
-          },
-          {
-            title: "供应商注册总数量",
-            count: "",
-            icon: "cockpit-supplier-register",
-            type: "approvedCount",
-          },
-        ],
-      };
-    },
-    methods: {
-      fetchData() {
-        // 供应商注册、审核通过、注册设备数量
-        getSupplierCount().then((res) => {
-          for (var i = 0; i < this.device.length; i++) {
-            for (var device in res.data) {
-              if(this.device[i].type === device) {
-                this.device[i].count = res.data[device]
-              }
+        {
+          title: "供应商审核通过总数量",
+          count: "",
+          icon: "cockpit-approved",
+          type: "approvedCount",
+        },
+        {
+          title: "供应商注册总数量",
+          count: "",
+          icon: "cockpit-supplier-register",
+          type: "approvedCount",
+        },
+      ],
+    };
+  },
+  methods: {
+    fetchData() {
+      // 供应商注册、审核通过、注册设备数量
+      getSupplierCount().then((res) => {
+        for (var i = 0; i < this.device.length; i++) {
+          for (var device in res.data) {
+            if (this.device[i].type === device) {
+              this.device[i].count = res.data[device]
             }
           }
-        });
-      },
+        }
+      });
     },
-    created() {
-      this.fetchData();
-    },
-  };
-  </script>
+  },
+  created() {
+    this.fetchData();
+  },
+};
+</script>
     
-    <style lang="scss" scoped>
-  .container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: baseline;
-    .device {
-      width: 60%;
-      display: flex;
-    //   justify-content: ;
-      font-size: 20px;
-      ::v-deep .svg-icon {
-        width: 40px;
-        height: 40px;
-        color: rgb(64, 158, 255);
-      }
-      .content {
-        margin-left: 10px;
-      }
-      .count{
-        text-align: center;
-      }
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+  justify-content: space-around;
+  align-items: center;
+  .device {
+    color: #2076a1;
+    font-size:16px;
+    font-weight: 700;
+    ::v-deep .svg-icon {
+      width: 80px;
+      height: 80px;
+      color: rgb(64, 158, 255);
+    }
+    .count{
+      width: 80px;
+      font-size: 48px;
+      color: #ffb400;
+      font-weight: 700;
+      text-align: center;
+    }
+    .title{
+      width: 80px;
+      word-wrap: break-word;
     }
   }
-  </style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue
index 51111e7..4ea5d26 100644
--- a/src/views/dashboard/components/orderStatistics.vue
+++ b/src/views/dashboard/components/orderStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">订单统计</span>
@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
     </div>
@@ -118,10 +118,15 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue
index 674e50c..a6f7690 100644
--- a/src/views/dashboard/components/supplierAssessment.vue
+++ b/src/views/dashboard/components/supplierAssessment.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商年度考核统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart
         :seriesData="seriesData"
@@ -155,11 +155,14 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierCommon.vue b/src/views/dashboard/components/supplierCommon.vue
index e9f478f..6364694 100644
--- a/src/views/dashboard/components/supplierCommon.vue
+++ b/src/views/dashboard/components/supplierCommon.vue
@@ -1,16 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -288,11 +289,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/supplierCount.vue b/src/views/dashboard/components/supplierCount.vue
index 7073cd1..ae47437 100644
--- a/src/views/dashboard/components/supplierCount.vue
+++ b/src/views/dashboard/components/supplierCount.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{type === 'supplier' ? '供应商注册统计' : '设备注册数量统计'}}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -80,11 +80,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierEvaluation.vue b/src/views/dashboard/components/supplierEvaluation.vue
index 9a36402..0a80c2c 100644
--- a/src/views/dashboard/components/supplierEvaluation.vue
+++ b/src/views/dashboard/components/supplierEvaluation.vue
@@ -1,30 +1,21 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商季度评价统计</span>
       <el-select v-model="value" placeholder="请选择" size="mini">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
-      <MixChart
-        :seriesData="seriesData"
-        :xAxisData="xAxisData"
-        :yAxisData="yAxisData"
-      />
+      <MixChart :seriesData="seriesData" :xAxisData="xAxisData" :yAxisData="yAxisData" :style="{ 'height': parseInt(height) - 40 + 'px'}"/>
     </div>
   </div>
 </template>
     
-    <script>
+<script>
 import MixChart from "@/components/echart/barChart/MixChart.vue";
 import { getSelectContent, getEvaluate } from "@/api/cockpit/cockpit";
 export default {
@@ -145,7 +136,7 @@
     fetchChartData() {
       getEvaluate(this.value).then((res) => {
         let seriesData = [];
-        let legend=[]
+        let legend = []
         if (res.data.length > 0) {
           for (var user in res.data[0]) {
             legend.push(user);
@@ -205,7 +196,7 @@
         //     interval: 20,
         //   },
         // ];
-        this.legend = legend.slice(0,5);
+        this.legend = legend.slice(0, 5);
       });
     },
   },
@@ -217,13 +208,20 @@
 };
 </script>
     
-    <style lang="scss" scoped>
+<style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
+
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue
index 3e41367..89b5263 100644
--- a/src/views/dashboard/components/supplierList.vue
+++ b/src/views/dashboard/components/supplierList.vue
@@ -1,104 +1,107 @@
 <template>
-    <!-- 供应商注册、审核通过、注册设备数量 -->
-    <div class="container" :style="{'height':height,'width':width}">
-      <div
-        v-for="(item) of device"
-        class="device"
-        :key="item.title"
-      >
-        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
-        <div class="content">
-          <div>{{ item.title }}</div>
-          <div class="count">{{ item.count }}</div>
-        </div>
+  <!-- 供应商注册、审核通过、注册设备数量 -->
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item) of device" class="device" :key="item.title">
+      <div>
+        <svg-icon :icon-class="item.icon"></svg-icon>
       </div>
+      <div class="title">{{ item.title }}</div>
+      <div class="count">{{ item.count }}</div>
     </div>
-  </template>
+  </div>
+</template>
     
-    <script>
-  import SvgIcon from "@/components/SvgIcon";
-  import { getSupplierCount } from "@/api/cockpit/cockpit";
-  export default {
-    name: "supplierList",
-    components: {
-      SvgIcon,
+<script>
+import SvgIcon from "@/components/SvgIcon";
+import { getSupplierCount } from "@/api/cockpit/cockpit";
+export default {
+  name: "supplierList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    width: {
+      type: String,
+      default: '500px'
     },
-    props:{
-        width:{
-            type:String,
-            default:'500px'
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      device: [
+        {
+          title: "供应商注册设备总数量",
+          count: "",
+          icon: "cockpit-device-register",
+          type: "deviceCount",
         },
-        height:{
-            type:String,
-            default:'300px'
-        }
-    },
-    data() {
-      return {
-        device: [
-          {
-            title: "供应商注册设备总数量",
-            count: "",
-            icon: "cockpit-device-register",
-            type: "deviceCount",
-          },
-          {
-            title: "供应商审核通过总数量",
-            count: "",
-            icon: "cockpit-approved",
-            type: "approvedCount",
-          },
-          {
-            title: "供应商注册总数量",
-            count: "",
-            icon: "cockpit-supplier-register",
-            type: "approvedCount",
-          },
-        ],
-      };
-    },
-    methods: {
-      fetchData() {
-        // 供应商注册、审核通过、注册设备数量
-        getSupplierCount().then((res) => {
-          for (var i = 0; i < this.device.length; i++) {
-            for (var device in res.data) {
-              if(this.device[i].type === device) {
-                this.device[i].count = res.data[device]
-              }
+        {
+          title: "供应商审核通过总数量",
+          count: "",
+          icon: "cockpit-approved",
+          type: "approvedCount",
+        },
+        {
+          title: "供应商注册总数量",
+          count: "",
+          icon: "cockpit-supplier-register",
+          type: "approvedCount",
+        },
+      ],
+    };
+  },
+  methods: {
+    fetchData() {
+      // 供应商注册、审核通过、注册设备数量
+      getSupplierCount().then((res) => {
+        for (var i = 0; i < this.device.length; i++) {
+          for (var device in res.data) {
+            if (this.device[i].type === device) {
+              this.device[i].count = res.data[device]
             }
           }
-        });
-      },
+        }
+      });
     },
-    created() {
-      this.fetchData();
-    },
-  };
-  </script>
+  },
+  created() {
+    this.fetchData();
+  },
+};
+</script>
     
-    <style lang="scss" scoped>
-  .container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: baseline;
-    .device {
-      width: 60%;
-      display: flex;
-    //   justify-content: ;
-      font-size: 20px;
-      ::v-deep .svg-icon {
-        width: 40px;
-        height: 40px;
-        color: rgb(64, 158, 255);
-      }
-      .content {
-        margin-left: 10px;
-      }
-      .count{
-        text-align: center;
-      }
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+  justify-content: space-around;
+  align-items: center;
+  .device {
+    color: #2076a1;
+    font-size:16px;
+    font-weight: 700;
+    ::v-deep .svg-icon {
+      width: 80px;
+      height: 80px;
+      color: rgb(64, 158, 255);
+    }
+    .count{
+      width: 80px;
+      font-size: 48px;
+      color: #ffb400;
+      font-weight: 700;
+      text-align: center;
+    }
+    .title{
+      width: 80px;
+      word-wrap: break-word;
     }
   }
-  </style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierStatus.vue b/src/views/dashboard/components/supplierStatus.vue
index 5d85a68..7892277 100644
--- a/src/views/dashboard/components/supplierStatus.vue
+++ b/src/views/dashboard/components/supplierStatus.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商状态统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
-      <doughnutChart :seriesData="seriesData" :title="title"/>
+      <doughnutChart :seriesData="seriesData" :title="title" />
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import doughnutChart from "../../../components/echart/pieChart/doughnutChart.vue";
 import { getSupplierStatus } from "@/api/cockpit/cockpit";
 export default {
@@ -37,44 +37,11 @@
     return {
       seriesData: [],
       indicator: [],
-      title:''
+      title: ''
     };
   },
   mounted() {
-      this.fetchData();  //真实获取数据，后期接口完成直接使用
-    // setTimeout(() => {
-    //   // 模拟数据后期注释掉
-    //   let data = [
-    //     {
-    //       status: "1",
-    //       statusName: "审核通过",
-    //       supplierCount: 70,
-    //     },
-    //     {
-    //       status: "2",
-    //       statusName: "审核中",
-    //       supplierCount: 30,
-    //     },
-    //     {
-    //       status: "3",
-    //       statusName: "审核不通过",
-    //       supplierCount: 20,
-    //     },
-    //   ];
-    //   this.seriesData = data.map((item) => {
-    //     return {
-    //       value: item.supplierCount,
-    //       name: item.statusName,
-    //     };
-    //   });
-    //   this.indicator = data.map((item) => {
-    //     return {
-    //       name: item.statusName,
-    //       max: item.supplierCount + 10,
-    //     };
-    //   });
-    //   this.title = `总\n\n50`
-    // }, 2000);
+    this.fetchData();  //真实获取数据，后期接口完成直接使用
   },
   methods: {
     fetchData() {
@@ -91,25 +58,31 @@
             max: item.supplierCount + 10,
           };
         });
-        let arr =[]
+        let arr = []
         res.data.forEach(element => {
           arr.push(element.supplierCount)
         });
-        this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}`
+        this.title = `总\n\n${arr.reduce((pre, cur) => pre + cur)}`
       });
     },
   },
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+
   }
+
   .chart-content {
     // width: 600px;
     // height: 400px;

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue
index 51111e7..4ea5d26 100644
--- a/src/views/dashboard/components/orderStatistics.vue
+++ b/src/views/dashboard/components/orderStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">订单统计</span>
@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
     </div>
@@ -118,10 +118,15 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue
index 674e50c..a6f7690 100644
--- a/src/views/dashboard/components/supplierAssessment.vue
+++ b/src/views/dashboard/components/supplierAssessment.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商年度考核统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart
         :seriesData="seriesData"
@@ -155,11 +155,14 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierCommon.vue b/src/views/dashboard/components/supplierCommon.vue
index e9f478f..6364694 100644
--- a/src/views/dashboard/components/supplierCommon.vue
+++ b/src/views/dashboard/components/supplierCommon.vue
@@ -1,16 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -288,11 +289,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/supplierCount.vue b/src/views/dashboard/components/supplierCount.vue
index 7073cd1..ae47437 100644
--- a/src/views/dashboard/components/supplierCount.vue
+++ b/src/views/dashboard/components/supplierCount.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{type === 'supplier' ? '供应商注册统计' : '设备注册数量统计'}}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -80,11 +80,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierEvaluation.vue b/src/views/dashboard/components/supplierEvaluation.vue
index 9a36402..0a80c2c 100644
--- a/src/views/dashboard/components/supplierEvaluation.vue
+++ b/src/views/dashboard/components/supplierEvaluation.vue
@@ -1,30 +1,21 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商季度评价统计</span>
       <el-select v-model="value" placeholder="请选择" size="mini">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
-      <MixChart
-        :seriesData="seriesData"
-        :xAxisData="xAxisData"
-        :yAxisData="yAxisData"
-      />
+      <MixChart :seriesData="seriesData" :xAxisData="xAxisData" :yAxisData="yAxisData" :style="{ 'height': parseInt(height) - 40 + 'px'}"/>
     </div>
   </div>
 </template>
     
-    <script>
+<script>
 import MixChart from "@/components/echart/barChart/MixChart.vue";
 import { getSelectContent, getEvaluate } from "@/api/cockpit/cockpit";
 export default {
@@ -145,7 +136,7 @@
     fetchChartData() {
       getEvaluate(this.value).then((res) => {
         let seriesData = [];
-        let legend=[]
+        let legend = []
         if (res.data.length > 0) {
           for (var user in res.data[0]) {
             legend.push(user);
@@ -205,7 +196,7 @@
         //     interval: 20,
         //   },
         // ];
-        this.legend = legend.slice(0,5);
+        this.legend = legend.slice(0, 5);
       });
     },
   },
@@ -217,13 +208,20 @@
 };
 </script>
     
-    <style lang="scss" scoped>
+<style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
+
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue
index 3e41367..89b5263 100644
--- a/src/views/dashboard/components/supplierList.vue
+++ b/src/views/dashboard/components/supplierList.vue
@@ -1,104 +1,107 @@
 <template>
-    <!-- 供应商注册、审核通过、注册设备数量 -->
-    <div class="container" :style="{'height':height,'width':width}">
-      <div
-        v-for="(item) of device"
-        class="device"
-        :key="item.title"
-      >
-        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
-        <div class="content">
-          <div>{{ item.title }}</div>
-          <div class="count">{{ item.count }}</div>
-        </div>
+  <!-- 供应商注册、审核通过、注册设备数量 -->
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item) of device" class="device" :key="item.title">
+      <div>
+        <svg-icon :icon-class="item.icon"></svg-icon>
       </div>
+      <div class="title">{{ item.title }}</div>
+      <div class="count">{{ item.count }}</div>
     </div>
-  </template>
+  </div>
+</template>
     
-    <script>
-  import SvgIcon from "@/components/SvgIcon";
-  import { getSupplierCount } from "@/api/cockpit/cockpit";
-  export default {
-    name: "supplierList",
-    components: {
-      SvgIcon,
+<script>
+import SvgIcon from "@/components/SvgIcon";
+import { getSupplierCount } from "@/api/cockpit/cockpit";
+export default {
+  name: "supplierList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    width: {
+      type: String,
+      default: '500px'
     },
-    props:{
-        width:{
-            type:String,
-            default:'500px'
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      device: [
+        {
+          title: "供应商注册设备总数量",
+          count: "",
+          icon: "cockpit-device-register",
+          type: "deviceCount",
         },
-        height:{
-            type:String,
-            default:'300px'
-        }
-    },
-    data() {
-      return {
-        device: [
-          {
-            title: "供应商注册设备总数量",
-            count: "",
-            icon: "cockpit-device-register",
-            type: "deviceCount",
-          },
-          {
-            title: "供应商审核通过总数量",
-            count: "",
-            icon: "cockpit-approved",
-            type: "approvedCount",
-          },
-          {
-            title: "供应商注册总数量",
-            count: "",
-            icon: "cockpit-supplier-register",
-            type: "approvedCount",
-          },
-        ],
-      };
-    },
-    methods: {
-      fetchData() {
-        // 供应商注册、审核通过、注册设备数量
-        getSupplierCount().then((res) => {
-          for (var i = 0; i < this.device.length; i++) {
-            for (var device in res.data) {
-              if(this.device[i].type === device) {
-                this.device[i].count = res.data[device]
-              }
+        {
+          title: "供应商审核通过总数量",
+          count: "",
+          icon: "cockpit-approved",
+          type: "approvedCount",
+        },
+        {
+          title: "供应商注册总数量",
+          count: "",
+          icon: "cockpit-supplier-register",
+          type: "approvedCount",
+        },
+      ],
+    };
+  },
+  methods: {
+    fetchData() {
+      // 供应商注册、审核通过、注册设备数量
+      getSupplierCount().then((res) => {
+        for (var i = 0; i < this.device.length; i++) {
+          for (var device in res.data) {
+            if (this.device[i].type === device) {
+              this.device[i].count = res.data[device]
             }
           }
-        });
-      },
+        }
+      });
     },
-    created() {
-      this.fetchData();
-    },
-  };
-  </script>
+  },
+  created() {
+    this.fetchData();
+  },
+};
+</script>
     
-    <style lang="scss" scoped>
-  .container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: baseline;
-    .device {
-      width: 60%;
-      display: flex;
-    //   justify-content: ;
-      font-size: 20px;
-      ::v-deep .svg-icon {
-        width: 40px;
-        height: 40px;
-        color: rgb(64, 158, 255);
-      }
-      .content {
-        margin-left: 10px;
-      }
-      .count{
-        text-align: center;
-      }
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+  justify-content: space-around;
+  align-items: center;
+  .device {
+    color: #2076a1;
+    font-size:16px;
+    font-weight: 700;
+    ::v-deep .svg-icon {
+      width: 80px;
+      height: 80px;
+      color: rgb(64, 158, 255);
+    }
+    .count{
+      width: 80px;
+      font-size: 48px;
+      color: #ffb400;
+      font-weight: 700;
+      text-align: center;
+    }
+    .title{
+      width: 80px;
+      word-wrap: break-word;
     }
   }
-  </style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierStatus.vue b/src/views/dashboard/components/supplierStatus.vue
index 5d85a68..7892277 100644
--- a/src/views/dashboard/components/supplierStatus.vue
+++ b/src/views/dashboard/components/supplierStatus.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商状态统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
-      <doughnutChart :seriesData="seriesData" :title="title"/>
+      <doughnutChart :seriesData="seriesData" :title="title" />
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import doughnutChart from "../../../components/echart/pieChart/doughnutChart.vue";
 import { getSupplierStatus } from "@/api/cockpit/cockpit";
 export default {
@@ -37,44 +37,11 @@
     return {
       seriesData: [],
       indicator: [],
-      title:''
+      title: ''
     };
   },
   mounted() {
-      this.fetchData();  //真实获取数据，后期接口完成直接使用
-    // setTimeout(() => {
-    //   // 模拟数据后期注释掉
-    //   let data = [
-    //     {
-    //       status: "1",
-    //       statusName: "审核通过",
-    //       supplierCount: 70,
-    //     },
-    //     {
-    //       status: "2",
-    //       statusName: "审核中",
-    //       supplierCount: 30,
-    //     },
-    //     {
-    //       status: "3",
-    //       statusName: "审核不通过",
-    //       supplierCount: 20,
-    //     },
-    //   ];
-    //   this.seriesData = data.map((item) => {
-    //     return {
-    //       value: item.supplierCount,
-    //       name: item.statusName,
-    //     };
-    //   });
-    //   this.indicator = data.map((item) => {
-    //     return {
-    //       name: item.statusName,
-    //       max: item.supplierCount + 10,
-    //     };
-    //   });
-    //   this.title = `总\n\n50`
-    // }, 2000);
+    this.fetchData();  //真实获取数据，后期接口完成直接使用
   },
   methods: {
     fetchData() {
@@ -91,25 +58,31 @@
             max: item.supplierCount + 10,
           };
         });
-        let arr =[]
+        let arr = []
         res.data.forEach(element => {
           arr.push(element.supplierCount)
         });
-        this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}`
+        this.title = `总\n\n${arr.reduce((pre, cur) => pre + cur)}`
       });
     },
   },
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+
   }
+
   .chart-content {
     // width: 600px;
     // height: 400px;
diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue
index 0985533..1a96998 100644
--- a/src/views/dashboard/managementPanel.vue
+++ b/src/views/dashboard/managementPanel.vue
@@ -1,23 +1,23 @@
 <template>
   <!-- 经营面板 -->
   <div class="container">
-    <managementList class="common-width"/>
+    <managementList class="common-width" :width="width" :height="height"/>
     <!-- 用户数量变化趋势 -->
-    <layoutStackAreaChartTrend class="common-width"/> 
+    <layoutStackAreaChartTrend class="common-width" :width="width" :height="height"/> 
     <!-- 用户分布统计 -->
-    <layoutChartRadar class="common-width"/>
+    <layoutChartRadar class="common-width" :width="width" :height="height"/>
     <!-- 订单统计-->
-    <orderStatistics class="common-width"/>
+    <orderStatistics class="common-width" :width="width" :height="height"/>
     <!-- 经销商订单同比/环比统计 -->
-    <commonSelectChart :fetchdata="getOrderRatio" class="common-width" name="经销商订单同比/环比统计" :legendDefault="['经销商订单数','环比值','同比值']"/>
+    <commonSelectChart :fetchdata="getOrderRatio" class="common-width" name="经销商订单同比/环比统计" :legendDefault="['经销商订单数','环比值','同比值']" :width="width" :height="height"/>
     <!-- 分子公司订单同比/环比统计 -->
-    <commonSelectChart :fetchdata="getBranchOrderRatio" class="common-width" name="分子公司订单同比/环比统计" :legendDefault="['分子公司订单数','环比值','同比值']"/>
+    <commonSelectChart :fetchdata="getBranchOrderRatio" class="common-width" name="分子公司订单同比/环比统计" :legendDefault="['分子公司订单数','环比值','同比值']" :width="width" :height="height"/>
     <!-- 商机统计 -->
-    <opportunityStatistics class="common-width"/>
+    <opportunityStatistics class="common-width" :width="width" :height="height"/>
     <!-- 商机同比/环比统计 -->
-    <commonSelectChart :fetchdata="getBusinessOpportunityRatio" class="common-width" name="商机同比/环比统计" :legendDefault="['商机个数','环比值','同比值']"/>
+    <commonSelectChart :fetchdata="getBusinessOpportunityRatio" class="common-width" name="商机同比/环比统计" :legendDefault="['商机个数','环比值','同比值']" :width="width" :height="height"/>
     <!-- 商机转订单同比/环比统计 -->
-    <commonSelectChart :fetchdata="getBusinessOpportunityTurnRatio" class="common-width" name="商机转订单同比/环比统计" :legendDefault="['商机转订单数','环比值','同比值']"/>
+    <commonSelectChart :fetchdata="getBusinessOpportunityTurnRatio" class="common-width" name="商机转订单同比/环比统计" :legendDefault="['商机转订单数','环比值','同比值']" :width="width" :height="height"/>
   </div>
 </template>
 
@@ -48,6 +48,12 @@
       getBranchOrderRatio:getBranchOrderRatio,
       getBusinessOpportunityRatio:getBusinessOpportunityRatio,
       getBusinessOpportunityTurnRatio:getBusinessOpportunityTurnRatio
+    },
+    data(){
+      return{
+        width:'520px',
+        height:'260px'
+      }
     }
 }
 </script>
@@ -59,7 +65,8 @@
   flex-wrap: wrap;
   overflow-x: hidden;
   .common-width{
-      width: 33%;
+     width:520px;
+     height:260px;
   }
 }
 </style>
\ No newline at end of file

diff --git a/src/components/echart/barChart/MixChart.vue b/src/components/echart/barChart/MixChart.vue
index c47e798..2b1d478 100644
--- a/src/components/echart/barChart/MixChart.vue
+++ b/src/components/echart/barChart/MixChart.vue
@@ -2,7 +2,7 @@
   <div
     :id="id"
     :class="className"
-    :style="{ height: '300px', width: '500px' }"
+    :style="{ 'height': height, 'width': width }"
   />
 </template>
 <!-- 折柱混合图表 -->
@@ -23,7 +23,7 @@
     },
     width: {
       type: String,
-      default: "500px",
+      default: "100%",
     },
     height: {
       type: String,
diff --git a/src/components/echart/lineChart/gradientLineChart.vue b/src/components/echart/lineChart/gradientLineChart.vue
index 0078deb..945f9af 100644
--- a/src/components/echart/lineChart/gradientLineChart.vue
+++ b/src/components/echart/lineChart/gradientLineChart.vue
@@ -68,7 +68,7 @@
       option: {
         grid: {
           left: 10,
-          right: 5,
+          right: 10,
           bottom: 30,
           top: 10,
           containLabel: true,
diff --git a/src/views/dashboard/components/commonSelectChart.vue b/src/views/dashboard/components/commonSelectChart.vue
index d9e611f..ffdfb1c 100644
--- a/src/views/dashboard/components/commonSelectChart.vue
+++ b/src/views/dashboard/components/commonSelectChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -241,10 +242,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/layoutChartRadar.vue b/src/views/dashboard/components/layoutChartRadar.vue
index 9665720..71492ea 100644
--- a/src/views/dashboard/components/layoutChartRadar.vue
+++ b/src/views/dashboard/components/layoutChartRadar.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户分布统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <baseRadarChartVue :seriesData="seriesData" :indicator="indicator" />
     </div>
@@ -85,11 +85,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/layoutChartVerticalBar.vue b/src/views/dashboard/components/layoutChartVerticalBar.vue
index 45ef98e..5defa8d 100644
--- a/src/views/dashboard/components/layoutChartVerticalBar.vue
+++ b/src/views/dashboard/components/layoutChartVerticalBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <!-- 区域设备排行榜 -->
     <div class="chart-header">
       <!--标题  -->
@@ -7,7 +7,7 @@
         this.type === "region" ? "区域设备排行榜" : "设备注册排行榜"
       }}</span>
     </div>
-    <div class="chart-content" :style="{ 'height': height}">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <verticalBarChart :seriesData="seriesData" :yAxisData="yAxisData" />
     </div>
@@ -31,6 +31,10 @@
       type: String,
       default: "200px",
     },
+    width:{
+      type:String,
+      default:'360px'
+    },
     type: {
       //使用type来区分 设备注册排行榜(register) 和 区域设备排行榜(region)
       type: String,
diff --git a/src/views/dashboard/components/layoutStackAreaChartTrend.vue b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
index 8a665d2..121f9cb 100644
--- a/src/views/dashboard/components/layoutStackAreaChartTrend.vue
+++ b/src/views/dashboard/components/layoutStackAreaChartTrend.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">用户数量变化趋势</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -82,11 +82,14 @@
 
 <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/managementList.vue b/src/views/dashboard/components/managementList.vue
index d27a0de..f7654e9 100644
--- a/src/views/dashboard/components/managementList.vue
+++ b/src/views/dashboard/components/managementList.vue
@@ -1,17 +1,17 @@
 <template>
   <!-- 各分类用户数量 -->
-  <div class="container">
-    <div v-for="item of management" class="device" :key="item.roleName">
-      <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item, index) of management" class="device" :key="item.title">
       <div class="content">
-        <div>{{ item.roleName }}</div>
-        <div>{{ item.userCount }}</div>
+        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
+        <div class="count">{{ item.userCount }}</div>
       </div>
+      <div class="title">{{ item.roleName }}</div>
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import SvgIcon from "@/components/SvgIcon";
 import { getUserCount } from "@/api/cockpit/cockpit";
 export default {
@@ -28,7 +28,7 @@
     fetchData() {
       getUserCount().then((res) => {
         this.management = res.data.map(item => {
-          return{...item,icon:'cockpit-' + item.roleName}
+          return { ...item, icon: 'cockpit-' + item.roleName }
         })
       });
     },
@@ -39,25 +39,41 @@
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   display: flex;
-  flex-wrap: wrap;
-  // justify-content: ;
+  justify-content: space-between;
+  flex-wrap:wrap;
+  align-items:center;
+  color: #2076a1;
+  font-size: 14px;
+  font-weight: 700;
+  
+ 
   .device {
-    width: 50%;
-    display: flex;
-    
-    font-size: 20px;
-    ::v-deep .svg-icon {
-      width: 40px;
-      height: 40px;
-      color: rgb(64, 158, 255);
-    }
+    width:24%;
     .content {
-      margin-left: 10px;
-      text-align: center;
+      display: flex;
+      justify-content: space-around;
+      // padding: 5px;
+      align-items: center;
+      .count{
+        font-size: 20px;
+      }
+      ::v-deep .svg-icon {
+        width: 40px;
+        height: 40px;
+      }
     }
   }
+  .title{
+    text-align: center;
+    // padding:10px ;
+    margin-top: 5px;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/opportunityStatistics.vue b/src/views/dashboard/components/opportunityStatistics.vue
index 68aa9c7..8af804b 100644
--- a/src/views/dashboard/components/opportunityStatistics.vue
+++ b/src/views/dashboard/components/opportunityStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">商机统计</span>
@@ -13,13 +13,14 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: '300px', width: '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :seriesData="seriesData"
         :legend="legend"
         :xAxisData="xAxisData"
         :yAxisData="yAxisData"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -171,10 +172,15 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/orderStatistics.vue b/src/views/dashboard/components/orderStatistics.vue
index 51111e7..4ea5d26 100644
--- a/src/views/dashboard/components/orderStatistics.vue
+++ b/src/views/dashboard/components/orderStatistics.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">订单统计</span>
@@ -13,7 +13,7 @@
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ 'height': '300px', 'width': '500px' }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart :seriesData="seriesData" :xAxisData="xAxisData" :legend="legend"/>
     </div>
@@ -118,10 +118,15 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
   }
 }
diff --git a/src/views/dashboard/components/supplierAssessment.vue b/src/views/dashboard/components/supplierAssessment.vue
index 674e50c..a6f7690 100644
--- a/src/views/dashboard/components/supplierAssessment.vue
+++ b/src/views/dashboard/components/supplierAssessment.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商年度考核统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <lineChart
         :seriesData="seriesData"
@@ -155,11 +155,14 @@
     
     <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin:10px;
+  padding: 10px;
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierCommon.vue b/src/views/dashboard/components/supplierCommon.vue
index e9f478f..6364694 100644
--- a/src/views/dashboard/components/supplierCommon.vue
+++ b/src/views/dashboard/components/supplierCommon.vue
@@ -1,16 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{ name }}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <MixChart
         :xAxisData="xAxisData"
         :seriesData="seriesData"
         :yAxisData="yAxisData"
         :legend="legend"
+        :style="{ 'height': parseInt(height) - 40 + 'px'}"
       />
     </div>
   </div>
@@ -288,11 +289,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
   .chart-content {
     // width: 600px;
diff --git a/src/views/dashboard/components/supplierCount.vue b/src/views/dashboard/components/supplierCount.vue
index 7073cd1..ae47437 100644
--- a/src/views/dashboard/components/supplierCount.vue
+++ b/src/views/dashboard/components/supplierCount.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- 用户数量变化趋势 -->
-  <div class="chart-container">
+  <div class="chart-container" :style="{ 'height': height, 'width': width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">{{type === 'supplier' ? '供应商注册统计' : '设备注册数量统计'}}</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
       <gradientLineChart
         :seriesData="seriesData"
@@ -80,11 +80,14 @@
   
   <style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierEvaluation.vue b/src/views/dashboard/components/supplierEvaluation.vue
index 9a36402..0a80c2c 100644
--- a/src/views/dashboard/components/supplierEvaluation.vue
+++ b/src/views/dashboard/components/supplierEvaluation.vue
@@ -1,30 +1,21 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商季度评价统计</span>
       <el-select v-model="value" placeholder="请选择" size="mini">
-        <el-option
-          v-for="item in options"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        >
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content" :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
-      <MixChart
-        :seriesData="seriesData"
-        :xAxisData="xAxisData"
-        :yAxisData="yAxisData"
-      />
+      <MixChart :seriesData="seriesData" :xAxisData="xAxisData" :yAxisData="yAxisData" :style="{ 'height': parseInt(height) - 40 + 'px'}"/>
     </div>
   </div>
 </template>
     
-    <script>
+<script>
 import MixChart from "@/components/echart/barChart/MixChart.vue";
 import { getSelectContent, getEvaluate } from "@/api/cockpit/cockpit";
 export default {
@@ -145,7 +136,7 @@
     fetchChartData() {
       getEvaluate(this.value).then((res) => {
         let seriesData = [];
-        let legend=[]
+        let legend = []
         if (res.data.length > 0) {
           for (var user in res.data[0]) {
             legend.push(user);
@@ -205,7 +196,7 @@
         //     interval: 20,
         //   },
         // ];
-        this.legend = legend.slice(0,5);
+        this.legend = legend.slice(0, 5);
       });
     },
   },
@@ -217,13 +208,20 @@
 };
 </script>
     
-    <style lang="scss" scoped>
+<style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+
   .chart-header {
-    width: 500px;
-    align-items: center;
-    display: flex;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+    display:flex;
     justify-content: space-between;
+
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierList.vue b/src/views/dashboard/components/supplierList.vue
index 3e41367..89b5263 100644
--- a/src/views/dashboard/components/supplierList.vue
+++ b/src/views/dashboard/components/supplierList.vue
@@ -1,104 +1,107 @@
 <template>
-    <!-- 供应商注册、审核通过、注册设备数量 -->
-    <div class="container" :style="{'height':height,'width':width}">
-      <div
-        v-for="(item) of device"
-        class="device"
-        :key="item.title"
-      >
-        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
-        <div class="content">
-          <div>{{ item.title }}</div>
-          <div class="count">{{ item.count }}</div>
-        </div>
+  <!-- 供应商注册、审核通过、注册设备数量 -->
+  <div class="container" :style="{ 'height': height, 'width': width }">
+    <div v-for="(item) of device" class="device" :key="item.title">
+      <div>
+        <svg-icon :icon-class="item.icon"></svg-icon>
       </div>
+      <div class="title">{{ item.title }}</div>
+      <div class="count">{{ item.count }}</div>
     </div>
-  </template>
+  </div>
+</template>
     
-    <script>
-  import SvgIcon from "@/components/SvgIcon";
-  import { getSupplierCount } from "@/api/cockpit/cockpit";
-  export default {
-    name: "supplierList",
-    components: {
-      SvgIcon,
+<script>
+import SvgIcon from "@/components/SvgIcon";
+import { getSupplierCount } from "@/api/cockpit/cockpit";
+export default {
+  name: "supplierList",
+  components: {
+    SvgIcon,
+  },
+  props: {
+    width: {
+      type: String,
+      default: '500px'
     },
-    props:{
-        width:{
-            type:String,
-            default:'500px'
+    height: {
+      type: String,
+      default: '300px'
+    }
+  },
+  data() {
+    return {
+      device: [
+        {
+          title: "供应商注册设备总数量",
+          count: "",
+          icon: "cockpit-device-register",
+          type: "deviceCount",
         },
-        height:{
-            type:String,
-            default:'300px'
-        }
-    },
-    data() {
-      return {
-        device: [
-          {
-            title: "供应商注册设备总数量",
-            count: "",
-            icon: "cockpit-device-register",
-            type: "deviceCount",
-          },
-          {
-            title: "供应商审核通过总数量",
-            count: "",
-            icon: "cockpit-approved",
-            type: "approvedCount",
-          },
-          {
-            title: "供应商注册总数量",
-            count: "",
-            icon: "cockpit-supplier-register",
-            type: "approvedCount",
-          },
-        ],
-      };
-    },
-    methods: {
-      fetchData() {
-        // 供应商注册、审核通过、注册设备数量
-        getSupplierCount().then((res) => {
-          for (var i = 0; i < this.device.length; i++) {
-            for (var device in res.data) {
-              if(this.device[i].type === device) {
-                this.device[i].count = res.data[device]
-              }
+        {
+          title: "供应商审核通过总数量",
+          count: "",
+          icon: "cockpit-approved",
+          type: "approvedCount",
+        },
+        {
+          title: "供应商注册总数量",
+          count: "",
+          icon: "cockpit-supplier-register",
+          type: "approvedCount",
+        },
+      ],
+    };
+  },
+  methods: {
+    fetchData() {
+      // 供应商注册、审核通过、注册设备数量
+      getSupplierCount().then((res) => {
+        for (var i = 0; i < this.device.length; i++) {
+          for (var device in res.data) {
+            if (this.device[i].type === device) {
+              this.device[i].count = res.data[device]
             }
           }
-        });
-      },
+        }
+      });
     },
-    created() {
-      this.fetchData();
-    },
-  };
-  </script>
+  },
+  created() {
+    this.fetchData();
+  },
+};
+</script>
     
-    <style lang="scss" scoped>
-  .container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: baseline;
-    .device {
-      width: 60%;
-      display: flex;
-    //   justify-content: ;
-      font-size: 20px;
-      ::v-deep .svg-icon {
-        width: 40px;
-        height: 40px;
-        color: rgb(64, 158, 255);
-      }
-      .content {
-        margin-left: 10px;
-      }
-      .count{
-        text-align: center;
-      }
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+  justify-content: space-around;
+  align-items: center;
+  .device {
+    color: #2076a1;
+    font-size:16px;
+    font-weight: 700;
+    ::v-deep .svg-icon {
+      width: 80px;
+      height: 80px;
+      color: rgb(64, 158, 255);
+    }
+    .count{
+      width: 80px;
+      font-size: 48px;
+      color: #ffb400;
+      font-weight: 700;
+      text-align: center;
+    }
+    .title{
+      width: 80px;
+      word-wrap: break-word;
     }
   }
-  </style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/supplierStatus.vue b/src/views/dashboard/components/supplierStatus.vue
index 5d85a68..7892277 100644
--- a/src/views/dashboard/components/supplierStatus.vue
+++ b/src/views/dashboard/components/supplierStatus.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="chart-container">
+  <div class="chart-container" :style="{ height: height, width: width }">
     <div class="chart-header">
       <!--标题  -->
       <span class="title">供应商状态统计</span>
     </div>
-    <div class="chart-content" :style="{ height: height, width: width }">
+    <div class="chart-content"  :style="{ 'height': parseInt(height) - 40 + 'px'}">
       <!-- echarts内容 -->
-      <doughnutChart :seriesData="seriesData" :title="title"/>
+      <doughnutChart :seriesData="seriesData" :title="title" />
     </div>
   </div>
 </template>
   
-  <script>
+<script>
 import doughnutChart from "../../../components/echart/pieChart/doughnutChart.vue";
 import { getSupplierStatus } from "@/api/cockpit/cockpit";
 export default {
@@ -37,44 +37,11 @@
     return {
       seriesData: [],
       indicator: [],
-      title:''
+      title: ''
     };
   },
   mounted() {
-      this.fetchData();  //真实获取数据，后期接口完成直接使用
-    // setTimeout(() => {
-    //   // 模拟数据后期注释掉
-    //   let data = [
-    //     {
-    //       status: "1",
-    //       statusName: "审核通过",
-    //       supplierCount: 70,
-    //     },
-    //     {
-    //       status: "2",
-    //       statusName: "审核中",
-    //       supplierCount: 30,
-    //     },
-    //     {
-    //       status: "3",
-    //       statusName: "审核不通过",
-    //       supplierCount: 20,
-    //     },
-    //   ];
-    //   this.seriesData = data.map((item) => {
-    //     return {
-    //       value: item.supplierCount,
-    //       name: item.statusName,
-    //     };
-    //   });
-    //   this.indicator = data.map((item) => {
-    //     return {
-    //       name: item.statusName,
-    //       max: item.supplierCount + 10,
-    //     };
-    //   });
-    //   this.title = `总\n\n50`
-    // }, 2000);
+    this.fetchData();  //真实获取数据，后期接口完成直接使用
   },
   methods: {
     fetchData() {
@@ -91,25 +58,31 @@
             max: item.supplierCount + 10,
           };
         });
-        let arr =[]
+        let arr = []
         res.data.forEach(element => {
           arr.push(element.supplierCount)
         });
-        this.title = `总\n\n${arr.reduce((pre,cur) => pre + cur)}`
+        this.title = `总\n\n${arr.reduce((pre, cur) => pre + cur)}`
       });
     },
   },
 };
 </script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 .chart-container {
+  background: #edf5f8;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+
   .chart-header {
-    width: 600px;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
+    font-size: 14px;
+    color: #2076A1;
+    font-weight: 700;
+
   }
+
   .chart-content {
     // width: 600px;
     // height: 400px;
diff --git a/src/views/dashboard/managementPanel.vue b/src/views/dashboard/managementPanel.vue
index 0985533..1a96998 100644
--- a/src/views/dashboard/managementPanel.vue
+++ b/src/views/dashboard/managementPanel.vue
@@ -1,23 +1,23 @@
 <template>
   <!-- 经营面板 -->
   <div class="container">
-    <managementList class="common-width"/>
+    <managementList class="common-width" :width="width" :height="height"/>
     <!-- 用户数量变化趋势 -->
-    <layoutStackAreaChartTrend class="common-width"/> 
+    <layoutStackAreaChartTrend class="common-width" :width="width" :height="height"/> 
     <!-- 用户分布统计 -->
-    <layoutChartRadar class="common-width"/>
+    <layoutChartRadar class="common-width" :width="width" :height="height"/>
     <!-- 订单统计-->
-    <orderStatistics class="common-width"/>
+    <orderStatistics class="common-width" :width="width" :height="height"/>
     <!-- 经销商订单同比/环比统计 -->
-    <commonSelectChart :fetchdata="getOrderRatio" class="common-width" name="经销商订单同比/环比统计" :legendDefault="['经销商订单数','环比值','同比值']"/>
+    <commonSelectChart :fetchdata="getOrderRatio" class="common-width" name="经销商订单同比/环比统计" :legendDefault="['经销商订单数','环比值','同比值']" :width="width" :height="height"/>
     <!-- 分子公司订单同比/环比统计 -->
-    <commonSelectChart :fetchdata="getBranchOrderRatio" class="common-width" name="分子公司订单同比/环比统计" :legendDefault="['分子公司订单数','环比值','同比值']"/>
+    <commonSelectChart :fetchdata="getBranchOrderRatio" class="common-width" name="分子公司订单同比/环比统计" :legendDefault="['分子公司订单数','环比值','同比值']" :width="width" :height="height"/>
     <!-- 商机统计 -->
-    <opportunityStatistics class="common-width"/>
+    <opportunityStatistics class="common-width" :width="width" :height="height"/>
     <!-- 商机同比/环比统计 -->
-    <commonSelectChart :fetchdata="getBusinessOpportunityRatio" class="common-width" name="商机同比/环比统计" :legendDefault="['商机个数','环比值','同比值']"/>
+    <commonSelectChart :fetchdata="getBusinessOpportunityRatio" class="common-width" name="商机同比/环比统计" :legendDefault="['商机个数','环比值','同比值']" :width="width" :height="height"/>
     <!-- 商机转订单同比/环比统计 -->
-    <commonSelectChart :fetchdata="getBusinessOpportunityTurnRatio" class="common-width" name="商机转订单同比/环比统计" :legendDefault="['商机转订单数','环比值','同比值']"/>
+    <commonSelectChart :fetchdata="getBusinessOpportunityTurnRatio" class="common-width" name="商机转订单同比/环比统计" :legendDefault="['商机转订单数','环比值','同比值']" :width="width" :height="height"/>
   </div>
 </template>
 
@@ -48,6 +48,12 @@
       getBranchOrderRatio:getBranchOrderRatio,
       getBusinessOpportunityRatio:getBusinessOpportunityRatio,
       getBusinessOpportunityTurnRatio:getBusinessOpportunityTurnRatio
+    },
+    data(){
+      return{
+        width:'520px',
+        height:'260px'
+      }
     }
 }
 </script>
@@ -59,7 +65,8 @@
   flex-wrap: wrap;
   overflow-x: hidden;
   .common-width{
-      width: 33%;
+     width:520px;
+     height:260px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/dashboard/supplierPanel.vue b/src/views/dashboard/supplierPanel.vue
index 4cc57e1..74c4151 100644
--- a/src/views/dashboard/supplierPanel.vue
+++ b/src/views/dashboard/supplierPanel.vue
@@ -1,17 +1,18 @@
 <template>
   <!-- 供应商面板 -->
   <div class="container">
-    <supplierList class="common-width"></supplierList>
+    <supplierList class="common-width" :width="width" :height="height"></supplierList>
     <!-- 供应商注册统计 -->
-    <supplierCount class="common-width" type="supplier" />
+    <supplierCount class="common-width" type="supplier" :width="width" :height="height"/>
     <!-- 供应商状态统计 -->
-    <supplierStatus class="common-width" />
+    <supplierStatus class="common-width" :width="width" :height="height"/>
     <!-- 供应商资料预审统计 -->
     <supplier-common
       class="common-width"
       name="供应商资料预审统计"
       :fetchdata="getPreReview"
       :legendDefault="['资料预审个数','预审通过率']"
+      :width="width" :height="height"
     />
     <!-- 供应商录库评审统计 -->
     <supplier-common
@@ -19,15 +20,16 @@
       name="供应商录库评审统计"
       :fetchdata="getInputReview"
       :legendDefault="['录库评审个数','录库评审通过率']"
+      :width="width" :height="height"
     />
     <!-- 评价统计 -->
-    <supplierEvaluation class="common-width" />
+    <supplierEvaluation class="common-width" :width="width" :height="height"/>
     <!-- 供应商年度考核统计 -->
-    <supplierAssessment class="common-width" />
+    <supplierAssessment class="common-width" :width="width" :height="height"/>
     <!-- 设备注册数量统计 -->
-    <supplierCount class="common-width" type="device" />
+    <supplierCount class="common-width" type="device" :width="width" :height="height"/>
     <!-- 设备注册排行榜 -->
-    <layoutChartVerticalBar class="common-width" type="register" />
+    <layoutChartVerticalBar class="common-width" type="register" :width="width" :height="height"/>
   </div>
 </template>
 
@@ -55,6 +57,12 @@
     getPreReview: getPreReview,
     getInputReview: getInputReview,
   },
+  data(){
+    return{
+      width:'520px',
+      height:'260px'
+    }
+  }
 };
 </script>