diff --git a/src/mock/dashboardExcelMock.js b/src/mock/dashboardExcelMock.js
new file mode 100644
index 0000000..a66d690
--- /dev/null
+++ b/src/mock/dashboardExcelMock.js
@@ -0,0 +1,37 @@
+// 2026 年大屏展示 Mock：仅用于覆盖接口返回值，接口请求仍会正常发出。
+// 数据来源：100 台车辆清单 + 1–8 月车辆里程日报 + 车辆氢费明细（截至 2026-08-12）。
+// 4–7 月原始日报大量车辆里程为 0，展示层按每 kg 氢气 10 km 的统一比例生成里程 Mock；加氢量沿用 Excel，确保两条曲线同向波动。
+// 8 月原始里程日报同样缺失，按 1–3 月日均里程补齐截至 8 月 13 日凌晨的 13.5 天数据；用氢量保留 Excel 实际值。
+// 全部车辆均为 49 吨牵引车头；减碳量按后端实际口径，按月份、车型、车牌首字地区分组计算并将负值归零：
+// max(0, 行驶里程(km) - 加氢量(kg) × 3.0927)。月度/年度再汇总分组结果。
+export const DASHBOARD_EXCEL_MOCK = Object.freeze({
+  vehicleTotal: 100,
+  onlineTotal: 62,
+  sourceDate: '2026-08-12',
+  // 日维度取 1–3 月日均里程/用氢量的 70%，再按嘉兴减碳公式计算。
+  day: Object.freeze({
+    mileage: 8991.52,
+    hydrogen: 896.08,
+    carbon: 6220.21
+  }),
+  months: Object.freeze([
+    { months: '2026-01', monthMileage: 432395.16, monthHydrogen: 43682.45, monthCarbon: 297298.45 },
+    { months: '2026-02', monthMileage: 322776.94, monthHydrogen: 32454.9, monthCarbon: 222403.67 },
+    { months: '2026-03', monthMileage: 400880.17, monthHydrogen: 39073.5, monthCarbon: 280037.56 },
+    { months: '2026-04', monthMileage: 367596.8, monthHydrogen: 36759.68, monthCarbon: 253910.14 },
+    { months: '2026-05', monthMileage: 372421.1, monthHydrogen: 37242.11, monthCarbon: 257242.43 },
+    { months: '2026-06', monthMileage: 367411.5, monthHydrogen: 36741.15, monthCarbon: 253782.15 },
+    { months: '2026-07', monthMileage: 396281.2, monthHydrogen: 39628.12, monthCarbon: 273723.31 },
+    { months: '2026-08', monthMileage: 173407.84, monthHydrogen: 9703.95, monthCarbon: 143396.43 },
+    { months: '2026-09', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 },
+    { months: '2026-10', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 },
+    { months: '2026-11', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 },
+    { months: '2026-12', monthMileage: 0, monthHydrogen: 0, monthCarbon: 0 }
+  ]),
+  year: Object.freeze({
+    mileage: 2833170.71,
+    hydrogen: 275285.86,
+    carbon: 1976162.23,
+    carbonTon: 1976.16
+  })
+})
diff --git a/src/views/indexs/center-bottom.vue b/src/views/indexs/center-bottom.vue
index e4a0f9e..d13fb13 100644
--- a/src/views/indexs/center-bottom.vue
+++ b/src/views/indexs/center-bottom.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <div ref="chart" class="chart-container"></div>
-  </div>
+  <div ref="chart" class="chart-container"></div>
 </template>
 
 <script>
@@ -20,8 +18,7 @@ export default {
       // { name: '其它：10%', value: 260 }
     ]
   ],
-    colors: ["#00E5FF", "#FF5733"]
-      //colors: ["#00E5FF", "#FF5733",  "#FFBF00", "#5CDB95"]
+      colors: ["#00d8ff", "#168cff", "#496dff", "#7658e8", "#18c6b3"]
     };
   },
   mounted() {
@@ -34,7 +31,8 @@ export default {
             // 转换数据结构为饼图需要的格式
             this.chartData = [res.data.map(item => ({
               name: item.modelName,
-              value: item.total
+              // 大屏演示口径：49吨牵引车头使用固定 Mock 数量。
+              value: item.modelName === '49吨牵引车头' ? 100 : item.total
             }))];
             console.log('车型分布')
             console.log(this.chartData)
@@ -51,7 +49,50 @@ export default {
 
     initChart() {
       const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
+      const equipmentData = this.chartData[0] || [];
+      const equipmentTotal = equipmentData.reduce((sum, item) => sum + Number(item.value || 0), 0);
+      const equipmentByName = equipmentData.reduce((result, item) => {
+        result[item.name] = item;
+        return result;
+      }, {});
       let option = {
+        color: this.colors,
+        legend: {
+          orient: 'vertical',
+          left: '4%',
+          top: 'center',
+          selectedMode: false,
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 14,
+          data: equipmentData.map(item => item.name),
+          formatter: function (name) {
+            const item = equipmentByName[name];
+            const value = Number(item && item.value || 0);
+            const percent = equipmentTotal ? ((value / equipmentTotal) * 100).toFixed(2) : '0.00';
+            return `{name|${name}}\n{value|${value}辆}  {percent|${percent}%}`;
+          },
+          textStyle: {
+            rich: {
+              name: {
+                color: '#eaf8ff',
+                fontSize: 14,
+                fontWeight: 'bold',
+                lineHeight: 18
+              },
+              value: {
+                color: '#4edfff',
+                fontSize: 12,
+                lineHeight: 16
+              },
+              percent: {
+                color: '#8baeff',
+                fontSize: 12,
+                lineHeight: 16
+              }
+            }
+          }
+        },
         title: {
           text: '',
           left: 'center',
@@ -61,59 +102,17 @@ export default {
             fontSize: 12
           }
         },
-        series: this.chartData.map(function (data, idx) {
-          var top = idx * 33.3;
+        series: this.chartData.map(function (data) {
           return {
             type: 'pie',
-            radius: [50, 90],
-            top: top + '%',
-            height: '33.33%',
-            left: 'center',
-            width: '600px',
+            radius: ['42%', '66%'],
+            center: ['74%', '52%'],
             itemStyle: {
-              borderColor: 'orange',
-              borderWidth: 1
-            },
-            label: {
-              alignTo: 'edge',
-              formatter: ({ name, value, percent }) => 
-                `{name|${name}}\n{value|${value}辆}  {percent|${percent}%}`,
-              minMargin: 5,
-              edgeDistance: 10,
-              lineHeight: 20,
-              rich: {
-                name: {  // 新增 name 样式
-                  fontSize: 14,
-                  color: 'yellow', // 使用亮白色
-                  padding: [0, 0, 5, 0]
-                },
-                value: {
-                  fontSize: 12,
-                  color: 'orange',
-                  padding: [0, 5, 0, 0]
-                },
-                percent: {
-                  fontSize: 12,
-                  color: '#FF5733' // 保留原有橙色
-                }
-              }
-            },
-            labelLine: {
-              length: 40,
-              length2: 15,
-              maxSurfaceAngle: 80
-            },
-            labelLayout: function (params) {
-              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
-              const points = params.labelLinePoints;
-              // Update the end point.
-              points[2][0] = isLeft
-                ? params.labelRect.x
-                : params.labelRect.x + params.labelRect.width;
-              return {
-                labelLinePoints: points
-              };
+              borderColor: '#061d4a',
+              borderWidth: 2
             },
+            label: { show: false },
+            labelLine: { show: false },
             data: data
           };
         })
@@ -133,6 +132,6 @@ export default {
 <style scoped>
 .chart-container {
   width: 100%;
-  height: 850px;
+  height: 100%;
 }
 </style>
diff --git a/src/views/indexs/center-map.vue b/src/views/indexs/center-map.vue
index 5bcc4eb..76004de 100644
--- a/src/views/indexs/center-map.vue
+++ b/src/views/indexs/center-map.vue
@@ -40,6 +40,7 @@
 <script>
 import xzqCode from "../../utils/map/xzqCode";
 import { currentGET } from "api/modules";
+import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock';
 import * as echarts from "echarts";
 import { GETNOBASE } from "api";
 export default {
@@ -94,14 +95,12 @@ export default {
       return 'district';                               // 区县级（如 440305）
     },
     getYearData() {
-      currentGET("big3").then((res) => {
-          console.log('年度碳排量');
-          console.log(res);
-          //单位kg
-          // this.maptitle = res.data.yearCarbon;
-          //单位吨
-          this.maptitle = res.data.yearCarbonTon;
-        });
+      // 保留年度接口调用，地图标题使用同一套 Excel Mock 年度减碳量。
+      this.applyYearMock();
+      currentGET("big3").catch(() => {});
+    },
+    applyYearMock() {
+      this.maptitle = DASHBOARD_EXCEL_MOCK.year.carbonTon;
     },
     getData(code) {
       console.log("code", code);
diff --git a/src/views/indexs/chart/baseChart.vue b/src/views/indexs/chart/baseChart.vue
index 0a8a109..22ec614 100644
--- a/src/views/indexs/chart/baseChart.vue
+++ b/src/views/indexs/chart/baseChart.vue
@@ -1,217 +1,200 @@
 <template>
   <div class="chart-block">
-    <!-- 左侧 柱状+折线图 -->
     <div class="chart-container">
-      <v-chart class="bar-line-chart" :options="barLineOption"  style="width: 390px;height: 250px;"/>
+      <div ref="chart" class="line-chart"></div>
     </div>
-
-    <!-- 右侧 两个环形图 -->
     <div class="chart-container-right">
-      <v-chart class="pie-chart" :options="pieOptionOne" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
-      <v-chart class="pie-chart" :options="pieOptionTwo" style="width: 140px;height:100px;margin-left: -11%;margin-top: 5%;"/>
+      <div class="metric-card metric-card--carbon">
+        <div class="metric-title"><i></i>累计碳减排</div>
+        <div class="metric-value">{{ formatCarbonTotal(cumulativeCarbon) }}<span>吨</span></div>
+        <div class="metric-line"></div>
+      </div>
+      <div class="metric-card metric-card--mileage">
+        <div class="metric-title"><i></i>累计里程</div>
+        <div class="metric-value">{{ formatMileageTotal(cumulativeMileage) }}<span>万km</span></div>
+        <div class="metric-line"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import VChart from 'vue-echarts'
-import * as echarts from 'echarts'
-import 'echarts/lib/chart/bar'
+import echarts from 'echarts'
 import 'echarts/lib/chart/line'
-import 'echarts/lib/chart/pie'
 import 'echarts/lib/component/legend'
 import 'echarts/lib/component/tooltip'
 import { currentGET } from 'api/modules'
+import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock'
 
 export default {
   name: 'ChartBlock',
-  components: { VChart },
   data() {
     return {
-      /* 柱状图 + 折线图 */
-      barLineOption: {
-        backgroundColor: 'transparent', // 让背景透明，方便在大屏布局中适配
-        tooltip: { trigger: 'axis' ,
-           formatter: (params) => {
-            console.log(params)
-            return `碳减排量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
+      chart: null,
+      cumulativeCarbon: 0,
+      cumulativeMileage: 0,
+      monthCarbon: [],
+      monthMileage: [],
+      months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+    }
+  },
+  mounted() {
+    this.getMonthData()
+    this.getYearData()
+    window.addEventListener('resize', this.resizeChart)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart)
+    if (this.chart) this.chart.dispose()
+  },
+  methods: {
+    getMonthData() {
+      // 接口继续请求，用于保留原有链路；渲染数据由 Excel Mock 覆盖。
+      this.applyMonthMock()
+      currentGET('big2').catch(() => {})
+    },
+    applyMonthMock() {
+        this.monthCarbon = []
+        this.monthMileage = []
+        DASHBOARD_EXCEL_MOCK.months.forEach((item, index) => {
+          const monthText = item.months || ''
+          const month = Number(monthText.slice(-2)) || index + 1
+          if (month >= 1 && month <= 12) {
+            // 仅展示已有数据月份；9 月以后用空值断开曲线，而非绘制为 0。
+            const hasData = month <= 8
+            this.monthCarbon[month - 1] = hasData ? item.monthCarbon / 1000 : null
+            this.monthMileage[month - 1] = hasData ? item.monthMileage : null
+          }
+        })
+        this.initChart()
+    },
+    getYearData() {
+      this.applyYearMock()
+      currentGET('big3').catch(() => {})
+    },
+    applyYearMock() {
+      this.cumulativeCarbon = DASHBOARD_EXCEL_MOCK.year.carbonTon
+      this.cumulativeMileage = DASHBOARD_EXCEL_MOCK.year.mileage / 10000
+    },
+    initChart() {
+      if (this.chart) this.chart.dispose()
+      this.chart = echarts.init(this.$refs.chart)
+      this.chart.setOption({
+        grid: {
+          top: 58,
+          bottom: 30,
+          left: 64,
+          right: 56
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: (params) => {
+            const values = {}
+            params.forEach((item) => { values[item.seriesName] = item.value })
+            return `${params[0].axisValue}<br/>碳减排量：${this.formatCarbon(values['碳减排量(吨)'] || 0)}吨<br/>行驶里程：${this.formatMileage(values['行驶里程(km)'] || 0)}`
           }
         },
         legend: {
-          data: ['碳减排量(kg)', '行驶里程(km)'],
-          textStyle: { color: '#fff' }
-        },
-        grid: {
-          left: '18%',
-          right: '18%',
-          top: '10%',
-          bottom: '10%'
+          data: ['碳减排量(吨)', '行驶里程(km)'],
+          left: 'center',
+          top: 4,
+          itemWidth: 22,
+          itemHeight: 10,
+          textStyle: { color: '#d8e8ff', fontSize: 13 }
         },
         xAxis: {
           type: 'category',
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
-          axisLine: { lineStyle: { color: '#fff' } },
-          axisLabel: { color: '#fff' }
+          boundaryGap: false,
+          data: this.months,
+          axisLine: { lineStyle: { color: '#ffffff' } },
+          axisLabel: { color: '#ffffff' }
         },
         yAxis: [
           {
             type: 'value',
-            // name: '碳减排量',
-            axisLine: { lineStyle: { color: '#fff' } },
-            axisLabel: { color: '#fff' },
-            splitLine: { show: false },
+            name: '碳减排量(吨)',
+            min: 0,
+            max: 300,
+            interval: 50,
+            nameGap: 14,
+            nameTextStyle: { color: '#3399ff', fontSize: 13, fontWeight: 600 },
+            axisLine: { lineStyle: { color: '#3399ff' } },
+            axisTick: { lineStyle: { color: '#3399ff' } },
+            splitLine: { lineStyle: { color: '#091a40' } },
             axisLabel: {
-              formatter: '{value}kg'
+              color: '#3399ff',
+              margin: 10,
+              formatter: '{value}'
             }
           },
           {
             type: 'value',
-            // name: '行驶里程',
-            axisLine: { lineStyle: { color: '#fff' } },
-            axisLabel: { color: '#fff' },
+            name: '行驶里程(km)',
+            min: 0,
+            max: 600000,
+            interval: 100000,
+            nameGap: 14,
+            nameTextStyle: { color: '#a060ff', fontSize: 13, fontWeight: 600 },
+            axisLine: { lineStyle: { color: '#a060ff' } },
+            axisTick: { lineStyle: { color: '#a060ff' } },
             splitLine: { show: false },
             axisLabel: {
-              formatter: '{value}km'
+              color: '#a060ff',
+              margin: 12,
+              formatter: (value) => this.formatMileage(value)
             }
           }
         ],
         series: [
           {
-            name: '碳减排量(kg)',
-            type: 'bar',
-            data: [1000, 1500, 1800, 1200, 2000, 2500, 1800, 2200, 3000, 3500,2600, 3600],
-            itemStyle: { color: '#00BAFF' },
-            barWidth: 14,
-            axisLabel: {formatter: '{value} kg'}
+            name: '碳减排量(吨)',
+            type: 'line',
+            yAxisIndex: 0,
+            data: this.monthCarbon,
+            itemStyle: { color: '#3399ff' },
+            lineStyle: { color: '#3399ff', width: 2 },
+            symbol: 'circle',
+            symbolSize: 5,
+            connectNulls: false,
+            smooth: 0.18
           },
           {
             name: '行驶里程(km)',
             type: 'line',
             yAxisIndex: 1,
-            data: [3500, 400, 4200, 3800, 4500, 4800, 4200, 4600, 4900, 5200, 4700, 5500],
-            itemStyle: { color: '#FFC600' },
-            smooth: true,
-            lineStyle: { width: 2 },
+            data: this.monthMileage,
+            itemStyle: { color: '#a060ff' },
+            lineStyle: { color: '#a060ff', width: 2 },
             symbol: 'circle',
-            symbolSize: 8,
-            axisLabel: {formatter: '{value} km'}
+            symbolSize: 5,
+            connectNulls: false,
+            smooth: 0.18
           }
         ]
-      },
-
-      /* 环形图1 - 年度碳减排量 */
-      pieOptionOne: {
-        backgroundColor: 'transparent',
-        tooltip: { show: false },
-        title: {
-          text: '0吨',
-          //subtext: '年度碳减排量',
-          left: 'center',
-          top: '40%',
-          textStyle: { color: '#fff', fontSize: 18 },
-          subtextStyle: { color: '#fff', fontSize: 18}
-        },
-        graphic: [
-          {
-            type: 'text',
-            left: '0px',     // 根据需要调整文字与图表的间距
-            top: 'center',  // 垂直居中
-            style: {
-              text: '年\n度\n碳\n减\n排\n量',  // 每个字符换行显示
-              fill: '#fff',
-              font: '16px sans-serif',
-            }
-          }
-        ],
-        series: [
-          {
-            name: '年度碳减排量',
-            type: 'pie',
-            radius: ['70%', '90%'],
-            hoverAnimation: false,
-            label: { show: false },
-            labelLine: { show: false },
-            data: [
-              { value: 5, name: '碳排放量', itemStyle: { color: '#7d70f9' } },
-              { value: 95, name: 'other', itemStyle: { color: '#2f4c6e' } }
-            ]
-          }
-        ]
-      },
-
-      /* 环形图2 - 年度行驶里程 */
-      pieOptionTwo: {
-        backgroundColor: 'transparent',
-        tooltip: { show: false },
-        title: {
-          text: '0万',
-          //subtext: '年度行驶里程',
-          left: 'center',
-          top: '40%',
-          textStyle: { color: '#fff', fontSize: 18 },
-          subtextStyle: { color: '#fff', fontSize: 12 }
-        },
-        graphic: [
-          {
-            type: 'text',
-            left: '0px',     // 根据需要调整文字与图表的间距
-            top: 'center',  // 垂直居中
-            style: {
-              text: '年\n度\n行\n驶\n里\n程',  // 每个字符换行显示
-              fill: '#fff',
-              font: '16px sans-serif',
-            }
-          }
-        ],
-        series: [
-          {
-            name: '年度行驶里程',
-            type: 'pie',
-            radius: ['70%', '90%'],
-            hoverAnimation: false,
-            label: { show: false },
-            labelLine: { show: false },
-            data: [
-              { value: 85, name: '行驶里程', itemStyle: { color: '#00BAFF' } },
-              { value: 15, name: 'other', itemStyle: { color: '#2f4c6e' } }
-            ]
-          }
-        ]
-      },
-      monthItems:[],
-      monthCarbon:[],
-      monthMileage:[]
-    }
-  },
-  mounted() {
-    this.getMonthData();
-    this.getYearData();
-  },
-  methods: {
-    getMonthData() {
-        currentGET("big2").then((res) => {
-          console.log('月度碳足迹');          
-          this.monthItems = res.data;
-          console.log(this.monthItems);
-          this.monthItems.forEach((item) => {
-            console.log(item.monthCarbon);
-            console.log(item.monthMileage);
-            this.monthCarbon.push(item.monthCarbon);// + 'kg'
-            this.monthMileage.push(item.monthMileage );//+ 'km'
-          });
-          console.log('碳减排：'+ this.monthCarbon);
-          console.log('里程数：'+ this.monthMileage);
-          this.barLineOption.series[0].data = this.monthCarbon;
-          this.barLineOption.series[1].data = this.monthMileage;        
-        });
+      })
     },
-    getYearData() {
-        currentGET("big3").then((res) => {
-          console.log('年度碳减排量');
-          console.log(res);
-          this.pieOptionOne.title.text = res.data.yearCarbonTon + '吨';
-          this.pieOptionTwo.title.text = res.data.yearMileage + '万km';
-        });
+    resizeChart() {
+      if (this.chart) this.chart.resize()
+    },
+    formatCarbonTotal(value) {
+      const total = Number(value) || 0
+      return total % 1 === 0 ? total.toFixed(0) : total.toFixed(1)
+    },
+    formatMileageTotal(value) {
+      const total = Number(value) || 0
+      return total % 1 === 0 ? total.toFixed(0) : total.toFixed(1)
+    },
+    formatMileage(value) {
+      const distance = Number(value) || 0
+      if (distance >= 10000) {
+        const wan = distance / 10000
+        return `${Number.isInteger(wan) ? wan : wan.toFixed(1)}万km`
+      }
+      return `${distance.toFixed(0)}km`
+    },
+    formatCarbon(value) {
+      const carbon = Number(value) || 0
+      return Number.isInteger(carbon) ? carbon.toFixed(0) : carbon.toFixed(1)
     }
   }
 }
@@ -220,37 +203,111 @@ export default {
 <style scoped>
 .chart-block {
   display: flex;
-  justify-content: space-around;
   align-items: center;
-  /* 自行控制宽高，若嵌入大屏可由外层决定大小 */
-  width: 800px;
-  height: 300px;
-  /* 背景可保持透明，方便嵌入大屏的背景 */
+  justify-content: space-between;
+  gap: 2px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 6px 14px 4px 8px;
   background: transparent;
 }
 
 .chart-container {
-  margin-left: -20px;
-  margin-right: -20px;
-  width: 50%;
+  flex: 1;
+  min-width: 0;
   height: 100%;
 }
 
-.bar-line-chart {
+.line-chart {
   width: 100%;
   height: 100%;
 }
 
-/* 右侧两个环形图的布局 */
 .chart-container-right {
-  width: 44%;
+  display: flex;
+  position: relative;
+  left: 14px;
+  flex: 0 0 84px;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  box-sizing: border-box;
   height: 100%;
-  margin-right: -20px;
-
+  padding-left: 6px;
 }
 
-.pie-chart {
-  width: 150px;
-  height: 160px;
+.metric-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 64px;
+  padding: 0;
+  overflow: hidden;
+}
+
+.metric-title {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  color: #dbeaff;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.metric-title i {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  margin-right: 5px;
+  border-radius: 50%;
+  background: #3399ff;
+  box-shadow: 0 0 8px rgba(51, 153, 255, 0.9);
+}
+
+.metric-card--mileage .metric-title i {
+  background: #a060ff;
+  box-shadow: 0 0 8px rgba(160, 96, 255, 0.9);
+}
+
+.metric-value {
+  position: absolute;
+  top: 23px;
+  left: 0;
+  width: 100%;
+  color: #ffffff;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.metric-value span {
+  margin-left: 2px;
+  color: #9bc9ff;
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.metric-line {
+  position: absolute;
+  right: 6px;
+  bottom: 7px;
+  left: 6px;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #3399ff, transparent);
+  box-shadow: 0 0 7px rgba(51, 153, 255, 0.9);
+}
+
+.metric-card--mileage .metric-line {
+  background: linear-gradient(90deg, transparent, #a060ff, transparent);
+  box-shadow: 0 0 7px rgba(160, 96, 255, 0.9);
 }
 </style>
diff --git a/src/views/indexs/index.vue b/src/views/indexs/index.vue
index 8c4b198..d93ba0e 100644
--- a/src/views/indexs/index.vue
+++ b/src/views/indexs/index.vue
@@ -45,7 +45,7 @@
       </ItemWrap>
       <ItemWrap
         class="contetn_left-bottom contetn_lr-item"
-        title="货品分类月度减碳量"
+        title="月度减碳量"
         style="padding: 0 10px 16px 10px"
       >
         <RightCenter />
diff --git a/src/views/indexs/left-bottom.vue b/src/views/indexs/left-bottom.vue
index 92747dd..40435f4 100644
--- a/src/views/indexs/left-bottom.vue
+++ b/src/views/indexs/left-bottom.vue
@@ -6,109 +6,38 @@
       <div ref="chart" class="bar-line-chart"></div>
     </div>
 
-      <!-- 右侧 两个环形图 -->
+    <!-- 右侧累计指标 -->
     <div class="chart-container-right">
-      <v-chart class="pie-chart" :options="pieOptionOne" style="width: 150px;height:100px;margin-left: -11%;margin-top: 5%;"/>
-      <v-chart class="pie-chart" :options="pieOptionTwo" style="width: 150px;height:100px;margin-left: -11%;margin-top: 5%;"/>
+      <div class="metric-card metric-card--hydrogen">
+        <div class="metric-title"><i></i>累计用氢量</div>
+        <div class="metric-value">{{ formatHydrogen(cumulativeHydrogen).value }}<span>{{ formatHydrogen(cumulativeHydrogen).unit }}</span></div>
+        <div class="metric-line"></div>
+      </div>
+      <div class="metric-card metric-card--mileage">
+        <div class="metric-title"><i></i>累计里程</div>
+        <div class="metric-value">{{ formatMileageTotal(cumulativeMileage) }}<span>万km</span></div>
+        <div class="metric-line"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import VChart from 'vue-echarts';
 import echarts from 'echarts';
 import 'echarts/lib/chart/bar'
 import 'echarts/lib/chart/line'
-import 'echarts/lib/chart/pie'
 import 'echarts/lib/component/legend'
 import 'echarts/lib/component/tooltip'
 import { currentGET } from 'api/modules';
+import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock';
 
 
 export default {
   name: 'LeftBottomChart',  
-  components: { VChart },
   data() {
     return {
-      /* 环形图1 - 月度用氢量 */
-      pieOptionOne: {
-        backgroundColor: 'transparent',
-        tooltip: { show: false },
-        title: {
-          text: '0吨',
-          //subtext: '月度用氢量',
-          left: 'center',
-          top: '40%',
-          textStyle: { color: '#fff', fontSize: 18 },
-          subtextStyle: { color: '#fff', fontSize: 18}
-        },
-        graphic: [
-          {
-            type: 'text',
-            left: '0px',     // 根据需要调整文字与图表的间距
-            top: 'center',  // 垂直居中
-            style: {
-              text: '月\n度\n用\n氢\n量',  // 每个字符换行显示
-              fill: '#fff',
-              font: '16px sans-serif',
-            }
-          }
-        ],
-        series: [
-          {
-            name: '月度用氢量',
-            type: 'pie',
-            radius: ['70%', '90%'],
-            hoverAnimation: false,
-            label: { show: false },
-            labelLine: { show: false },
-            data: [
-              { value: 5, name: '用氢量', itemStyle: { color: '#7d70f9' } },
-              { value: 95, name: 'other', itemStyle: { color: '#2f4c6e' } }
-            ]
-          }
-        ]
-      },
-
-      /* 环形图2 - 年度用氢量 */
-      pieOptionTwo: {
-        backgroundColor: 'transparent',
-        tooltip: { show: false },
-        title: {
-          text: '0万',
-          //subtext: '年度用氢量',
-          left: 'center',
-          top: '40%',
-          textStyle: { color: '#fff', fontSize: 18 },
-          subtextStyle: { color: '#fff', fontSize: 12 }
-        },
-        graphic: [
-          {
-            type: 'text',
-            left: '0px',     // 根据需要调整文字与图表的间距
-            top: 'center',  // 垂直居中
-            style: {
-              text: '年\n度\n用\n氢\n量',  // 每个字符换行显示
-              fill: '#fff',
-              font: '16px sans-serif',
-            }
-          }
-        ],
-        series: [
-          {
-            name: '年度用氢量',
-            type: 'pie',
-            radius: ['70%', '90%'],
-            hoverAnimation: false,
-            label: { show: false },
-            labelLine: { show: false },
-            data: [
-              { value: 85, name: '用氢量', itemStyle: { color: '#00BAFF' } },
-              { value: 15, name: 'other', itemStyle: { color: '#2f4c6e' } }
-            ]
-          }
-        ]
-      },
+      cumulativeHydrogen: 0,
+      cumulativeMileage: 0,
       monthItems:[],
       monthHydrogen:[],
       monthMileage:[],
@@ -118,38 +47,48 @@ export default {
   },
   mounted() {
     this.getMonthData();
+    window.addEventListener('resize', this.resizeChart);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart);
+    if (this.chart) {
+      this.chart.dispose();
+    }
   },
   methods: {
     getMonthData() {
-        currentGET("big2").then((res) => {
-          console.log('月度碳减排');          
-          this.monthItems = res.data;
-          console.log(this.monthItems);
-          const currentMonth = new Date().getMonth() + 1; // 加1以得到1-12的月份
+        // 保留真实接口调用，图表展示改为 Excel 整理后的 100 台车 Mock 数据。
+        this.applyMonthMock();
+        currentGET("big2").catch(() => {});
+    },
+    applyMonthMock() {
+          this.monthItems = DASHBOARD_EXCEL_MOCK.months;
+          this.monthHydrogen = [];
+          this.monthMileage = [];
+          this.monthCarbon = [];
           this.monthItems.forEach((item) => {
-            // this.monthHydrogen.push(item.monthHydrogen);
-            // this.monthMileage.push(item.monthMileage);
             let month = parseInt(item.months.substring(5,7));
-            if(month === currentMonth){
-                this.pieOptionOne.title.text =  item.monthHydrogen + '\nkg';
-            }
-            this.monthMileage[month-1] = item.monthMileage;
-            this.monthCarbon[month-1] = item.monthCarbon;
-            this.monthHydrogen[month-1] = item.monthHydrogen;
+            // 9 月以后暂无数据，传入空值以在 8 月断开曲线。
+            const hasData = month <= 8;
+            this.monthMileage[month-1] = hasData ? item.monthMileage : null;
+            this.monthCarbon[month-1] = hasData ? item.monthCarbon : null;
+            this.monthHydrogen[month-1] = hasData ? item.monthHydrogen : null;
           });
-          //console.log('用氢量：'+ this.monthHydrogen);
-          //console.log('里程数：'+ this.monthMileage);
           this.getYearData();
           this.initChart();
-
-        });
     },
     initChart() 
     {
-      let chart = echarts.init(this.$refs.chart);
+      if (this.chart) {
+        this.chart.dispose();
+      }
+      this.chart = echarts.init(this.$refs.chart);
       let option = {
         grid:{
-          left:'18%'
+          top: 58,
+          bottom: 30,
+          left: 64,
+          right: 56
         },
         tooltip: {
           trigger: 'axis',
@@ -158,14 +97,20 @@ export default {
           //   return `用氢量：${params[0].value}kg<br/>用电量：${params[1].value}kWh<br/>行驶里程：${params[2].value}km`;
           // }
           formatter: (params) => {
-            console.log(params)
-            return `用氢量：${params[0].value}kg<br/>行驶里程：${params[1].value}km`;
+            const values = {};
+            params.forEach(item => { values[item.seriesName] = item.value; });
+            const hydrogen = this.formatHydrogen(values['用氢量(吨)'] || 0);
+            return `${params[0].axisValue}<br/>用氢量：${hydrogen.value}${hydrogen.unit}<br/>行驶里程：${this.formatMileage(values['行驶里程(km)'] || 0)}`;
           }
         },
         legend: {
           //data: ['用氢量', '用电量', '行驶里程'],
-          data: ['用氢量(kg)', '行驶里程(km)'],
-          textStyle: { color: '#eee' }
+          data: ['用氢量(吨)', '行驶里程(km)'],
+          left: 'center',
+          top: 4,
+          itemWidth: 22,
+          itemHeight: 10,
+          textStyle: { color: '#d8e8ff', fontSize: 13 }
         },
         xAxis: {
           type: 'category',
@@ -173,27 +118,50 @@ export default {
           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
           axisLine: { lineStyle: { color: '#fff' } }
         },
-        yAxis: {
-          type: 'value',
-          axisLine: { lineStyle: { color: '#29A0CA' } },
-          splitLine: { lineStyle: { color: '#091a40' } },
-          axisLabel: {
-            align: 'left',
-            margin:70,
-            width: 100, //将内容的宽度固定
-            // overflow: 'truncate', //超出的部分截断
-            formatter: '{value}kg'
+        yAxis: [
+          {
+            type: 'value',
+            name: '用氢量(吨)',
+            nameGap: 14,
+            nameTextStyle: { color: '#3399ff', fontSize: 13, fontWeight: 600 },
+            axisLine: { lineStyle: { color: '#3399ff' } },
+            axisTick: { lineStyle: { color: '#3399ff' } },
+            splitLine: { lineStyle: { color: '#091a40' } },
+            axisLabel: {
+              color: '#3399ff',
+              margin: 10,
+              formatter: value => this.formatHydrogen(value).value
+            }
+          },
+          {
+            type: 'value',
+            name: '行驶里程(km)',
+            nameGap: 14,
+            nameTextStyle: { color: '#a060ff', fontSize: 13, fontWeight: 600 },
+            axisLine: { lineStyle: { color: '#a060ff' } },
+            axisTick: { lineStyle: { color: '#a060ff' } },
+            splitLine: { show: false },
+            axisLabel: {
+              color: '#a060ff',
+              margin: 12,
+              formatter: value => this.formatMileage(value)
+            }
           }
-
-        },
+        ],
         series: [
           {
-            name: '用氢量(kg)',
+            name: '用氢量(吨)',
             type: 'line',
             //data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900],
-             data: this.monthHydrogen,
+            yAxisIndex: 0,
+            data: this.monthHydrogen,
             // data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0],
-            itemStyle: { color: '#3399ff' }
+            itemStyle: { color: '#3399ff' },
+            lineStyle: { color: '#3399ff', width: 2 },
+            symbol: 'circle',
+            symbolSize: 5,
+            connectNulls: false,
+            smooth: 0.18
           },
           // {
           //   name: '用电量',
@@ -206,21 +174,54 @@ export default {
           {
             name: '行驶里程(km)',
             type: 'line',
+            yAxisIndex: 1,
             //data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000],
             data: this.monthMileage,
             //data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0],
-            itemStyle: { color: '#a060ff' }
+            itemStyle: { color: '#a060ff' },
+            lineStyle: { color: '#a060ff', width: 2 },
+            symbol: 'circle',
+            symbolSize: 5,
+            connectNulls: false,
+            smooth: 0.18
           }
         ]
       };
-      chart.setOption(option);
+      this.chart.setOption(option);
+    },
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    },
+    formatHydrogen(value) {
+      const amount = Number(value) || 0;
+      if (amount >= 1000) {
+        const ton = amount / 1000;
+        return { value: Number.isInteger(ton) ? ton : ton.toFixed(1), unit: '吨' };
+      }
+      return { value: Number.isInteger(amount) ? amount : amount.toFixed(1), unit: 'kg' };
+    },
+    formatMileage(value) {
+      const distance = Number(value) || 0;
+      if (distance >= 10000) {
+        const wan = distance / 10000;
+        const display = Number.isInteger(wan) ? wan : wan.toFixed(1);
+        return `${display}万km`;
+      }
+      return `${distance.toFixed(0)}km`;
+    },
+    formatMileageTotal(value) {
+      const total = Number(value) || 0;
+      return total % 1 === 0 ? total.toFixed(0) : total.toFixed(1);
     },
     getYearData() {
-        currentGET("big3").then((res) => {
-          console.log('年度碳减排量');
-          console.log(res);
-          this.pieOptionTwo.title.text = res.data.yearHydrogen + '\nkg';
-        });
+        this.applyYearMock();
+        currentGET("big3").catch(() => {});
+    },
+    applyYearMock() {
+        this.cumulativeHydrogen = DASHBOARD_EXCEL_MOCK.year.hydrogen;
+        this.cumulativeMileage = DASHBOARD_EXCEL_MOCK.year.mileage / 10000;
     }
   }
 };
@@ -229,34 +230,114 @@ export default {
 <style scoped>
 .chart-block {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
-  /* 自行控制宽高，若嵌入大屏可由外层决定大小 */
-  width: 800px;
-  height: 300px;
-  /* 背景可保持透明，方便嵌入大屏的背景 */
+  gap: 2px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 6px 14px 4px 8px;
   background: transparent;
 }
 .chart-container {
-  margin-left: -20px;
-  
-  width: 55%;
-  height:100%;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
 }
 
 .bar-line-chart {
   width: 100%;
   height: 100%;
 }
-/* 右侧两个环形图的布局 */
+/* 右侧累计指标布局 */
 .chart-container-right {
-  padding-right: 20px;
-  width: 44%;
+  display: flex;
+  position: relative;
+  left: 14px;
+  flex: 0 0 84px;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  box-sizing: border-box;
   height: 100%;
+  padding-left: 6px;
 }
 
-.pie-chart {
-  width: 150px;
-  height: 160px;
+.metric-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 64px;
+  padding: 0;
+  overflow: hidden;
+}
+
+.metric-title {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  color: #dbeaff;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.metric-title i {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  margin-right: 5px;
+  border-radius: 50%;
+  background: #3399ff;
+  box-shadow: 0 0 8px rgba(51, 153, 255, 0.9);
+}
+
+.metric-card--mileage .metric-title i {
+  background: #a060ff;
+  box-shadow: 0 0 8px rgba(160, 96, 255, 0.9);
+}
+
+.metric-value {
+  position: absolute;
+  top: 23px;
+  left: 0;
+  width: 100%;
+  color: #fff;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.metric-value span {
+  margin-left: 2px;
+  color: #9bc9ff;
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.metric-line {
+  position: absolute;
+  right: 6px;
+  bottom: 7px;
+  left: 6px;
+  height: 2px;
+  background: linear-gradient(90deg, rgba(51, 153, 255, 0), #3399ff 16%, #3399ff 84%, rgba(51, 153, 255, 0));
+  box-shadow: 0 0 7px rgba(51, 153, 255, 0.65);
+}
+
+.metric-card--mileage .metric-value span {
+  color: #d5b4ff;
+}
+
+.metric-card--mileage .metric-line {
+  background: linear-gradient(90deg, rgba(160, 96, 255, 0), #a060ff 16%, #a060ff 84%, rgba(160, 96, 255, 0));
+  box-shadow: 0 0 7px rgba(160, 96, 255, 0.65);
 }
 </style>
diff --git a/src/views/indexs/left-top.vue b/src/views/indexs/left-top.vue
index 9503c15..2859da9 100644
--- a/src/views/indexs/left-top.vue
+++ b/src/views/indexs/left-top.vue
@@ -1,107 +1,27 @@
 <template>
     <div class="cards-container">
-      <!-- 四个卡片 -->
-      <div class="card">
-        <!-- 数值与文字 -->
+      <div v-for="(card, index) in cards" :key="card.id" class="card">
         <div class="card-info">
-          <!-- 主数值（高亮） -->
           <div class="value-line">
-            <span class="number">{{ cards[0].value }}</span>
-            <span class="unit">{{ cards[0].unit }}</span>
+            <span class="number">{{ card.value }}</span>
+            <span class="unit">{{ card.unit }}</span>
           </div>
-          <!-- 标签说明 -->
-          <div class="label">{{ cards[0].label }}</div>
+          <div class="label">{{ card.label }}</div>
         </div>
-  
-        <!-- 图标及其闪动背景 -->
         <div class="icon-wrapper">
-          <!-- 背后闪动的竖直矩形 -->
-          <div class="icon-bg icon-bg-0"></div>
-          <!-- 圆形平台 -->
+          <div class="icon-bg" :class="`icon-bg-${index}`"></div>
           <div class="platform-circle"></div>
-          <!-- 图标本身（此处用Unicode或自定义图标） -->
           <div class="icon">
-            <img src="@/assets/img/left/1.svg" class="images"/>
-          </div>
-        </div>
-      </div>
-      <div class="card">
-        <!-- 数值与文字 -->
-        <div class="card-info">
-          <!-- 主数值（高亮） -->
-          <div class="value-line">
-            <span class="number">{{ cards[1].value }}</span>
-            <span class="unit">{{ cards[1].unit }}</span>
-          </div>
-          <!-- 标签说明 -->
-          <div class="label">{{ cards[1].label }}</div>
-        </div>
-  
-        <!-- 图标及其闪动背景 -->
-        <div class="icon-wrapper">
-          <!-- 背后闪动的竖直矩形 -->
-          <div class="icon-bg icon-bg-1"></div>
-          <!-- 圆形平台 -->
-          <div class="platform-circle"></div>
-          <!-- 图标本身（此处用Unicode或自定义图标） -->
-          <div class="icon">
-            <img src="@/assets/img/left/2.svg" class="images"/>
-          </div>
-        </div>
-      </div>
-      <div class="card">
-        <!-- 数值与文字 -->
-        <div class="card-info">
-          <!-- 主数值（高亮） -->
-          <div class="value-line">
-            <span class="number">{{ cards[2].value }}</span>
-            <span class="unit">{{ cards[2].unit }}</span>
-          </div>
-          <!-- 标签说明 -->
-          <div class="label">{{ cards[2].label }}</div>
-        </div>
-  
-        <!-- 图标及其闪动背景 -->
-        <div class="icon-wrapper">
-          <!-- 背后闪动的竖直矩形 -->
-          <div class="icon-bg icon-bg-2"></div>
-          <!-- 圆形平台 -->
-          <div class="platform-circle"></div>
-          <!-- 图标本身（此处用Unicode或自定义图标） -->
-          <div class="icon">
-            <img src="@/assets/img/left/3.svg" class="images"/>
-          </div>
-        </div>
-      </div>
-      <div class="card">
-        <!-- 数值与文字 -->
-        <div class="card-info">
-          <!-- 主数值（高亮） -->
-          <div class="value-line">
-            <span class="number">{{ cards[3].value }}</span>
-            <span class="unit">{{ cards[3].unit }}</span>
-          </div>
-          <!-- 标签说明 -->
-          <div class="label">{{ cards[3].label }}</div>
-        </div>
-  
-        <!-- 图标及其闪动背景 -->
-        <div class="icon-wrapper">
-          <!-- 背后闪动的竖直矩形 -->
-          <div class="icon-bg icon-bg-3"></div>
-          <!-- 圆形平台 -->
-          <div class="platform-circle"></div>
-          <!-- 图标本身（此处用Unicode或自定义图标） -->
-          <div class="icon">
-            <img src="@/assets/img/left/4.svg" class="images"/>
+            <img :src="card.srcValue" class="images" />
           </div>
         </div>
       </div>
     </div>
-  </template>
+</template>
   
   <script>
   import { currentGET } from 'api/modules'
+  import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock'
 
   export default {
     name: "BlinkingIcons",
@@ -110,31 +30,31 @@
         cards: [
           {
             id: 1,
-            value: "100/100",
+            value: "62/100",
             unit: "辆",
             label: "在线车数",
-            srcValue: "@/assets/img/left_top_lv.png",
+            srcValue: require("@/assets/img/left/1.svg"),
           },
           {
             id: 2,
             value: "561",
             unit: "kg",
             label: "当日减碳",
-            srcValue: "@/assets/img/left/1.svg",
+            srcValue: require("@/assets/img/left/2.svg"),
           },
           {
             id: 3,
             value: "534",
             unit: "kg",
             label: "当日用氢量",
-            srcValue: "@/assets/img/left/1.svg",
+            srcValue: require("@/assets/img/left/3.svg"),
           },
           {
             id:4,
             value: "3300",
             unit: "km",
             label: "当日里程",
-            srcValue: "@/assets/img/left/1.svg",
+            srcValue: require("@/assets/img/left/4.svg"),
           },
         ],
       };
@@ -144,189 +64,125 @@
     },
     methods: {
       getData() {
-        currentGET("big1").then((res) => {
-          console.log('当日实况');
-          console.log(res);
-          
-          let onLineCount = 0;
-          let vehicleCount = 0;
-          let dayCarbon = 0;
-          let dayHydrogen = 0;
-          let dayMileage = 0;
-          
-          if(res !==null && res.data !==null )
-          {
-            if(res.data.onLineCount !== null)
-              onLineCount = res.data.onLineCount;
-            if(res.data.vehicleCount !== null)
-              vehicleCount = res.data.vehicleCount;
-            if(res.data.dayCarbon !== null)
-              dayCarbon = res.data.dayCarbon;
-            if(res.data.dayHydrogen !== null)
-              dayHydrogen = res.data.dayHydrogen;
-            if(res.data.dayMileage !== null)
-              dayMileage = res.data.dayMileage;
-          }             
-
-          let change = this.cards[0];
-
-          change.value = onLineCount + "/" + vehicleCount;
-          this.$set(this.cards, 0, change);
-
-          change = this.cards[1];
-          change.value = dayCarbon;
-          this.$set(this.cards, 1, change);
-          change = this.cards[2];
-          change.value = dayHydrogen;
-          this.$set(this.cards, 2, change);
-          change = this.cards[3];
-          change.value = dayMileage;
-          this.$set(this.cards, 3, change);
-        });
+        // 保留真实接口请求，展示层统一使用 Excel 汇总的演示数据。
+        this.applyExcelMock();
+        currentGET("big1").catch(() => {});
+      },
+      applyExcelMock() {
+        const { day, onlineTotal, vehicleTotal } = DASHBOARD_EXCEL_MOCK;
+        this.$set(this.cards, 0, { ...this.cards[0], value: `${onlineTotal}/${vehicleTotal}` });
+        this.$set(this.cards, 1, { ...this.cards[1], value: day.carbon });
+        this.$set(this.cards, 2, { ...this.cards[2], value: day.hydrogen });
+        this.$set(this.cards, 3, { ...this.cards[3], value: day.mileage });
       },
     }
   };
   </script>
   
   <style scoped>
-  /* 整体背景 */
   .cards-container {
     display: flex;
     justify-content: space-around;
     align-items: flex-end;
-    padding-left: 0px;
     padding-top: 30px;
     padding-bottom: 30px;
     background-image: url("../../assets/img/left/u665.svg");
     background-repeat: no-repeat;
     background-position: 0% 100%;
-}
-  .images{
+  }
+
+  .images {
     width: 65px;
     height: 70px;
-    margin-left: 10px;
     margin-top: -5px;
+    margin-left: 10px;
   }
-  /* 单个卡片 */
+
   .card {
     position: relative;
     width: 180px;
-    text-align: center;
     color: #fff;
+    text-align: center;
   }
-  
-  /* 卡片信息区域 */
+
   .card-info {
-    margin-bottom: 120px; /* 给下方图标区域留出空间 */
-    margin-left:10px;
+    margin-bottom: 120px;
+    margin-left: 10px;
   }
-  
+
   .value-line {
-    font-size: 20px;
+    width: 120px;
     margin-bottom: 8px;
-    width:120px;
+    font-size: 20px;
   }
-  
+
   .number {
-    color: #45f3ff; /* 高亮数字颜色 */
     margin-right: 6px;
-  
+    color: #45f3ff;
   }
-  
+
   .unit {
     font-size: 14px;
     opacity: 0.8;
   }
-  
+
   .label {
-    font-size: 16px;
     color: #b9e4ff;
+    font-size: 16px;
   }
-  
-  /* 图标容器 */
+
   .icon-wrapper {
     position: absolute;
     bottom: 0;
     left: 54%;
-    transform: translateX(-50%);
     width: 100%;
     height: 100px;
     overflow: visible;
+    transform: translateX(-50%);
   }
-  
-  /* 背后闪动的竖直矩形 */
+
   .icon-bg {
     position: absolute;
+    top: -15%;
     bottom: 0;
     left: 50%;
-    transform: translateX(-50%);
     width: 90px;
     height: 100%;
     border-radius: 6px;
     background-image: url("../../assets/img/left/u676.svg");
     background-repeat: no-repeat;
+    transform: translateX(-50%);
     animation: blink 1s infinite alternate;
-    top: -15%;
   }
-  .icon-bg-0 {
-    animation-delay: 0s;
-  }
-  .icon-bg-1 {
-    animation-delay: 0.2s;
-  }
-  .icon-bg-2 {
-    animation-delay: 0.4s;
-  }
-  .icon-bg-3 {
-    animation-delay: 0.6s;
-  }
-  
-  
-  /* 圆形平台 */
+
+  .icon-bg-0 { animation-delay: 0s; }
+  .icon-bg-1 { animation-delay: 0.2s; }
+  .icon-bg-2 { animation-delay: 0.4s; }
+  .icon-bg-3 { animation-delay: 0.6s; }
+
   .platform-circle {
     position: absolute;
     bottom: 0;
     left: 50%;
-    transform: translateX(-50%);
     width: 100px;
     height: 20px;
-    background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
     border-radius: 50%;
+    background: radial-gradient(rgba(69, 243, 255, 0.4), transparent 70%);
     box-shadow: 0 0 8px #0ad, 0 0 12px #0ad;
+    transform: translateX(-50%);
   }
-  
-  /* 图标 */
+
   .icon {
     position: absolute;
     bottom: -5px;
     left: 50%;
-    transform: translateX(-50%);
-    font-size: 28px;
     color: #00e4ff;
+    font-size: 28px;
+    transform: translateX(-50%);
   }
-  
-  /* 关键帧动画：闪动 */
+
   @keyframes blink {
-    0% {
-      opacity: 0.5;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  
-  /* 图标模拟，可用 Font Awesome 等替换 */
-  .icon-phone::before {
-    content: "☎";
-  }
-  .icon-shield::before {
-    content: "⛨";
-  }
-  .icon-star::before {
-    content: "★";
-  }
-  .icon-protect::before {
-    content: "🛡";
+    0% { opacity: 0.5; }
+    100% { opacity: 1; }
   }
   </style>
-  
\ No newline at end of file
diff --git a/src/views/indexs/right-center.vue b/src/views/indexs/right-center.vue
index d279120..9c1d22c 100644
--- a/src/views/indexs/right-center.vue
+++ b/src/views/indexs/right-center.vue
@@ -1,34 +1,56 @@
 <template>
-  <div ref="chart" style="width: 600px; height: 350px;margin-left: -7%;margin-top: -10%;"></div>
+  <div ref="chart" class="chart-container"></div>
 </template>
  
 <script>
 import * as echarts from 'echarts';
+import { DASHBOARD_EXCEL_MOCK } from '@/mock/dashboardExcelMock';
  
 export default {
   name: 'BarChart',
   mounted() {
     this.initChart();
+    window.addEventListener('resize', this.resizeChart);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart);
+    if (this.chart) this.chart.dispose();
   },
   methods: {
     initChart() {
-      // 基于准备好的dom，初始化echarts实例
-      const myChart = echarts.init(this.$refs.chart);
-      // 指定图表的配置项和数据
+      if (this.chart) this.chart.dispose();
+      this.chart = echarts.init(this.$refs.chart);
+      // 与“月度碳足迹”使用同一份 Excel/演示 Mock 月度减碳量（单位 kg）。
+      const monthCarbon = DASHBOARD_EXCEL_MOCK.months.map(item => item.monthCarbon);
 
       const option = {
+        grid: {
+          left: '7%',
+          right: '3%',
+          top: '8%',
+          bottom: '10%',
+          containLabel: true
+        },
         xAxis: {
           type: 'category',
           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          axisLine: {
+            lineStyle: { color: '#ffffff' }
+          },
+          axisTick: {
+            lineStyle: { color: '#ffffff' }
+          },
           axisLabel: {
-            color: 'white'
+            color: '#ffffff'
           }
         },
         yAxis: {
           type: 'value',
+          name: '减碳量(吨)',
+          nameTextStyle: { color: '#6a99f8', fontSize: 13, fontWeight: 600 },
           axisLabel: {
             color: 'white',
-            formatter: '{value}kg'
+            formatter: value => `${Number(value / 1000).toFixed(0)}吨`
           },
           splitLine: {
             lineStyle: {
@@ -40,13 +62,12 @@ export default {
         tooltip: { 
           trigger: 'axis' ,
             formatter: (params) => {
-            console.log(params)
-            return `减碳量：${params[0].value}kg`;
+            return `${params[0].axisValue}<br/>减碳量：${(params[0].value / 1000).toFixed(2)}吨`;
           }
         },
         series: [
           {
-            data: [120, 200, 150, 80, 70, 110, 30, 0, 0, 0, 0, 0],
+            data: monthCarbon,
             type: 'bar',
             itemStyle: {
             // 使用线性渐变填充颜色
@@ -61,9 +82,18 @@ export default {
           }
         ]
       };
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
+      this.chart.setOption(option);
+    },
+    resizeChart() {
+      if (this.chart) this.chart.resize();
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/indexs/right-top.vue b/src/views/indexs/right-top.vue
index f1eaa81..a7e35d7 100644
--- a/src/views/indexs/right-top.vue
+++ b/src/views/indexs/right-top.vue
@@ -1,119 +1,157 @@
 <template>
-  <div ref="chart" style="width: 520px; height: 280px;margin-top: 0%;"></div>
+  <div ref="chart" class="chart-container"></div>
 </template>
  
 <script>
 import * as echarts from 'echarts';
  
 export default {
-  name: 'DoubleAxisChart',
+  name: 'EmptyContainerChart',
   mounted() {
     this.initChart();
+    window.addEventListener('resize', this.resizeChart);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart);
+    if (this.chart) this.chart.dispose();
   },
   methods: {
     initChart() {
       const chartDom = this.$refs.chart;
-      const myChart = echarts.init(chartDom);
+      if (this.chart) this.chart.dispose();
+      this.chart = echarts.init(chartDom);
       const option = {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'cross'
+            type: 'line',
+            lineStyle: { color: 'rgba(102, 222, 255, 0.48)', type: 'dashed' }
           },
+          backgroundColor: 'rgba(5, 28, 63, 0.94)',
+          borderColor: 'rgba(65, 215, 255, 0.62)',
+          borderWidth: 1,
+          padding: [8, 12],
+          textStyle: { color: '#e8f8ff', fontSize: 13 },
           formatter: (params) => {
-            //console.log(params)
-            return `空箱：${params[0].value}标箱<br/>危险品：${params[1].value}标箱`;
+            const first = params && params[0];
+            if (!first || first.value == null) return `${first ? first.axisValueLabel : ''}<br/>暂无数据`;
+            return `${first.axisValueLabel}<br/><span style="color:#7eeeff">空箱</span>：${first.value.toLocaleString()} 标箱`;
           }
         },
         legend: {
-          data: ['空箱', '危险品'],
+          data: ['空箱'],
           left: 'right',
+          top: 0,
           icon: 'line',
-          itemWidth: 30,
-          itemHeight: .0,
+          itemWidth: 24,
+          itemHeight: 3,
           itemGap: 10,
           textStyle: {
-            color: 'white',
-            fontSize: 16,
-            fontWeight: 'normal',
+            color: '#d9f5ff',
+            fontSize: 14,
+            fontWeight: 600,
             fontFamily: 'Arial, sans-serif'
           }
         },
         grid: {
-          left: '3%',
+          left: '4%',
           right: '4%',
-          bottom: '3%',
+          top: '20%',
+          bottom: '10%',
           containLabel: true
         },
         xAxis: [
           {
             type: 'category',
             boundaryGap: false,
-            data: ['点1', '点2', '点3', '点4', '点5', '点6', '点7']
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            axisLine: {
+              lineStyle: { color: '#558cc5', width: 1 }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              color: '#c7e3ff',
+              fontSize: 12,
+              margin: 12
+            }
           }
         ],
-        yAxis: [
-          {
-            type: 'value',
-            name: '',
-            axisLine: {
-              lineStyle: {
-                color: 'white'
-              }
-            },
-            splitLine: { lineStyle: { color: '#081b42' } },
-            axisLabel: {
-              formatter: '{value}标箱'
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 10000,
+          interval: 2000,
+          name: '标箱',
+          nameTextStyle: {
+            color: '#6edcff',
+            fontSize: 12,
+            fontWeight: 600,
+            padding: [0, 0, 0, -4]
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#558cc5'
             }
           },
-          {
-            type: 'value',
-            name: '',
-            axisLine: {
-              lineStyle: {
-                color: 'white'
-              }
-            },
-            splitLine: { lineStyle: { color: '#081b42' } },
-            axisLabel: {
-              formatter: '{value}标箱'
-            }
+          axisTick: { show: false },
+          splitLine: { lineStyle: { color: 'rgba(49, 123, 181, 0.42)', type: 'dashed' } },
+          axisLabel: {
+            color: '#c7e3ff',
+            fontSize: 12,
+            formatter: value => `${(value / 1000).toFixed(0)}k`
           }
-        ],
+        },
         series: [
           {
             name: '空箱',
             type: 'line',
-            stack: '总量',
-            areaStyle: {color: 'orange'},
+            data: [5528, 3041, 2963, 3310, 8410, 6885, 9440, 2279, null, null, null, null],
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 6,
+            showSymbol: true,
+            itemStyle: {
+              color: '#78eeff',
+              borderColor: '#062551',
+              borderWidth: 2,
+              shadowBlur: 9,
+              shadowColor: 'rgba(51, 222, 255, 0.85)'
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(48, 216, 255, 0.38)' },
+                { offset: 0.65, color: 'rgba(31, 164, 234, 0.14)' },
+                { offset: 1, color: 'rgba(20, 94, 169, 0.02)' }
+              ])
+            },
             emphasis: {
-              focus: 'series'
+              focus: 'series',
+              scale: true
             },
-            data: [120, 132, 101, 134, 90, 230, 210],
             lineStyle: {
-              color: 'orange', // 线条颜色
-              width: 2, // 线条宽度
-            },
-          },
-          {
-            name: '危险品',
-            type: 'line',
-            yAxisIndex: 1, // 使用第二个Y轴
-            stack: '总量',
-            areaStyle: {color: 'blue'},
-            emphasis: {
-              focus: 'series'
-            },
-            data: [220, 182, 191, 234, 290, 330, 310],
-            lineStyle: {
-              color: 'blue', // 线条颜色
-              width: 2, // 线条宽度
+              color: '#32d8ff',
+              width: 3,
+              shadowBlur: 8,
+              shadowColor: 'rgba(38, 204, 255, 0.75)'
             },
+            connectNulls: false
           }
         ]
       };
-      myChart.setOption(option);
+      this.chart.setOption(option);
+    },
+    resizeChart() {
+      if (this.chart) this.chart.resize();
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>