diff --git a/package.json b/package.json
index af0ff12..c028022 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "echarts": "^5.4.3",
+    "echarts-gl": "^2.0.9",
     "element-plus": "^2.4.3",
     "moment": "^2.29.4",
     "sass": "^1.69.5",
diff --git a/src/assets/font/D-DIN-Bold.otf b/src/assets/font/D-DIN-Bold.otf
new file mode 100644
index 0000000..95f91b3
Binary files /dev/null and b/src/assets/font/D-DIN-Bold.otf differ
diff --git a/src/assets/font/font.css b/src/assets/font/font.css
index 3bb3fb4..679aa4a 100644
--- a/src/assets/font/font.css
+++ b/src/assets/font/font.css
@@ -11,4 +11,11 @@
     src: url('./msyhl.ttc');
     font-weight: normal;
     font-style: normal;
+}
+/* D-DIN-Bold */
+@font-face {
+    font-family: "D-DIN-Bold";
+    src: url('./D-DIN-Bold.otf');
+    font-weight: normal;
+    font-style: normal;
 }
\ No newline at end of file
diff --git a/src/assets/images/carbonEmission/carbonEmission StatisticsReport.png b/src/assets/images/carbonEmission/carbonEmission StatisticsReport.png
new file mode 100644
index 0000000..e25cca3
Binary files /dev/null and b/src/assets/images/carbonEmission/carbonEmission StatisticsReport.png differ
diff --git a/src/assets/images/carbonEmission/carbonEmissionReduction.png b/src/assets/images/carbonEmission/carbonEmissionReduction.png
new file mode 100644
index 0000000..a1a29ea
Binary files /dev/null and b/src/assets/images/carbonEmission/carbonEmissionReduction.png differ
diff --git a/src/assets/images/carbonEmission/carbonNeutralityBg.png b/src/assets/images/carbonEmission/carbonNeutralityBg.png
new file mode 100644
index 0000000..0d45c50
Binary files /dev/null and b/src/assets/images/carbonEmission/carbonNeutralityBg.png differ
diff --git a/src/assets/images/carbonEmission/carbonOffsettingAmount.png b/src/assets/images/carbonEmission/carbonOffsettingAmount.png
new file mode 100644
index 0000000..7b66281
Binary files /dev/null and b/src/assets/images/carbonEmission/carbonOffsettingAmount.png differ
diff --git a/src/assets/images/carbonEmission/totalEmissions.png b/src/assets/images/carbonEmission/totalEmissions.png
new file mode 100644
index 0000000..f9efa34
Binary files /dev/null and b/src/assets/images/carbonEmission/totalEmissions.png differ
diff --git a/src/assets/images/overview/nextYear.png b/src/assets/images/overview/nextYear.png
new file mode 100644
index 0000000..0e0f4db
Binary files /dev/null and b/src/assets/images/overview/nextYear.png differ
diff --git a/src/assets/images/overview/prevYear.png b/src/assets/images/overview/prevYear.png
new file mode 100644
index 0000000..cf44d41
Binary files /dev/null and b/src/assets/images/overview/prevYear.png differ
diff --git a/src/components/calendar/index.vue b/src/components/calendar/index.vue
index e9717f7..3640997 100644
--- a/src/components/calendar/index.vue
+++ b/src/components/calendar/index.vue
@@ -17,7 +17,7 @@ const selectDate = (val) => {
     <template #header="{ date }">
       <div>
         <img
-          @click="selectDate('prev-month')"
+          @click="selectDate('prev-year')"
           src="../../assets/images/overview/prevMonth.png"
           style="
             width: 16px;
@@ -26,9 +26,30 @@ const selectDate = (val) => {
             border: 0.5px dashed rgba(255, 255, 255, 0.3);
           "
         />
+        <img
+          @click="selectDate('prev-month')"
+          src="../../assets/images/overview/prevYear.png"
+          style="
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            border: 0.5px dashed rgba(255, 255, 255, 0.3);
+          "
+        />
+
         <span @click="toggleClick" style="font-size: 13px">{{ date }}</span>
         <img
           @click="selectDate('next-month')"
+          src="../../assets/images/overview/nextYear.png"
+          style="
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            border: 0.5px dashed rgba(255, 255, 255, 0.3);
+          "
+        />
+        <img
+          @click="selectDate('next-year')"
           src="../../assets/images/overview/nextMonth.png"
           style="
             width: 16px;
@@ -48,7 +69,7 @@ const selectDate = (val) => {
 </template>
 
 <style scoped lang="less">
-:deep.el-calendar {
+.el-calendar {
   font-size: 0.7rem;
   width: 100% !important;
   height: 100% !important;
@@ -91,10 +112,12 @@ const selectDate = (val) => {
   }
 }
 :deep(.el-calendar-day .day) {
-  font-size: 12px;
+  font-size: 13px;
   height: 60%;
+  font-family: "D-DIN-Bold";
 }
 :deep(.el-calendar-day .value) {
+  font-size: 10px;
   color: rgba(91, 250, 241, 1);
   height: 40%;
 }
diff --git a/src/utils/carbonNeutrality.js b/src/utils/carbonNeutrality.js
new file mode 100644
index 0000000..d982589
--- /dev/null
+++ b/src/utils/carbonNeutrality.js
@@ -0,0 +1,285 @@
+/**
+ * 绘制3d图
+ * @param pieData 总数据
+ * @param internalDiameterRatio:透明的空心占比
+ * @param distance 视角到主体的距离
+ * @param alpha 旋转角度
+ * @param pieHeight 立体的高度
+ * @param opacity 饼或者环的透明度
+ */
+const getPie3D = (
+  pieData,
+  internalDiameterRatio,
+  distance,
+  alpha,
+  pieHeight,
+  opacity = 1
+) => {
+  const series = [];
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  let legendData = [];
+  let legendBfb = [];
+  const k = 1 - internalDiameterRatio;
+  pieData.sort((a, b) => {
+    return b.value - a.value;
+  });
+  // 为每一个饼图数据，生成一个 series-surface 配置
+  for (let i = 0; i < pieData.length; i++) {
+    sumValue += pieData[i].value;
+    const seriesItem = {
+      name:
+        typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
+      type: "surface",
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      pieData: pieData[i],
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k: k,
+      },
+      center: ["10%", "50%"],
+    };
+    if (typeof pieData[i].itemStyle !== "undefined") {
+      const itemStyle = {};
+      itemStyle.color =
+        typeof pieData[i].itemStyle.color !== "undefined"
+          ? pieData[i].itemStyle.color
+          : opacity;
+      itemStyle.opacity =
+        typeof pieData[i].itemStyle.opacity !== "undefined"
+          ? pieData[i].itemStyle.opacity
+          : opacity;
+      seriesItem.itemStyle = itemStyle;
+    }
+    series.push(seriesItem);
+  }
+
+  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+  legendData = [];
+  legendBfb = [];
+  for (let i = 0; i < series.length; i++) {
+    endValue = startValue + series[i].pieData.value;
+    series[i].pieData.startRatio = startValue / sumValue;
+    series[i].pieData.endRatio = endValue / sumValue;
+    series[i].parametricEquation = getParametricEquation(
+      series[i].pieData.startRatio,
+      series[i].pieData.endRatio,
+      false,
+      false,
+      k,
+      series[i].pieData.value
+    );
+    startValue = endValue;
+    const bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
+    legendData.push({
+      name: series[i].name,
+      value: bfb,
+    });
+    legendBfb.push({
+      name: series[i].name,
+      value: bfb,
+    });
+  }
+  const boxHeight = getHeight3D(series, pieHeight); // 通过pieHeight设定3d饼/环的高度，单位是px
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
+  const option = {
+    legend: {
+      show: false,
+      data: legendData,
+      orient: "vertical",
+      left: 10,
+      top: 10,
+      itemGap: 10,
+      textStyle: {
+        color: "#A1E2FF",
+      },
+      icon: "circle",
+      formatter: function (param) {
+        const item = legendBfb.filter((item) => item.name === param)[0];
+        const bfs = fomatFloat(item.value * 100, 2) + "%";
+        return `${item.name}  ${bfs}`;
+      },
+    },
+    labelLine: {
+      show: true,
+      lineStyle: {
+        color: "#fff",
+      },
+    },
+    label: {
+      show: true,
+      position: "outside",
+      formatter: "{b} \n{c} {d}%",
+    },
+    tooltip: {
+      backgroundColor: "#033b77",
+      borderColor: "#21f2c4",
+      textStyle: {
+        color: "#fff",
+        fontSize: 13,
+      },
+      formatter: (params) => {
+        if (
+          params.seriesName !== "mouseoutSeries" &&
+          params.seriesName !== "信用评价"
+        ) {
+          // console.log(option.series,params.seriesName,'option.series[params.seriesIndex].pieData');
+          const bfb = (
+            (option.series[params.seriesIndex].pieData.endRatio -
+              option.series[params.seriesIndex].pieData.startRatio) *
+            100
+          ).toFixed(2);
+          return (
+            `${params.seriesName}<br/>` +
+            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+            `${bfb}%`
+          );
+        }
+      },
+    },
+    xAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    yAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    zAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    grid3D: {
+      show: false,
+      boxHeight: boxHeight, // 圆环的高度
+      viewControl: {
+        // 3d效果可以放大、旋转等，请自己去查看官方配置
+        alpha, // 角度
+        distance, // 调整视角到主体的距离，类似调整zoom
+        rotateSensitivity: 0, // 设置为0无法旋转
+        zoomSensitivity: 0, // 设置为0无法缩放
+        panSensitivity: 0, // 设置为0无法平移
+        autoRotate: false, // 自动旋转
+      },
+    },
+    series: series,
+  };
+  return option;
+};
+
+/**
+ * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+ */
+const getParametricEquation = (
+  startRatio,
+  endRatio,
+  isSelected,
+  isHovered,
+  k,
+  h
+) => {
+  // 计算
+  const midRatio = (startRatio + endRatio) / 2;
+  const startRadian = startRatio * Math.PI * 2;
+  const endRadian = endRatio * Math.PI * 2;
+  const midRadian = midRatio * Math.PI * 2;
+  // 如果只有一个扇形，则不实现选中效果。
+  if (startRatio === 0 && endRatio === 1) {
+    isSelected = false;
+  }
+  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+  k = typeof k !== "undefined" ? k : 1 / 3;
+  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+  const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+  const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  const hoverRate = isHovered ? 1.05 : 1;
+  // 返回曲面参数方程
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32,
+    },
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20,
+    },
+    x: function (u, v) {
+      if (u < startRadian) {
+        return (
+          offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+        );
+      }
+      if (u > endRadian) {
+        return (
+          offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+        );
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+    y: function (u, v) {
+      if (u < startRadian) {
+        return (
+          offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+        );
+      }
+      if (u > endRadian) {
+        return (
+          offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+        );
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+    z: function (u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * h * 0.1;
+      }
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    },
+  };
+};
+
+/**
+ * 获取3d丙图的最高扇区的高度
+ */
+const getHeight3D = (series, height) => {
+  series.sort((a, b) => {
+    return b.pieData.value - a.pieData.value;
+  });
+  return (height * 25) / series[0].pieData.value;
+};
+
+/**
+ * 格式化浮点数
+ */
+const fomatFloat = (num, n) => {
+  let f = parseFloat(num);
+  if (isNaN(f)) {
+    return false;
+  }
+  f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+  let s = f.toString();
+  let rs = s.indexOf(".");
+  // 判定如果是整数，增加小数点再补0
+  if (rs < 0) {
+    rs = s.length;
+    s += ".";
+  }
+  while (s.length <= rs + n) {
+    s += "0";
+  }
+  return s;
+};
+
+export { getPie3D, getParametricEquation };
diff --git a/src/views/carbonEmission/index.vue b/src/views/carbonEmission/index.vue
index 035d108..bed825a 100644
--- a/src/views/carbonEmission/index.vue
+++ b/src/views/carbonEmission/index.vue
@@ -1,13 +1,868 @@
-<script setup>
-
-</script>
-
 <template>
-<div >
-  碳排放
-</div>
+  <div class="page m100">
+    <div class="page-left-box">
+      <!--  总览-->
+      <div class="title">
+        <span>总览</span>
+        <div class="titleDate">
+          <div
+            v-for="(item, index) in overviewDate"
+            :key="index"
+            :class="[activeDate == index ? 'dateAc' : 'date']"
+            @click="switchDate(index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div
+        class="margin10 box-bg"
+        style="
+          display: flex;
+          flex-wrap: wrap;
+          flex-direction: column;
+          align-content: space-around;
+          justify-content: space-evenly;
+        "
+      >
+        <div
+          v-for="(item, index) in overviewList"
+          :class="'overview-item' + index"
+        >
+          <span class="unit" style="margin-left: 1rem">{{ item.name }}</span>
+          <p class="overviewValue">
+            <span class="value">{{ item.num }}</span>
+            <span class="unit">{{ item.unit }}</span>
+          </p>
+        </div>
+      </div>
+      <!--  碳流图-->
+      <div class="title margin10">
+        <span>碳流图</span>
+      </div>
+      <div class="margin10 box-bg" id=""></div>
+      <!--  碳排放趋势-->
+      <div class="title margin10">
+        <span>碳排放趋势</span>
+        <div class="titleDate">
+          <div
+            v-for="(item, index) in trendDate"
+            :key="index"
+            :class="[trendActiveDate == index ? 'dateAc' : 'date']"
+            @click="trandSwitchDate(index)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="margin10 box-bg">
+        <div id="carbonTrends" style="width: 100%; height: 100%"></div>
+        <div class="carbonTrendsReport"></div>
+      </div>
+    </div>
+    <div class="page-right-box">
+      <!--  碳排放强度 -->
+      <div class="title">
+        <span>碳排放强度</span>
+      </div>
+      <div class="margin10 box-bg" id="carbonIntensity"></div>
+      <!--  各系统碳排放量统计-->
+      <div class="title margin10">
+        <span>各系统碳排放量统计</span>
+      </div>
+      <div class="margin10 box-bg" id="carbonEmissionStatistics"></div>
+      <!--  碳中和-->
+      <div class="title margin10">
+        <span>碳中和</span>
+      </div>
+      <div class="margin10 box-bg">
+        <div id="carbonNeutrality" style="width: 100%; height: 100%"></div>
+        <div class="carbonNeutralityBg"></div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped lang="scss">
+<script setup>
+import { ref, onMounted } from "vue";
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "@/utils/carbonNeutrality";
 
-</style>
\ No newline at end of file
+const getImageUrl = (name) => {
+  return new URL(name, import.meta.url).href;
+};
+const overviewDate = ref([
+  {
+    name: "年",
+  },
+  {
+    name: "月",
+  },
+]);
+//总览
+const activeDate = ref(0);
+const overviewList = ref([
+  {
+    name: "总排放量",
+    num: 83,
+    unit: "万tCO2",
+  },
+  {
+    name: "碳抵消量",
+    num: 83,
+    unit: "万tCO2",
+  },
+  {
+    name: "碳减排量",
+    num: 83,
+    unit: "万tCO2",
+  },
+]);
+//总览切换时间
+function switchDate(index) {
+  activeDate.value = index;
+}
+//碳趋势切换时间
+function trandSwitchDate(index) {
+  trendActiveDate.value = index;
+}
+//碳趋势
+const trendActiveDate = ref(0);
+const trendDate = ref([
+  {
+    name: "月",
+  },
+  {
+    name: "日",
+  },
+]);
+//碳趋势图表
+function getCarbonTrends() {
+  let myChart = echarts.init(document.getElementById("carbonTrends"));
+  const option = {
+    // backgroundColor: "#05224d",
+    tooltip: {},
+    grid: {
+      top: "18%",
+      left: "4%",
+      right: "4%",
+      bottom: "4%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        axisLine: {
+          //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            // type:'dashed',
+            color: "#557775",
+            // color: "#233e64",
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#DDFFFD",
+            margin: 40,
+          },
+        },
+
+        axisTick: { show: false },
+        boundaryGap: true,
+        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "单位:万tCO2",
+        nameTextStyle: {
+          color: "#DDFFFD",
+          // align: "right",
+          padding: [0, 10, 0, 0],
+        },
+        min: 0,
+        max: 2000,
+        splitNumber: 5,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(1, 39, 37, 0.30)",
+          },
+        },
+        axisLine: { show: false },
+        axisLabel: {
+          textStyle: {
+            color: "#DDFFFD",
+          },
+        },
+        axisTick: { show: false },
+      },
+    ],
+    series: [
+      {
+        name: "异常流量",
+        type: "line",
+        smooth: true, //是否平滑曲线显示
+        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+        symbolSize: 0,
+
+        lineStyle: {
+          color: "#5BFAF1", // 线条颜色
+        },
+        areaStyle: {
+          //区域填充样式
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
+              { offset: 1, color: "rgba(91, 250, 241, 0)" },
+            ],
+            false
+          ),
+
+          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
+          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+        data: [200, 300, 400, 500, 600, 700, 800],
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+//碳排放强度
+function getCarbonIntensity() {
+  const offsetX = 10; //bar宽
+  const offsetY = 5; //倾斜角度
+  // 绘制左侧面
+  const CubeLeft = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const xAxisPoint = shape.xAxisPoint;
+      const c0 = [shape.x - 7, shape.y];
+      const c1 = [shape.x + 7, shape.y];
+      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
+      const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
+      ctx
+        .moveTo(c0[0], c0[1])
+        .lineTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .closePath();
+      ctx.stroke();
+    },
+  });
+  // 绘制右侧面
+  const CubeRight = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const xAxisPoint = shape.xAxisPoint;
+      const c1 = [shape.x + 7, shape.y];
+      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
+      const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
+      const c4 = [shape.x + 7 + 7, shape.y - 5];
+      ctx
+        .moveTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .lineTo(c4[0], c4[1])
+        .closePath();
+      ctx.stroke();
+    },
+  });
+  // 绘制顶面
+  const CubeTop = echarts.graphic.extendShape({
+    shape: {
+      x: 0,
+      y: 0,
+    },
+    buildPath: function (ctx, shape) {
+      const c1 = [shape.x - 7, shape.y];
+      const c2 = [shape.x + 8, shape.y];
+      const c3 = [shape.x + 15, shape.y - 5];
+      const c4 = [shape.x - 2, shape.y - 5];
+      ctx
+        .moveTo(c1[0], c1[1])
+        .lineTo(c2[0], c2[1])
+        .lineTo(c3[0], c3[1])
+        .lineTo(c4[0], c4[1])
+        .closePath();
+      ctx.stroke();
+    },
+  });
+  // 注册三个面图形
+  echarts.graphic.registerShape("CubeLeft", CubeLeft);
+  echarts.graphic.registerShape("CubeRight", CubeRight);
+  echarts.graphic.registerShape("CubeTop", CubeTop);
+  let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];
+  let seriesData = [100, 200, 400, 250, 360, 250, 340];
+  // 绿色渐变
+  // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
+  // 蓝色渐变
+  let colorArr = [
+    ["rgba(0, 170, 193, 1)"],
+    ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
+    ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
+  ];
+  let myChart = echarts.init(document.getElementById("carbonIntensity"));
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      formatter: function (params, ticket, callback) {
+        const item = params[1];
+        return item.name + " : " + item.value;
+      },
+    },
+    color: "#01DDF9",
+    legend: {
+      icon: "rect",
+      right: "4%",
+      top: "3%",
+      itemWidth: 20, // 标签宽度为20px
+      itemHeight: 10, // 标签高度为10px
+      textStyle: {
+        color: "rgba(221, 255, 253, 1)",
+      },
+      data: ["单位面积碳排放强度限值"],
+    },
+    grid: {
+      left: "4%",
+      right: "5%",
+      top: "18%",
+      bottom: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: xAxisData,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          type: "solid",
+          color: "rgba(255, 255, 255, 0.20)",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "rgba(221, 255, 253, 1)",
+        fontSize: 14,
+        interval: 0,
+        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
+        // formatter: function (value) {
+        //   const length = value.length;
+        //   if (length > 3) {
+        //     const start = Math.floor(length / 2);
+        //     const str =
+        //       value.slice(0, start) + "\n" + value.slice(start, length);
+        //     return str;
+        //   }
+        //   return value;
+        // },
+      },
+    },
+    yAxis: {
+      type: "value",
+      name: "单位:万tCO2/人·年",
+      nameTextStyle: {
+        color: "#DDFFFD",
+        padding: [0, 0, 0, 35],
+      },
+      max:500,
+      min:0,
+      //   minInterval: 1,
+      // y轴（竖直线）
+      axisLine: {
+        show: false,
+      },
+      // y轴横向 标线
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(1, 39, 37, 0.30)",
+        },
+      },
+      // y轴刻度线
+      axisTick: {
+        show: false,
+      },
+      // y轴文字
+      axisLabel: {
+        fontSize: 14,
+        color: "#DDFFFD",
+      },
+    },
+    series: [
+      {
+        type: "custom",
+        name: "单位面积碳排放强度限值",
+        renderItem: (params, api) => {
+          const location = api.coord([api.value(0), api.value(1)]);
+          return {
+            type: "group",
+            children: [
+              // 左侧面
+              {
+                type: "CubeLeft",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: colorArr[1][0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[1][1],
+                    },
+                  ]),
+                },
+              },
+              // 右侧面
+              {
+                type: "CubeRight",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: colorArr[2][0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[2][1],
+                    },
+                  ]),
+                },
+              },
+              // 顶部
+              {
+                type: "CubeTop",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: colorArr[0][0],
+                    },
+                    {
+                      offset: 1,
+                      color: colorArr[0][0],
+                    },
+                  ]),
+                },
+              },
+            ],
+          };
+        },
+        data: seriesData,
+      },
+      {
+        type: "bar",
+        label: {
+          normal: {
+            show: false,
+            position: "top",
+            formatter: (e) => {
+              return e.value;
+            },
+            fontSize: 16,
+            color: "#43C4F1",
+            offset: [0, -5],
+          },
+        },
+        itemStyle: {
+          color: "transparent",
+        },
+        tooltip: {},
+        data: seriesData,
+        markLine: {
+          symbol: "none",
+          data: [
+            {
+              yAxis: 400,
+              lineStyle: {
+                color: "rgba(255, 221, 0, 1)",
+                type: "dashed",
+                width: 1,
+              },
+              label: {
+                show: false,
+                position: "end",
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+//各系统碳排放量统计
+function getCarbonEmissionStatistics() {
+  let myChart = echarts.init(
+    document.getElementById("carbonEmissionStatistics")
+  );
+  let option = {
+    grid: {
+      left: "5%",
+      right: "5%",
+      bottom: "-10%",
+      top: "8%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "none",
+      },
+      formatter: function (params) {
+        return (
+          params[0].name +
+          "<br/>" +
+          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
+          params[0].seriesName +
+          "" +
+          Number(
+            (params[0].value.toFixed(4) / 10000).toFixed(2)
+          ).toLocaleString() +
+          " kWh<br/>"
+        );
+      },
+    },
+    xAxis: {
+      show: false,
+      type: "value",
+    },
+    yAxis: [
+      {
+        type: "category",
+        inverse: true,
+        axisLabel: {
+          padding: [0, 0, 10, -10],
+          verticalAlign: "bottom",
+          inside: true,
+          show: true,
+          textStyle: {
+            color: "#fff",
+            fontSize: "14",
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
+      },
+      {
+        type: "category",
+        inverse: true,
+        axisTick: "none",
+        axisLine: "none",
+        show: true,
+        axisLabel: {
+          padding: [0, 0, 10, -10],
+          verticalAlign: "bottom",
+          inside: true,
+          textStyle: {},
+          formatter: function (value) {
+            return (
+              "{a|" + (value / 10000).toLocaleString() + "}" + "{b|万tCO2}"
+            );
+          },
+          rich: {
+            a: {
+              fontSize: "16",
+              color: "rgba(0, 255, 240, 1)",
+              padding: [0, 6, 0, 0],
+            },
+            b: {
+              color: "#fff",
+              fontSize: "12",
+            },
+          },
+        },
+        data: [50000000, 22000000, 10000000, 5000000, 1],
+      },
+    ],
+    series: [
+      {
+        name: "",
+        type: "bar",
+        zlevel: 1,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            {
+              offset: 0,
+              color: "rgba(29, 169, 153, 1)",
+            },
+            {
+              offset: 1,
+              color: "rgba(223, 243, 240, 1)",
+            },
+          ]),
+        },
+        barWidth: 8,
+        data: [50000000, 22000000, 10000000, 5000000, 200],
+      },
+      {
+        name: "背景",
+        type: "bar",
+        barWidth: 10,
+        barGap: "-115%",
+        data: [50000000, 50000000, 50000000, 50000000, 50000000],
+        itemStyle: {
+          color: "rgba(5, 33, 31, 0.32)",
+        },
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+const optionData = ref([
+  {
+    name: "CCER",
+    value: 176,
+  },
+  {
+    name: "绿电",
+    value: 288,
+  },
+  {
+    name: "绿证",
+    value: 88,
+  },
+]);
+const color = [
+  "rgba(0, 140, 255, 1)",
+  "rgba(1, 225, 242, 1)",
+  "rgba(27, 255, 118, 1)",
+];
+function setLabel() {
+  optionData.value.forEach((item, index) => {
+    item.itemStyle = {
+      color: color[index],
+    };
+    item.label = {
+      normal: {
+        show: true,
+        color: color[index],
+        // position: "right",
+        padding: [0, -50],
+        // distance:-10,
+        offset: [0, 3],
+        formatter: [
+          "{d|{d}%}",
+          //   '{c|{c}}{b|台}',
+          "{b|{b}}",
+        ].join("\n"), // 用\n来换行
+        rich: {
+          b: {
+            lineHeight: 30,
+            align: "left",
+            fontSize: 12,
+            color: "#fff",
+          },
+          c: {
+            fontSize: 15,
+            // color: '#fff',
+            textShadowColor: "#1c90a6",
+            textShadowOffsetX: 0,
+            textShadowOffsetY: 2,
+            textShadowBlur: 5,
+            color: color[index],
+          },
+          d: {
+            color: color[index],
+            fontSize: 18,
+            fontWeight: 600,
+            align: "left",
+          },
+        },
+      },
+    };
+    item.labelLine = {
+      normal: {
+        length2: 100,
+        lineStyle: {
+          width: 1,
+          color: color[index],
+        },
+      },
+    };
+  });
+}
+//碳中和
+function getCarbonNeutrality() {
+  setLabel();
+  let myChart = echarts.init(document.getElementById("carbonNeutrality"));
+  let option = getPie3D(optionData.value, 0, 270, 26, 40, 1);
+
+  // myChart.setOption(option);
+  // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+  option.series.push({
+    name: "", //自己根据场景修改
+    backgroundColor: "transparent",
+    type: "pie",
+    label: {
+      opacity: 1,
+      fontSize: 13,
+      lineHeight: 20,
+    },
+    startAngle: -40, // 起始角度，支持范围[0, 360]。
+    clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+    radius: ["20%", "60%"],
+    center: ["50%", "50%"],
+    data: optionData.value,
+    itemStyle: {
+      opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+    },
+  });
+  myChart.setOption(option);
+  // bindListen(myChart);
+}
+//加载完dom执行
+onMounted(() => {
+  //碳趋势图表
+  getCarbonTrends();
+  //碳排放强度
+  getCarbonIntensity();
+  //各系统碳排放量统计
+  getCarbonEmissionStatistics();
+  //碳中和
+  getCarbonNeutrality();
+});
+</script>
+
+<style lang="scss" scoped>
+.titleDate {
+  display: flex;
+  justify-content: space-between;
+  width: 25%;
+  font-size: 14px;
+  font-weight: normal;
+  .date {
+    padding: 0 0.8rem;
+    background-image: url("@/assets/images/small-icon.png");
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
+  .dateAc {
+    padding: 0 0.8rem;
+    background-image: url("@/assets/images/small-icon-select.png");
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
+}
+.overview-item0 {
+  width: 24.125rem;
+  height: 27%;
+  background: url("@/assets/images/carbonEmission/totalEmissions.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.overview-item1 {
+  width: 24.125rem;
+  height: 27%;
+  background: url("@/assets/images/carbonEmission/carbonOffsettingAmount.png")
+    no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.overview-item2 {
+  width: 24.125rem;
+  height: 27%;
+  background: url("@/assets/images/carbonEmission/carbonEmissionReduction.png")
+    no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.overviewValue {
+  left: 10%;
+  position: relative;
+  .unit {
+    font-size: 0.8rem;
+    color: rgba(221, 255, 253, 1);
+  }
+  .value {
+    margin-right: 0.3rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: rgba(91, 250, 241, 1);
+  }
+}
+.carbonTrendsReport {
+  width: 27.2%;
+  height: 10%;
+  position: relative;
+  background: url("@/assets/images/carbonEmission/carbonEmission StatisticsReport.png")
+    no-repeat;
+  background-size: 100% 100%;
+  bottom: 97%;
+  left: 70%;
+  cursor: pointer;
+}
+.carbonNeutralityBg {
+  width: 68.7%;
+  height: 50.5%;
+  background: url("@/assets/images/carbonEmission/carbonNeutralityBg.png")
+    no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  z-index: 999;
+  bottom: 60%;
+  left: 16%;
+}
+</style>