diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonGather.vue b/src/views/count/components/carbonGather.vue
new file mode 100644
index 0000000..5f3ff37
--- /dev/null
+++ b/src/views/count/components/carbonGather.vue
@@ -0,0 +1,31 @@
+<!-- 碳排汇总柱状图 -->
+<script lang="ts" setup>
+import lineChart from './BarChart.vue'
+const data = ref<any[]>([])
+setTimeout(() => {
+  data.value = [
+    {
+      name: 'test1',
+      data: [320, 302, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'test2',
+      data: [32, 307, 30, 34, 30, 300, 37],
+    },
+  ]
+}, 1000 * 3)
+const xAxisData = ref([
+  '周一', '周二', '周三', '周四', '周五', '周六', '周日 ',
+])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排汇总</div>
+    <line-chart
+      :data="data"
+      width="400px"
+      height="400px"
+    />
+  </div>
+</template>

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonGather.vue b/src/views/count/components/carbonGather.vue
new file mode 100644
index 0000000..5f3ff37
--- /dev/null
+++ b/src/views/count/components/carbonGather.vue
@@ -0,0 +1,31 @@
+<!-- 碳排汇总柱状图 -->
+<script lang="ts" setup>
+import lineChart from './BarChart.vue'
+const data = ref<any[]>([])
+setTimeout(() => {
+  data.value = [
+    {
+      name: 'test1',
+      data: [320, 302, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'test2',
+      data: [32, 307, 30, 34, 30, 300, 37],
+    },
+  ]
+}, 1000 * 3)
+const xAxisData = ref([
+  '周一', '周二', '周三', '周四', '周五', '周六', '周日 ',
+])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排汇总</div>
+    <line-chart
+      :data="data"
+      width="400px"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/energyProcessing.vue b/src/views/count/components/energyProcessing.vue
index 5b40342..02b6427 100644
--- a/src/views/count/components/energyProcessing.vue
+++ b/src/views/count/components/energyProcessing.vue
@@ -13,7 +13,6 @@
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -40,6 +39,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '能源加工转换',
+    co: 0,
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('能源加工转换', JSON.stringify(value))
   return sums
 }
 // 排放量变化

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonGather.vue b/src/views/count/components/carbonGather.vue
new file mode 100644
index 0000000..5f3ff37
--- /dev/null
+++ b/src/views/count/components/carbonGather.vue
@@ -0,0 +1,31 @@
+<!-- 碳排汇总柱状图 -->
+<script lang="ts" setup>
+import lineChart from './BarChart.vue'
+const data = ref<any[]>([])
+setTimeout(() => {
+  data.value = [
+    {
+      name: 'test1',
+      data: [320, 302, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'test2',
+      data: [32, 307, 30, 34, 30, 300, 37],
+    },
+  ]
+}, 1000 * 3)
+const xAxisData = ref([
+  '周一', '周二', '周三', '周四', '周五', '周六', '周日 ',
+])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排汇总</div>
+    <line-chart
+      :data="data"
+      width="400px"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/energyProcessing.vue b/src/views/count/components/energyProcessing.vue
index 5b40342..02b6427 100644
--- a/src/views/count/components/energyProcessing.vue
+++ b/src/views/count/components/energyProcessing.vue
@@ -13,7 +13,6 @@
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -40,6 +39,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '能源加工转换',
+    co: 0,
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('能源加工转换', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/fixedCombustion.vue b/src/views/count/components/fixedCombustion.vue
index de2412f..0e9b833 100644
--- a/src/views/count/components/fixedCombustion.vue
+++ b/src/views/count/components/fixedCombustion.vue
@@ -194,11 +194,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -225,6 +227,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '固定燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('固定燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonGather.vue b/src/views/count/components/carbonGather.vue
new file mode 100644
index 0000000..5f3ff37
--- /dev/null
+++ b/src/views/count/components/carbonGather.vue
@@ -0,0 +1,31 @@
+<!-- 碳排汇总柱状图 -->
+<script lang="ts" setup>
+import lineChart from './BarChart.vue'
+const data = ref<any[]>([])
+setTimeout(() => {
+  data.value = [
+    {
+      name: 'test1',
+      data: [320, 302, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'test2',
+      data: [32, 307, 30, 34, 30, 300, 37],
+    },
+  ]
+}, 1000 * 3)
+const xAxisData = ref([
+  '周一', '周二', '周三', '周四', '周五', '周六', '周日 ',
+])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排汇总</div>
+    <line-chart
+      :data="data"
+      width="400px"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/energyProcessing.vue b/src/views/count/components/energyProcessing.vue
index 5b40342..02b6427 100644
--- a/src/views/count/components/energyProcessing.vue
+++ b/src/views/count/components/energyProcessing.vue
@@ -13,7 +13,6 @@
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -40,6 +39,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '能源加工转换',
+    co: 0,
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('能源加工转换', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/fixedCombustion.vue b/src/views/count/components/fixedCombustion.vue
index de2412f..0e9b833 100644
--- a/src/views/count/components/fixedCombustion.vue
+++ b/src/views/count/components/fixedCombustion.vue
@@ -194,11 +194,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -225,6 +227,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '固定燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('固定燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/mobileCombustion.vue b/src/views/count/components/mobileCombustion.vue
index b745bef..97e361f 100644
--- a/src/views/count/components/mobileCombustion.vue
+++ b/src/views/count/components/mobileCombustion.vue
@@ -168,11 +168,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -199,6 +201,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '移动燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('移动燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonGather.vue b/src/views/count/components/carbonGather.vue
new file mode 100644
index 0000000..5f3ff37
--- /dev/null
+++ b/src/views/count/components/carbonGather.vue
@@ -0,0 +1,31 @@
+<!-- 碳排汇总柱状图 -->
+<script lang="ts" setup>
+import lineChart from './BarChart.vue'
+const data = ref<any[]>([])
+setTimeout(() => {
+  data.value = [
+    {
+      name: 'test1',
+      data: [320, 302, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'test2',
+      data: [32, 307, 30, 34, 30, 300, 37],
+    },
+  ]
+}, 1000 * 3)
+const xAxisData = ref([
+  '周一', '周二', '周三', '周四', '周五', '周六', '周日 ',
+])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排汇总</div>
+    <line-chart
+      :data="data"
+      width="400px"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/energyProcessing.vue b/src/views/count/components/energyProcessing.vue
index 5b40342..02b6427 100644
--- a/src/views/count/components/energyProcessing.vue
+++ b/src/views/count/components/energyProcessing.vue
@@ -13,7 +13,6 @@
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -40,6 +39,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '能源加工转换',
+    co: 0,
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('能源加工转换', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/fixedCombustion.vue b/src/views/count/components/fixedCombustion.vue
index de2412f..0e9b833 100644
--- a/src/views/count/components/fixedCombustion.vue
+++ b/src/views/count/components/fixedCombustion.vue
@@ -194,11 +194,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -225,6 +227,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '固定燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('固定燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/mobileCombustion.vue b/src/views/count/components/mobileCombustion.vue
index b745bef..97e361f 100644
--- a/src/views/count/components/mobileCombustion.vue
+++ b/src/views/count/components/mobileCombustion.vue
@@ -168,11 +168,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -199,6 +201,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '移动燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('移动燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/photovoltaic.vue b/src/views/count/components/photovoltaic.vue
index 144101c..2229a5c 100644
--- a/src/views/count/components/photovoltaic.vue
+++ b/src/views/count/components/photovoltaic.vue
@@ -34,12 +34,14 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
   columns.forEach((column: any, index: number) => {
-    console.log(column, 'column')
     if (index === 0) {
       sums[index] = '总计'
     }
@@ -65,6 +67,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '光伏',
+    co: sumArr.value[4],
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('光伏', JSON.stringify(value))
   return sums
 }
 const watchCapacity = (event: any, index: number) => {

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonGather.vue b/src/views/count/components/carbonGather.vue
new file mode 100644
index 0000000..5f3ff37
--- /dev/null
+++ b/src/views/count/components/carbonGather.vue
@@ -0,0 +1,31 @@
+<!-- 碳排汇总柱状图 -->
+<script lang="ts" setup>
+import lineChart from './BarChart.vue'
+const data = ref<any[]>([])
+setTimeout(() => {
+  data.value = [
+    {
+      name: 'test1',
+      data: [320, 302, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'test2',
+      data: [32, 307, 30, 34, 30, 300, 37],
+    },
+  ]
+}, 1000 * 3)
+const xAxisData = ref([
+  '周一', '周二', '周三', '周四', '周五', '周六', '周日 ',
+])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排汇总</div>
+    <line-chart
+      :data="data"
+      width="400px"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/energyProcessing.vue b/src/views/count/components/energyProcessing.vue
index 5b40342..02b6427 100644
--- a/src/views/count/components/energyProcessing.vue
+++ b/src/views/count/components/energyProcessing.vue
@@ -13,7 +13,6 @@
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -40,6 +39,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '能源加工转换',
+    co: 0,
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('能源加工转换', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/fixedCombustion.vue b/src/views/count/components/fixedCombustion.vue
index de2412f..0e9b833 100644
--- a/src/views/count/components/fixedCombustion.vue
+++ b/src/views/count/components/fixedCombustion.vue
@@ -194,11 +194,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -225,6 +227,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '固定燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('固定燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/mobileCombustion.vue b/src/views/count/components/mobileCombustion.vue
index b745bef..97e361f 100644
--- a/src/views/count/components/mobileCombustion.vue
+++ b/src/views/count/components/mobileCombustion.vue
@@ -168,11 +168,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -199,6 +201,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '移动燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('移动燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/photovoltaic.vue b/src/views/count/components/photovoltaic.vue
index 144101c..2229a5c 100644
--- a/src/views/count/components/photovoltaic.vue
+++ b/src/views/count/components/photovoltaic.vue
@@ -34,12 +34,14 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
   columns.forEach((column: any, index: number) => {
-    console.log(column, 'column')
     if (index === 0) {
       sums[index] = '总计'
     }
@@ -65,6 +67,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '光伏',
+    co: sumArr.value[4],
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('光伏', JSON.stringify(value))
   return sums
 }
 const watchCapacity = (event: any, index: number) => {
diff --git a/src/views/count/components/result.vue b/src/views/count/components/result.vue
index de4fd7c..14ef5e2 100644
--- a/src/views/count/components/result.vue
+++ b/src/views/count/components/result.vue
@@ -1,23 +1,170 @@
 <script lang="ts" setup>
+import carbonAnalyse from './carbonAnalyse.vue'
+import carbonElement from './carbonElement.vue'
+import carbonGather from './carbonGather.vue'
 const emit = defineEmits(['bak'])
+const carbonData = ref([])
+onMounted(() => {
+  carbonData.value = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+})
+const requestData = (data: any) => {
+  carbonData.value = []
+  // 接收父组件传来的数据
+  // carbonData.value = data
+}
+defineExpose({ requestData })
+// 总排放量
+const totalCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + (Number(target.co) + Number(target.no) + Number(target.ch))
+  }, 0).toFixed(2)
+})
+// co2 排放量
+const coCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+})
+//  ch4排放
+const chCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+})
+//  n2o排放
+const noCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+})
+// 碳排分析
+const carbonAnalyseData = computed(() => {
+  return carbonData.value.map((item: any) => {
+    return {
+      name: item.name,
+      value: Number(item.co) + Number(item.no) + Number(item.ch),
+    }
+  })
+})
+// 碳排元素分析
+const carbonElementData = computed(() => {
+  const arr = []
+  // co2
+  const co2 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+})
 </script>
 
 <template>
   <div class="container">
-    <div class="bg" />
-    <div>
-      <el-button class="bak" type="primary" @click="emit('bak')">
+    <!-- <div class="bg" /> -->
+    <!-- <div class="bak-btn">
+      <el-button class="bak" @click="emit('bak')">
         返回
       </el-button>
-    </div>
+    </div> -->
     <div class="content">
+      <!-- 碳排量 -->
       <div class="card-box u-f-ajsb">
+        <!-- 总co2排放 -->
         <div class="card backgroundImg">
           <div class="title" style="color: rgb(255 255 255);">
             总CO₂e排放
           </div>
+          <div class="content1" style="color: rgb(255 255 255);">
+            <span class="count">{{ totalCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data" style="color: rgb(255 255 255);">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
           <img src="../../../assets/images/co.png" class="tu-1">
         </div>
+        <!-- 分别排放 -->
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            CO₂排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ coCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" style="background-color: #41a877;" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-co" style="color: rgb(255 255 255);">
+            CO₂
+          </div>
+        </div>
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            CH₄排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ chCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-ch" style="color: rgb(255 255 255);">
+            CH₄
+          </div>
+        </div>
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            N₂O排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ noCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-no" style="color: rgb(255 255 255);">
+            N₂O
+          </div>
+        </div>
+      </div>
+      <!-- 碳排结果分析标题 -->
+      <div class="carbon-title" style="color: #000;">
+        <!-- 碳排放结果分析 -->
+      </div>
+      <!-- echarts -->
+      <div class="echarts">
+        <!-- 碳排分析饼图 -->
+        <carbon-analyse :data="carbonAnalyseData" />
+        <!-- 碳排元素分析 -->
+        <carbon-element :data="carbonElementData" />
+        <!-- 碳排汇总 -->
+        <carbon-gather />
       </div>
     </div>
   </div>
@@ -29,36 +176,91 @@
   background-image: url("../../../assets/images/result-bg.png");
 }
 
-.bak {
+// .bak {
+//   position: absolute;
+//   top: 30px;
+//   left: 10%;
+// }
+.bak-btn {
   position: absolute;
-  top: 30px;
-  left: 10%;
+  left: 0;
+  top: 0;
 }
 
 .content {
-  width: 80%;
+  // width: 80%;
   background: #fff;
   margin: 0 auto;
   min-height: 100vh;
-  margin-top: -85px;
+  // margin-top: -85px;
   border-radius: 8px;
+  // background-image: url("../../../assets/images/result-bg.png") no-repeat;
+  .echarts {
+    display: flex;
+    justify-content: space-around;
+    height: 25rem;
+  }
 
-  .card-box {
-    padding: 46px 35px;
+  .carbon-title {
+    // width: 60%;
+    margin: 0 auto;
+    background: url("../../../assets/images/carbon-result-bg-1.png") no-repeat;
+    height: 115px;
+  }
+
+  .part {
+    border: 2px solid #41a877 !important;
+    width: 24% !important;
+    border-radius: 6px;
+    height: 8rem !important;
+    // background-color: #ccc;
+    padding: 1.5rem 3rem 4rem 2.5rem !important;
+    // padding: 0 !important;
+    .logo {
+      top: 1rem !important;
+      border-radius: 4px;
+    }
+
+    .logo-co {
+      background-color: #41a877;
+    }
+
+    .logo-ch {
+      background-color: #6686f3;
+    }
+
+    .logo-no {
+      background-color: #bc86ff;
+    }
+  }
+
+  .card-part {
+    width: 70%;
+
+    .item {
+      border: 3px solid #41a877;
+      border-radius: 6px;
+    }
+  }
+
+  .data {
+    padding: 0 15px;
+    display: flex;
+    justify-content: space-between;
   }
 
   .u-f-ajsb {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-around;
   }
 
   .card {
     overflow: hidden;
     position: relative;
     padding: 4rem 3rem 4rem 2.5rem;
-    width: 28%;
-    height: 14rem;
+    width: 25%;
+    height: 12rem;
     border: 1px solid #fff;
     border-radius: 6px;
 
@@ -75,6 +277,26 @@
       top: 2.5rem;
       width: 45px;
       height: 45px;
+      text-align: center;
+      line-height: 45px;
+    }
+
+    .line {
+      width: 96%;
+      height: 3px;
+      background-color: #fff;
+      margin: 0 auto;
+      margin-top: 10px;
+      border-radius: 4px;
+    }
+
+    .content1 {
+      margin-top: 10px;
+
+      .count {
+        font-size: 20px;
+        font-weight: 700;
+      }
     }
   }
 

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonGather.vue b/src/views/count/components/carbonGather.vue
new file mode 100644
index 0000000..5f3ff37
--- /dev/null
+++ b/src/views/count/components/carbonGather.vue
@@ -0,0 +1,31 @@
+<!-- 碳排汇总柱状图 -->
+<script lang="ts" setup>
+import lineChart from './BarChart.vue'
+const data = ref<any[]>([])
+setTimeout(() => {
+  data.value = [
+    {
+      name: 'test1',
+      data: [320, 302, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'test2',
+      data: [32, 307, 30, 34, 30, 300, 37],
+    },
+  ]
+}, 1000 * 3)
+const xAxisData = ref([
+  '周一', '周二', '周三', '周四', '周五', '周六', '周日 ',
+])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排汇总</div>
+    <line-chart
+      :data="data"
+      width="400px"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/energyProcessing.vue b/src/views/count/components/energyProcessing.vue
index 5b40342..02b6427 100644
--- a/src/views/count/components/energyProcessing.vue
+++ b/src/views/count/components/energyProcessing.vue
@@ -13,7 +13,6 @@
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -40,6 +39,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '能源加工转换',
+    co: 0,
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('能源加工转换', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/fixedCombustion.vue b/src/views/count/components/fixedCombustion.vue
index de2412f..0e9b833 100644
--- a/src/views/count/components/fixedCombustion.vue
+++ b/src/views/count/components/fixedCombustion.vue
@@ -194,11 +194,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -225,6 +227,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '固定燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('固定燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/mobileCombustion.vue b/src/views/count/components/mobileCombustion.vue
index b745bef..97e361f 100644
--- a/src/views/count/components/mobileCombustion.vue
+++ b/src/views/count/components/mobileCombustion.vue
@@ -168,11 +168,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -199,6 +201,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '移动燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('移动燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/photovoltaic.vue b/src/views/count/components/photovoltaic.vue
index 144101c..2229a5c 100644
--- a/src/views/count/components/photovoltaic.vue
+++ b/src/views/count/components/photovoltaic.vue
@@ -34,12 +34,14 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
   columns.forEach((column: any, index: number) => {
-    console.log(column, 'column')
     if (index === 0) {
       sums[index] = '总计'
     }
@@ -65,6 +67,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '光伏',
+    co: sumArr.value[4],
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('光伏', JSON.stringify(value))
   return sums
 }
 const watchCapacity = (event: any, index: number) => {
diff --git a/src/views/count/components/result.vue b/src/views/count/components/result.vue
index de4fd7c..14ef5e2 100644
--- a/src/views/count/components/result.vue
+++ b/src/views/count/components/result.vue
@@ -1,23 +1,170 @@
 <script lang="ts" setup>
+import carbonAnalyse from './carbonAnalyse.vue'
+import carbonElement from './carbonElement.vue'
+import carbonGather from './carbonGather.vue'
 const emit = defineEmits(['bak'])
+const carbonData = ref([])
+onMounted(() => {
+  carbonData.value = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+})
+const requestData = (data: any) => {
+  carbonData.value = []
+  // 接收父组件传来的数据
+  // carbonData.value = data
+}
+defineExpose({ requestData })
+// 总排放量
+const totalCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + (Number(target.co) + Number(target.no) + Number(target.ch))
+  }, 0).toFixed(2)
+})
+// co2 排放量
+const coCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+})
+//  ch4排放
+const chCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+})
+//  n2o排放
+const noCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+})
+// 碳排分析
+const carbonAnalyseData = computed(() => {
+  return carbonData.value.map((item: any) => {
+    return {
+      name: item.name,
+      value: Number(item.co) + Number(item.no) + Number(item.ch),
+    }
+  })
+})
+// 碳排元素分析
+const carbonElementData = computed(() => {
+  const arr = []
+  // co2
+  const co2 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+})
 </script>
 
 <template>
   <div class="container">
-    <div class="bg" />
-    <div>
-      <el-button class="bak" type="primary" @click="emit('bak')">
+    <!-- <div class="bg" /> -->
+    <!-- <div class="bak-btn">
+      <el-button class="bak" @click="emit('bak')">
         返回
       </el-button>
-    </div>
+    </div> -->
     <div class="content">
+      <!-- 碳排量 -->
       <div class="card-box u-f-ajsb">
+        <!-- 总co2排放 -->
         <div class="card backgroundImg">
           <div class="title" style="color: rgb(255 255 255);">
             总CO₂e排放
           </div>
+          <div class="content1" style="color: rgb(255 255 255);">
+            <span class="count">{{ totalCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data" style="color: rgb(255 255 255);">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
           <img src="../../../assets/images/co.png" class="tu-1">
         </div>
+        <!-- 分别排放 -->
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            CO₂排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ coCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" style="background-color: #41a877;" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-co" style="color: rgb(255 255 255);">
+            CO₂
+          </div>
+        </div>
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            CH₄排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ chCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-ch" style="color: rgb(255 255 255);">
+            CH₄
+          </div>
+        </div>
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            N₂O排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ noCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-no" style="color: rgb(255 255 255);">
+            N₂O
+          </div>
+        </div>
+      </div>
+      <!-- 碳排结果分析标题 -->
+      <div class="carbon-title" style="color: #000;">
+        <!-- 碳排放结果分析 -->
+      </div>
+      <!-- echarts -->
+      <div class="echarts">
+        <!-- 碳排分析饼图 -->
+        <carbon-analyse :data="carbonAnalyseData" />
+        <!-- 碳排元素分析 -->
+        <carbon-element :data="carbonElementData" />
+        <!-- 碳排汇总 -->
+        <carbon-gather />
       </div>
     </div>
   </div>
@@ -29,36 +176,91 @@
   background-image: url("../../../assets/images/result-bg.png");
 }
 
-.bak {
+// .bak {
+//   position: absolute;
+//   top: 30px;
+//   left: 10%;
+// }
+.bak-btn {
   position: absolute;
-  top: 30px;
-  left: 10%;
+  left: 0;
+  top: 0;
 }
 
 .content {
-  width: 80%;
+  // width: 80%;
   background: #fff;
   margin: 0 auto;
   min-height: 100vh;
-  margin-top: -85px;
+  // margin-top: -85px;
   border-radius: 8px;
+  // background-image: url("../../../assets/images/result-bg.png") no-repeat;
+  .echarts {
+    display: flex;
+    justify-content: space-around;
+    height: 25rem;
+  }
 
-  .card-box {
-    padding: 46px 35px;
+  .carbon-title {
+    // width: 60%;
+    margin: 0 auto;
+    background: url("../../../assets/images/carbon-result-bg-1.png") no-repeat;
+    height: 115px;
+  }
+
+  .part {
+    border: 2px solid #41a877 !important;
+    width: 24% !important;
+    border-radius: 6px;
+    height: 8rem !important;
+    // background-color: #ccc;
+    padding: 1.5rem 3rem 4rem 2.5rem !important;
+    // padding: 0 !important;
+    .logo {
+      top: 1rem !important;
+      border-radius: 4px;
+    }
+
+    .logo-co {
+      background-color: #41a877;
+    }
+
+    .logo-ch {
+      background-color: #6686f3;
+    }
+
+    .logo-no {
+      background-color: #bc86ff;
+    }
+  }
+
+  .card-part {
+    width: 70%;
+
+    .item {
+      border: 3px solid #41a877;
+      border-radius: 6px;
+    }
+  }
+
+  .data {
+    padding: 0 15px;
+    display: flex;
+    justify-content: space-between;
   }
 
   .u-f-ajsb {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-around;
   }
 
   .card {
     overflow: hidden;
     position: relative;
     padding: 4rem 3rem 4rem 2.5rem;
-    width: 28%;
-    height: 14rem;
+    width: 25%;
+    height: 12rem;
     border: 1px solid #fff;
     border-radius: 6px;
 
@@ -75,6 +277,26 @@
       top: 2.5rem;
       width: 45px;
       height: 45px;
+      text-align: center;
+      line-height: 45px;
+    }
+
+    .line {
+      width: 96%;
+      height: 3px;
+      background-color: #fff;
+      margin: 0 auto;
+      margin-top: 10px;
+      border-radius: 4px;
+    }
+
+    .content1 {
+      margin-top: 10px;
+
+      .count {
+        font-size: 20px;
+        font-weight: 700;
+      }
     }
   }
 
diff --git a/src/views/count/electric.vue b/src/views/count/electric.vue
index a301c75..ec4f110 100644
--- a/src/views/count/electric.vue
+++ b/src/views/count/electric.vue
@@ -3,17 +3,42 @@
 import page from './page.vue'
 import tableList from './table.vue'
 import result from './components/result.vue'
+const $router = useRouter()
 const isShowTable = ref(true)
+const resultRef = ref()
+const carbonData = ref<any>([])
 const resultFun = () => {
-  isShowTable.value = !isShowTable.value
+  // 固定燃烧
+  const fixed = JSON.parse(sessionStorage.getItem('固定燃烧') as string)
+  carbonData.value.push(fixed)
+  // 移动燃烧
+  const mobile = JSON.parse(sessionStorage.getItem('移动燃烧') as string)
+  carbonData.value.push(mobile)
+  // 能源加工转换
+  const energy = JSON.parse(sessionStorage.getItem('能源加工转换') as string)
+  carbonData.value.push(energy)
+  // 购入电力
+  const electricity = JSON.parse(sessionStorage.getItem('购入电力') as string)
+  carbonData.value.push(electricity)
+  // 购入电力
+  const heat = JSON.parse(sessionStorage.getItem('购入热力') as string)
+  carbonData.value.push(heat)
+  // 光伏
+  const guang = JSON.parse(sessionStorage.getItem('光伏') as string)
+  carbonData.value.push(guang)
+  // isShowTable.value = !isShowTable.value
+  // 给子组件发送数据
+  resultRef.value.requestData(carbonData.value)
+  sessionStorage.setItem('计算结果', JSON.stringify(carbonData.value))
+  $router.push({ path: '/carbonCount/electricresult' })
 }
 </script>
 
 <template>
   <div v-show="isShowTable">
     <page />
-    <table-list />
-    <div style="position: fixed; right: 100px; bottom: 22px;z-index: 99;">
+    <table-list ref="countRef" />
+    <div style="position: fixed; right: 100px; bottom: 10px;z-index: 99;">
       <el-button size="large">
         保存
       </el-button>
@@ -22,6 +47,6 @@
       </el-button>
     </div>
   </div>
-  <result v-show="!isShowTable" @bak="resultFun" />
+  <result v-show="!isShowTable" ref="resultRef" :data="carbonData" @bak="resultFun" />
 </template>
 

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonGather.vue b/src/views/count/components/carbonGather.vue
new file mode 100644
index 0000000..5f3ff37
--- /dev/null
+++ b/src/views/count/components/carbonGather.vue
@@ -0,0 +1,31 @@
+<!-- 碳排汇总柱状图 -->
+<script lang="ts" setup>
+import lineChart from './BarChart.vue'
+const data = ref<any[]>([])
+setTimeout(() => {
+  data.value = [
+    {
+      name: 'test1',
+      data: [320, 302, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'test2',
+      data: [32, 307, 30, 34, 30, 300, 37],
+    },
+  ]
+}, 1000 * 3)
+const xAxisData = ref([
+  '周一', '周二', '周三', '周四', '周五', '周六', '周日 ',
+])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排汇总</div>
+    <line-chart
+      :data="data"
+      width="400px"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/energyProcessing.vue b/src/views/count/components/energyProcessing.vue
index 5b40342..02b6427 100644
--- a/src/views/count/components/energyProcessing.vue
+++ b/src/views/count/components/energyProcessing.vue
@@ -13,7 +13,6 @@
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -40,6 +39,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '能源加工转换',
+    co: 0,
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('能源加工转换', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/fixedCombustion.vue b/src/views/count/components/fixedCombustion.vue
index de2412f..0e9b833 100644
--- a/src/views/count/components/fixedCombustion.vue
+++ b/src/views/count/components/fixedCombustion.vue
@@ -194,11 +194,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -225,6 +227,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '固定燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('固定燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/mobileCombustion.vue b/src/views/count/components/mobileCombustion.vue
index b745bef..97e361f 100644
--- a/src/views/count/components/mobileCombustion.vue
+++ b/src/views/count/components/mobileCombustion.vue
@@ -168,11 +168,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -199,6 +201,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '移动燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('移动燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/photovoltaic.vue b/src/views/count/components/photovoltaic.vue
index 144101c..2229a5c 100644
--- a/src/views/count/components/photovoltaic.vue
+++ b/src/views/count/components/photovoltaic.vue
@@ -34,12 +34,14 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
   columns.forEach((column: any, index: number) => {
-    console.log(column, 'column')
     if (index === 0) {
       sums[index] = '总计'
     }
@@ -65,6 +67,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '光伏',
+    co: sumArr.value[4],
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('光伏', JSON.stringify(value))
   return sums
 }
 const watchCapacity = (event: any, index: number) => {
diff --git a/src/views/count/components/result.vue b/src/views/count/components/result.vue
index de4fd7c..14ef5e2 100644
--- a/src/views/count/components/result.vue
+++ b/src/views/count/components/result.vue
@@ -1,23 +1,170 @@
 <script lang="ts" setup>
+import carbonAnalyse from './carbonAnalyse.vue'
+import carbonElement from './carbonElement.vue'
+import carbonGather from './carbonGather.vue'
 const emit = defineEmits(['bak'])
+const carbonData = ref([])
+onMounted(() => {
+  carbonData.value = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+})
+const requestData = (data: any) => {
+  carbonData.value = []
+  // 接收父组件传来的数据
+  // carbonData.value = data
+}
+defineExpose({ requestData })
+// 总排放量
+const totalCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + (Number(target.co) + Number(target.no) + Number(target.ch))
+  }, 0).toFixed(2)
+})
+// co2 排放量
+const coCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+})
+//  ch4排放
+const chCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+})
+//  n2o排放
+const noCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+})
+// 碳排分析
+const carbonAnalyseData = computed(() => {
+  return carbonData.value.map((item: any) => {
+    return {
+      name: item.name,
+      value: Number(item.co) + Number(item.no) + Number(item.ch),
+    }
+  })
+})
+// 碳排元素分析
+const carbonElementData = computed(() => {
+  const arr = []
+  // co2
+  const co2 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+})
 </script>
 
 <template>
   <div class="container">
-    <div class="bg" />
-    <div>
-      <el-button class="bak" type="primary" @click="emit('bak')">
+    <!-- <div class="bg" /> -->
+    <!-- <div class="bak-btn">
+      <el-button class="bak" @click="emit('bak')">
         返回
       </el-button>
-    </div>
+    </div> -->
     <div class="content">
+      <!-- 碳排量 -->
       <div class="card-box u-f-ajsb">
+        <!-- 总co2排放 -->
         <div class="card backgroundImg">
           <div class="title" style="color: rgb(255 255 255);">
             总CO₂e排放
           </div>
+          <div class="content1" style="color: rgb(255 255 255);">
+            <span class="count">{{ totalCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data" style="color: rgb(255 255 255);">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
           <img src="../../../assets/images/co.png" class="tu-1">
         </div>
+        <!-- 分别排放 -->
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            CO₂排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ coCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" style="background-color: #41a877;" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-co" style="color: rgb(255 255 255);">
+            CO₂
+          </div>
+        </div>
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            CH₄排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ chCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-ch" style="color: rgb(255 255 255);">
+            CH₄
+          </div>
+        </div>
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            N₂O排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ noCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-no" style="color: rgb(255 255 255);">
+            N₂O
+          </div>
+        </div>
+      </div>
+      <!-- 碳排结果分析标题 -->
+      <div class="carbon-title" style="color: #000;">
+        <!-- 碳排放结果分析 -->
+      </div>
+      <!-- echarts -->
+      <div class="echarts">
+        <!-- 碳排分析饼图 -->
+        <carbon-analyse :data="carbonAnalyseData" />
+        <!-- 碳排元素分析 -->
+        <carbon-element :data="carbonElementData" />
+        <!-- 碳排汇总 -->
+        <carbon-gather />
       </div>
     </div>
   </div>
@@ -29,36 +176,91 @@
   background-image: url("../../../assets/images/result-bg.png");
 }
 
-.bak {
+// .bak {
+//   position: absolute;
+//   top: 30px;
+//   left: 10%;
+// }
+.bak-btn {
   position: absolute;
-  top: 30px;
-  left: 10%;
+  left: 0;
+  top: 0;
 }
 
 .content {
-  width: 80%;
+  // width: 80%;
   background: #fff;
   margin: 0 auto;
   min-height: 100vh;
-  margin-top: -85px;
+  // margin-top: -85px;
   border-radius: 8px;
+  // background-image: url("../../../assets/images/result-bg.png") no-repeat;
+  .echarts {
+    display: flex;
+    justify-content: space-around;
+    height: 25rem;
+  }
 
-  .card-box {
-    padding: 46px 35px;
+  .carbon-title {
+    // width: 60%;
+    margin: 0 auto;
+    background: url("../../../assets/images/carbon-result-bg-1.png") no-repeat;
+    height: 115px;
+  }
+
+  .part {
+    border: 2px solid #41a877 !important;
+    width: 24% !important;
+    border-radius: 6px;
+    height: 8rem !important;
+    // background-color: #ccc;
+    padding: 1.5rem 3rem 4rem 2.5rem !important;
+    // padding: 0 !important;
+    .logo {
+      top: 1rem !important;
+      border-radius: 4px;
+    }
+
+    .logo-co {
+      background-color: #41a877;
+    }
+
+    .logo-ch {
+      background-color: #6686f3;
+    }
+
+    .logo-no {
+      background-color: #bc86ff;
+    }
+  }
+
+  .card-part {
+    width: 70%;
+
+    .item {
+      border: 3px solid #41a877;
+      border-radius: 6px;
+    }
+  }
+
+  .data {
+    padding: 0 15px;
+    display: flex;
+    justify-content: space-between;
   }
 
   .u-f-ajsb {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-around;
   }
 
   .card {
     overflow: hidden;
     position: relative;
     padding: 4rem 3rem 4rem 2.5rem;
-    width: 28%;
-    height: 14rem;
+    width: 25%;
+    height: 12rem;
     border: 1px solid #fff;
     border-radius: 6px;
 
@@ -75,6 +277,26 @@
       top: 2.5rem;
       width: 45px;
       height: 45px;
+      text-align: center;
+      line-height: 45px;
+    }
+
+    .line {
+      width: 96%;
+      height: 3px;
+      background-color: #fff;
+      margin: 0 auto;
+      margin-top: 10px;
+      border-radius: 4px;
+    }
+
+    .content1 {
+      margin-top: 10px;
+
+      .count {
+        font-size: 20px;
+        font-weight: 700;
+      }
     }
   }
 
diff --git a/src/views/count/electric.vue b/src/views/count/electric.vue
index a301c75..ec4f110 100644
--- a/src/views/count/electric.vue
+++ b/src/views/count/electric.vue
@@ -3,17 +3,42 @@
 import page from './page.vue'
 import tableList from './table.vue'
 import result from './components/result.vue'
+const $router = useRouter()
 const isShowTable = ref(true)
+const resultRef = ref()
+const carbonData = ref<any>([])
 const resultFun = () => {
-  isShowTable.value = !isShowTable.value
+  // 固定燃烧
+  const fixed = JSON.parse(sessionStorage.getItem('固定燃烧') as string)
+  carbonData.value.push(fixed)
+  // 移动燃烧
+  const mobile = JSON.parse(sessionStorage.getItem('移动燃烧') as string)
+  carbonData.value.push(mobile)
+  // 能源加工转换
+  const energy = JSON.parse(sessionStorage.getItem('能源加工转换') as string)
+  carbonData.value.push(energy)
+  // 购入电力
+  const electricity = JSON.parse(sessionStorage.getItem('购入电力') as string)
+  carbonData.value.push(electricity)
+  // 购入电力
+  const heat = JSON.parse(sessionStorage.getItem('购入热力') as string)
+  carbonData.value.push(heat)
+  // 光伏
+  const guang = JSON.parse(sessionStorage.getItem('光伏') as string)
+  carbonData.value.push(guang)
+  // isShowTable.value = !isShowTable.value
+  // 给子组件发送数据
+  resultRef.value.requestData(carbonData.value)
+  sessionStorage.setItem('计算结果', JSON.stringify(carbonData.value))
+  $router.push({ path: '/carbonCount/electricresult' })
 }
 </script>
 
 <template>
   <div v-show="isShowTable">
     <page />
-    <table-list />
-    <div style="position: fixed; right: 100px; bottom: 22px;z-index: 99;">
+    <table-list ref="countRef" />
+    <div style="position: fixed; right: 100px; bottom: 10px;z-index: 99;">
       <el-button size="large">
         保存
       </el-button>
@@ -22,6 +47,6 @@
       </el-button>
     </div>
   </div>
-  <result v-show="!isShowTable" @bak="resultFun" />
+  <result v-show="!isShowTable" ref="resultRef" :data="carbonData" @bak="resultFun" />
 </template>
 
diff --git a/src/views/count/table.vue b/src/views/count/table.vue
index 2654fd1..6399a44 100644
--- a/src/views/count/table.vue
+++ b/src/views/count/table.vue
@@ -10,16 +10,16 @@
 <template>
   <div style="position: relative; left: 12%; width: 85%;">
     <!-- 固定燃烧 -->
-    <fixed-combustion />
+    <fixed-combustion ref="fixRef" />
     <!-- 移动燃烧 -->
-    <mobile-combustion />
+    <mobile-combustion ref="mobileRef" />
     <!-- 能源加工转换 -->
-    <energy-processing />
+    <energy-processing ref="energyRef" />
     <!-- 购入热力 -->
-    <purchaseofheat />
+    <purchaseofheat ref="heatRef" />
     <!-- 购入电力 -->
-    <purchaseofelectricity />
+    <purchaseofelectricity ref="electricityRef" />
     <!-- 光伏 -->
-    <photovoltaic />
+    <photovoltaic ref="photovoltaicRef" />
   </div>
 </template>

diff --git a/src/assets/images/carbon-result-bg-1.png b/src/assets/images/carbon-result-bg-1.png
new file mode 100644
index 0000000..d1f724e
--- /dev/null
+++ b/src/assets/images/carbon-result-bg-1.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index 90f2dde..402fbd5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -17,6 +17,7 @@
     Auth: typeof import('./components/Auth/index.vue')['default']
     AuthAll: typeof import('./components/AuthAll/index.vue')['default']
     BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default']
+    BarChartPile: typeof import('./components/Echart/BarChartPile.vue')['default']
     BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default']
     BarCodeBind: typeof import('./components/BarCodeBind/index.vue')['default']
     BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
@@ -25,6 +26,7 @@
     CertificationMonitor: typeof import('./components/Sample/certificationMonitor.vue')['default']
     CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default']
     ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default']
+    copy: typeof import('./components/Echart/BarChartHorizontal copy.vue')['default']
     CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default']
     Copyright: typeof import('./components/Copyright/index.vue')['default']
     DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue
index 475cdbf..9c0e3b8 100644
--- a/src/components/Echart/BarChartHorizontal.vue
+++ b/src/components/Echart/BarChartHorizontal.vue
@@ -342,6 +342,7 @@
         name: item.name,
         type: 'bar',
         colorBy: props.colorBy,
+        stack: 'total',
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/BarChartPile.vue b/src/components/Echart/BarChartPile.vue
new file mode 100644
index 0000000..04015b0
--- /dev/null
+++ b/src/components/Echart/BarChartPile.vue
@@ -0,0 +1,450 @@
+<script lang="ts" setup name="BarChartHorizontal">
+/**
+ * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
+ */
+import * as echarts from 'echarts/core'
+import type { ECharts } from 'echarts'
+import { init, number } from 'echarts'
+import type { Ref } from 'vue'
+import type { ECBasicOption } from 'echarts/types/dist/shared'
+import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
+import tdTheme from './theme.json' // 引入默认主题
+const props = defineProps({
+  /**
+   * id
+   */
+  id: {
+    type: String,
+    default: 'chart',
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 加载状态
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 网格配置
+   */
+  grid: {
+    type: Object,
+    default: () => {
+      return {
+        top: 10,
+        left: 20,
+        right: 60,
+        bottom: 10,
+        containLabel: true, // 是否包含坐标轴的刻度标签
+      }
+    },
+  },
+  /**
+   * 图例设置对象
+   */
+  legend: {
+    type: Object,
+    default: () => {
+      return {
+        show: true,
+        icon: 'circle',
+        orient: 'vertile', // 图例方向
+        align: 'left', // 图例标记和文本的对齐，默认自动
+        top: 5,
+        right: 20,
+        itemWidth: 12,
+        itemHeight: 12,
+        padding: [0, 0, 0, 120],
+      }
+    },
+  },
+  /**
+   * 图例列表，非必传
+   */
+  legendData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 图表宽
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * 图表高
+   */
+  height: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * X轴刻度数据，格式为['周一','周二'...]
+   */
+  xAxisData: {
+    type: Array<string>,
+    default: () => { return [] },
+  },
+  /**
+   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
+   */
+  data: {
+    type: Array<lineDataI>,
+    default: () => { return [] },
+  },
+  /**
+   * 固定纵轴最大值，非必填
+   */
+  max: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 单位
+   */
+  unit: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 调色盘取色策略： series按照系列，data按照数据项
+   */
+  colorBy: {
+    type: String,
+    default: 'series',
+  },
+  /**
+   * 柱子颜色，渐变，
+   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
+   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
+   */
+  colors: {
+    type: Array,
+    default: () => {
+      return [
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+        ['#2d8cf0', '#2352d6', '#3e29ce'],
+        ['#fed700', '#fdb302', '#fb9600'],
+        ['#68dfe3', '#2fade0', '#0182de'],
+        ['#fd9a19', '#fd6f1b', '#fe421c'],
+        ['#fed700', '#feb501', '#fd9502'],
+      ]
+    },
+  },
+  /**
+   * 柱子背景颜色
+   */
+  backgroundColor: {
+    type: String,
+    default: '#caddff',
+  },
+  /**
+   * 柱子圆角
+   */
+  barConer: {
+    type: [Number, Array],
+    default: 50,
+  },
+  barWidth: {
+    type: [Number, String],
+    default: '15',
+  },
+  // 是否显示轴线
+  showAxis: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 轴线颜色
+   */
+  axisLineColor: {
+    type: String,
+    default: '#96989b',
+  },
+  /**
+   * 轴线上文字颜色
+   */
+  fontColor: {
+    type: String,
+    default: '#000000',
+  },
+  // 轴线文本宽度
+  axisLabelWidth: {
+    type: [Number, String],
+    default: '',
+  },
+  /**
+   * 是否显示标签
+   */
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 图形上文本标签颜色
+   */
+  labelColor: {
+    type: String,
+    default: '#3d7eff',
+  },
+  /**
+   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
+   */
+  labelPosition: {
+    type: String,
+    default: 'fixedEnd',
+  },
+  /**
+   * 标签格式化
+   */
+  labelFormatter: {
+    type: String,
+    default: '{c}%',
+  },
+  /**
+   * 是否为渐变柱状图
+   */
+  gradient: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// 图表对象
+let chart: ECharts
+const chartRef: Ref<HTMLElement | null> = ref(null)
+
+// 监听数据变化
+watch(
+  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
+    refreshChart()
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+)
+// 构建option
+function buildOption() {
+  const option: barOption = {
+    grid: props.grid,
+    legend: props.legend, // 图例
+    tooltip: {
+      trigger: 'axis',
+      textStyle: {
+        fontSize: 16,
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          fontSize: 13,
+        },
+      },
+      valueFormatter: (value: string | number) => {
+        return value ? value + props.unit : ''
+      },
+    }, // 提示框
+    xAxis: [
+      {
+        name: props.unit,
+        type: 'value',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        nameTextStyle: { // 坐标轴名称的文字样式
+          color: props.fontColor,
+          fontSize: '60%',
+          verticalAlign: 'middle',
+        },
+        axisLabel: {
+          show: props.showAxis,
+          color: props.fontColor, // X轴名称颜色
+          fontSize: 14,
+        },
+        splitLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: ['#7a6b74'],
+            type: 'dashed',
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        axisLine: {
+          show: props.showAxis,
+          lineStyle: {
+            color: props.axisLineColor, // 轴线的颜色
+          },
+        },
+        axisLabel: {
+          color: props.fontColor,
+          fontSize: 15,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    series: [] as barSeriesOption[],
+  }
+  // 标题
+  if (props.title) {
+    option.title = {
+      show: true,
+      text: props.title,
+    }
+  }
+  // 图例
+  if (props.legend && props.legendData.length > 0) {
+    option.legend!.data = props.legendData
+  }
+  // 横轴数据
+  if (props.xAxisData && props.xAxisData.length > 0) {
+    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
+    }
+  }
+  // 轴线文本宽度
+  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
+    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
+  }
+  // 如果有最大值规定，固定最大值
+  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
+    option.xAxis[0].max = props.max
+  }
+  // 数据
+  if (props.data) {
+    const newSeries: barSeriesOption[] = []
+    // 遍历data， 拆分柱状图名称，数据和颜色
+    for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
+      const item = props.data[itemIndex]
+      const series: barSeriesOption = {
+        name: item.name,
+        type: 'bar',
+        // colorBy: props.colorBy,
+        stack: 'total',
+        label: {
+          normal: {
+            show: props.showLabel,
+            color: props.labelColor,
+            position: 'right',
+            fontSize: 15,
+            formatter: props.labelFormatter,
+            align: 'center',
+            verticalAlign: 'middle',
+          },
+        },
+        showBackground: true,
+        backgroundStyle: {
+          color: props.backgroundColor,
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        itemStyle: {
+          borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
+        },
+        data: item.data,
+      }
+      // 如果规定了柱宽度
+      if (props.barWidth) {
+        series.barWidth = props.barWidth
+      }
+      // 如果要固定显示在图标右边
+      if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
+        let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
+        if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
+          chartWidth = chartWidth - props.axisLabelWidth
+        }
+        else {
+          chartWidth = chartWidth - 80
+        }
+        series.label.normal!.position = [chartWidth, '50%']
+      }
+      // 如果开启渐变
+      if (props.gradient && props.colors.length > 0) {
+        if (props.colorBy == 'series') { // 如果一系列是一个颜色
+          if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
+            const colorCount = props.colors[0].length
+            const colorList = []
+            for (let i = 0; i < colorCount; i++) {
+              colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
+            }
+            series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+          }
+        }
+        else if (props.colorBy === 'data') { // 每个数据是一个颜色
+          series.itemStyle!.color = (params: { dataIndex: number }) => {
+            if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
+              var index = params.dataIndex
+              const colorIndex = index % props.colors.length
+              console.log('colorIndex', colorIndex)
+              const colorCount = props.colors[0].length // 渐变颜色数，最多为3
+              const colorList = []
+              for (let i = 0; i < colorCount; i++) {
+                colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
+              }
+              console.log(colorList)
+              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorList)
+            }
+          }
+        }
+      }
+      newSeries.push(series)
+    }
+    console.log(newSeries)
+    option.series = newSeries
+  }
+  return option
+}
+// 初始化图表
+function initChart() {
+  chart = init(chartRef.value as HTMLElement, tdTheme)
+  chart.setOption({})
+}
+
+// 刷新图表
+function refreshChart() {
+  if (chart) {
+    const option = buildOption()
+    chart.setOption(option as unknown as ECBasicOption, true)
+  }
+}
+
+window.addEventListener('resize', () => {
+  chart.resize()
+})
+
+onMounted(() => {
+  initChart()
+})
+</script>
+
+<template>
+  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
+</template>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Echart/BarChartVertical.vue b/src/components/Echart/BarChartVertical.vue
index 02f9f14..433bc9a 100644
--- a/src/components/Echart/BarChartVertical.vue
+++ b/src/components/Echart/BarChartVertical.vue
@@ -348,7 +348,8 @@
       const series: barSeriesOption = {
         name: item.name,
         type: 'bar',
-        colorBy: props.colorBy,
+        // stack: 'total',
+        // colorBy: props.colorBy,
         label: {
           normal: {
             show: props.showLabel,
diff --git a/src/components/Echart/PieChart.vue b/src/components/Echart/PieChart.vue
index 74d506a..18caf45 100644
--- a/src/components/Echart/PieChart.vue
+++ b/src/components/Echart/PieChart.vue
@@ -35,12 +35,12 @@
     default: () => {
       return {
         show: true,
-        orient: 'vertical',
-        right: '20%',
-        top: 'center',
+        orient: 'horizontal',
+        left: 'center',
+        bottom: '0',
         icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // itemWidth: 12,
+        // itemHeight: 12,
         itemStyle: {
           fontSize: 18,
         },
@@ -72,10 +72,12 @@
    * 饼图的半径[内半径，外半径]
    */
   radius: {
-    type: Array,
-    default: () => {
-      return ['30%', '45%']
-    },
+    // type: Array,
+    // default: () => {
+    //   return ['30%', '45%']
+    // },
+    type: String,
+    default: '55%',
   },
   /**
    * 距离容器右侧距离，默认0，为legend在右侧时做准备
@@ -120,7 +122,7 @@
     default: () => {
       return {
         top: '10%',
-        left: '5%',
+        left: '15%',
         right: '50%',
         bottom: 20,
         containLabel: true, // 是否包含坐标轴的刻度标签
@@ -146,7 +148,7 @@
    */
   labelPosition: {
     type: String,
-    default: 'center',
+    default: 'outside',
   },
   /**
    * 悬停格式化
@@ -205,25 +207,25 @@
       type: 'pie',
       avoidLabelOverlap: true, // 是否启用防止标签重叠策略
       roseType: props.roseType, // 玫瑰图类型
-      radius: props.radius as string[], // 饼图的半径[内半径，外半径]
+      radius: props.radius as string, // 饼图的半径[内半径，外半径]
       center: ['50%', '50%'], // 圆心坐标[横坐标，纵坐标]
       startAngle: 140,
       right: props.right,
       label: {
         show: props.labelShow,
-        position: 'center',
+        position: 'outside',
         formatter: props.labelFormatter ? props.labelFormatter : (props.valueType == 'percentage' ? '{style1|{b}}\n{style2|{d}%}' : '{style1|{b}}\n{style2|{c}}'),
-        fontSize: 20,
+        // fontSize: 20,
         fontWeight: 'bold',
         rich: {
           style1: {
             color: props.fontColor,
-            fontSize: 16,
+            // fontSize: 16,
           },
           style2: {
             color: props.fontColor,
             fontWeight: 'bolder',
-            fontSize: 19,
+            // fontSize: 19,
           },
         },
         emphasis: {
diff --git a/src/router/modules/carbonCount.ts b/src/router/modules/carbonCount.ts
index 53685f7..8b64153 100644
--- a/src/router/modules/carbonCount.ts
+++ b/src/router/modules/carbonCount.ts
@@ -38,6 +38,18 @@
           activeMenu: '/carbonCount',
         },
       },
+      {
+        path: 'electricresult',
+        name: 'electricresult',
+        component: () => import('@/views/count/components/result.vue'),
+        meta: {
+          title: '电力碳核算',
+          auth: '/count/electric',
+          sidebar: false,
+          breadcrumb: true,
+          activeMenu: '/carbonCount',
+        },
+      },
       // {
       //   path: 'heatingcount',
       //   name: 'Heatingcount',
diff --git a/src/views/count/components/BarChart.vue b/src/views/count/components/BarChart.vue
new file mode 100644
index 0000000..c9b56ba
--- /dev/null
+++ b/src/views/count/components/BarChart.vue
@@ -0,0 +1,95 @@
+<script>
+import * as echarts from 'echarts'
+import { onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup() {
+    const myEcharts = echarts
+
+    onMounted(() => {
+      initChart()
+    })
+
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      // 获取数据
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', data: arr1, type: 'bar' })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', data: arr2, type: 'bar' })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', data: arr3, type: 'bar' })
+      console.log(arr, '碳排汇总拍那个')
+      const chart = myEcharts.init(document.getElementById('Echarts'), 'purple-passion')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+        },
+        series: arr,
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="Echarts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/BarChartPile.vue b/src/views/count/components/BarChartPile.vue
new file mode 100644
index 0000000..617ff61
--- /dev/null
+++ b/src/views/count/components/BarChartPile.vue
@@ -0,0 +1,112 @@
+<script>
+import * as echarts from 'echarts'
+import { defineExpose, onMounted, onUnmounted } from 'vue'
+
+export default {
+  name: 'App',
+  props: ['width', 'height'],
+  setup(props) {
+    const myEcharts = echarts
+    const carbonData = ref([])
+    onMounted(() => {
+      initChart()
+    })
+    // 碳排元素分析
+    onUnmounted(() => {
+      myEcharts.dispose
+    })
+
+    function initChart() {
+      const chart = myEcharts.init(document.getElementById('myEcharts'), 'purple-passion')
+      const data = JSON.parse(sessionStorage.getItem('计算结果')) || []
+      const arr = []
+      // co2
+      const arr1 = []
+      const arr2 = []
+      const arr3 = []
+      data.forEach((element) => {
+        arr1.push(Number(element.co))
+      })
+      arr.push({ name: 'CO₂', value: arr1 })
+      // CH₄
+      data.forEach((element) => {
+        arr2.push(Number(element.ch))
+      })
+      arr.push({ name: 'CH₄', value: arr2 })
+      // N₂O
+      data.forEach((element) => {
+        arr3.push(Number(element.no))
+      })
+      arr.push({ name: 'N₂O', value: arr3 })
+      console.log(arr, 'aarrrr')
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          show: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '0',
+          icon: 'circle',
+          // itemWidth: 12,
+          // itemHeight: 12,
+          itemStyle: {
+            fontSize: 18,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['固定燃烧', '移动燃烧', '能源加工转换', '购入电力', '购入热力', '光伏'],
+          axisLabel: {
+            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
+            rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
+          },
+        },
+        yAxis: {
+          type: 'value',
+
+        },
+        series: arr.map((item) => {
+          return {
+            name: item.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            data: item.value,
+          }
+        }),
+      })
+      window.onresize = function () {
+        chart.resize()
+      }
+    }
+
+    return {
+      initChart,
+    }
+  },
+}
+</script>
+
+<template>
+  <div class="echarts-box">
+    <div id="myEcharts" :style="{ width, height }" />
+  </div>
+</template>
+
diff --git a/src/views/count/components/Purchaseofelectricity.vue b/src/views/count/components/Purchaseofelectricity.vue
index f2eafd6..44e8fd5 100644
--- a/src/views/count/components/Purchaseofelectricity.vue
+++ b/src/views/count/components/Purchaseofelectricity.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入电力',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('购入电力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/Purchaseofheat.vue b/src/views/count/components/Purchaseofheat.vue
index 99a7d69..f26a2c1 100644
--- a/src/views/count/components/Purchaseofheat.vue
+++ b/src/views/count/components/Purchaseofheat.vue
@@ -29,11 +29,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -60,6 +62,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '购入热力',
+    co: sumArr.value[2] ? sumArr.value[2] : 0,
+    ch: sumArr.value[4] ? sumArr.value[4] : 0,
+    no: sumArr.value[6] ? sumArr.value[6] : 0,
+  }
+  sessionStorage.setItem('购入热力', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/carbonAnalyse.vue b/src/views/count/components/carbonAnalyse.vue
new file mode 100644
index 0000000..33a4cfd
--- /dev/null
+++ b/src/views/count/components/carbonAnalyse.vue
@@ -0,0 +1,42 @@
+<!-- 碳排放分析饼图 -->
+<script lang="ts" setup>
+import PieChart from '@/components/Echart/PieChart.vue'
+const props = defineProps({
+  data: {
+    type: Array as any,
+    defaule: () => { return [] },
+  },
+})
+// 饼图数据
+const data = ref([])
+setTimeout(() => {
+  console.log(props.data, '碳排数据')
+  data.value = props.data
+}, 1000 * 3)
+const picLegend = ref({
+  show: false,
+  orient: 'horizontal',
+  // bottom: '5%',
+  // left: 'center',
+  icon: 'circle',
+  itemWidth: 12,
+  itemHeight: 12,
+  itemStyle: {
+    fontSize: 18,
+  },
+})
+const bodyWidth = document.body.clientWidth
+console.log(bodyWidth, 'bodyHeightbodyHeightbodyHeight')
+// :width="`${blockWidth - 225}px`"
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排分析</div>
+    <pie-chart
+      :data="data"
+      :width="`${400}px`"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonElement.vue b/src/views/count/components/carbonElement.vue
new file mode 100644
index 0000000..71fb2cb
--- /dev/null
+++ b/src/views/count/components/carbonElement.vue
@@ -0,0 +1,42 @@
+<!-- 碳排元素分析 柱状图 -->
+<script lang="ts" setup>
+import barChart from './BarChartPile.vue'
+const data = ref<any>([])
+onMounted(() => {
+  // 获取数据
+  const data = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+  const arr: any = []
+  // co2
+  const co2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = data.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = data.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+  setTimeout(() => {
+    data.value = arr
+    console.log(data.value, '碳元素分析')
+  }, 1000 * 2)
+})
+const xAxisData = ref(['CO₂', 'CH₄', 'N₂O'])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排元素分析</div>
+    <bar-chart
+      width="400px"
+      height="400px"
+      :data="data"
+      :x-axis-data="xAxisData"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/carbonGather.vue b/src/views/count/components/carbonGather.vue
new file mode 100644
index 0000000..5f3ff37
--- /dev/null
+++ b/src/views/count/components/carbonGather.vue
@@ -0,0 +1,31 @@
+<!-- 碳排汇总柱状图 -->
+<script lang="ts" setup>
+import lineChart from './BarChart.vue'
+const data = ref<any[]>([])
+setTimeout(() => {
+  data.value = [
+    {
+      name: 'test1',
+      data: [320, 302, 301, 334, 390, 330, 320],
+    },
+    {
+      name: 'test2',
+      data: [32, 307, 30, 34, 30, 300, 37],
+    },
+  ]
+}, 1000 * 3)
+const xAxisData = ref([
+  '周一', '周二', '周三', '周四', '周五', '周六', '周日 ',
+])
+</script>
+
+<template>
+  <div style="width: 30%;">
+    <div>碳排汇总</div>
+    <line-chart
+      :data="data"
+      width="400px"
+      height="400px"
+    />
+  </div>
+</template>
diff --git a/src/views/count/components/energyProcessing.vue b/src/views/count/components/energyProcessing.vue
index 5b40342..02b6427 100644
--- a/src/views/count/components/energyProcessing.vue
+++ b/src/views/count/components/energyProcessing.vue
@@ -13,7 +13,6 @@
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -40,6 +39,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '能源加工转换',
+    co: 0,
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('能源加工转换', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/fixedCombustion.vue b/src/views/count/components/fixedCombustion.vue
index de2412f..0e9b833 100644
--- a/src/views/count/components/fixedCombustion.vue
+++ b/src/views/count/components/fixedCombustion.vue
@@ -194,11 +194,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -225,6 +227,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '固定燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('固定燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/mobileCombustion.vue b/src/views/count/components/mobileCombustion.vue
index b745bef..97e361f 100644
--- a/src/views/count/components/mobileCombustion.vue
+++ b/src/views/count/components/mobileCombustion.vue
@@ -168,11 +168,13 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
-  console.log(columns, 'columns')
   columns.forEach((column: any, index: number) => {
     if (index === 0) {
       sums[index] = '总计'
@@ -199,6 +201,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '移动燃烧',
+    co: sumArr.value[2],
+    ch: sumArr.value[4],
+    no: sumArr.value[6],
+  }
+  sessionStorage.setItem('移动燃烧', JSON.stringify(value))
   return sums
 }
 // 排放量变化
diff --git a/src/views/count/components/photovoltaic.vue b/src/views/count/components/photovoltaic.vue
index 144101c..2229a5c 100644
--- a/src/views/count/components/photovoltaic.vue
+++ b/src/views/count/components/photovoltaic.vue
@@ -34,12 +34,14 @@
   },
 ]
 const sumArr = ref<string[]>([])
+defineExpose({
+  sumArr,
+})
 // 总计
 const summary = (params: any) => {
   const { columns, data } = params
   const sums: string[] = []
   columns.forEach((column: any, index: number) => {
-    console.log(column, 'column')
     if (index === 0) {
       sums[index] = '总计'
     }
@@ -65,6 +67,13 @@
     }
   })
   sumArr.value = sums
+  const value = {
+    name: '光伏',
+    co: sumArr.value[4],
+    ch: 0,
+    no: 0,
+  }
+  sessionStorage.setItem('光伏', JSON.stringify(value))
   return sums
 }
 const watchCapacity = (event: any, index: number) => {
diff --git a/src/views/count/components/result.vue b/src/views/count/components/result.vue
index de4fd7c..14ef5e2 100644
--- a/src/views/count/components/result.vue
+++ b/src/views/count/components/result.vue
@@ -1,23 +1,170 @@
 <script lang="ts" setup>
+import carbonAnalyse from './carbonAnalyse.vue'
+import carbonElement from './carbonElement.vue'
+import carbonGather from './carbonGather.vue'
 const emit = defineEmits(['bak'])
+const carbonData = ref([])
+onMounted(() => {
+  carbonData.value = JSON.parse(sessionStorage.getItem('计算结果') as string) || []
+})
+const requestData = (data: any) => {
+  carbonData.value = []
+  // 接收父组件传来的数据
+  // carbonData.value = data
+}
+defineExpose({ requestData })
+// 总排放量
+const totalCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + (Number(target.co) + Number(target.no) + Number(target.ch))
+  }, 0).toFixed(2)
+})
+// co2 排放量
+const coCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+})
+//  ch4排放
+const chCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+})
+//  n2o排放
+const noCarbon = computed(() => {
+  return carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+})
+// 碳排分析
+const carbonAnalyseData = computed(() => {
+  return carbonData.value.map((item: any) => {
+    return {
+      name: item.name,
+      value: Number(item.co) + Number(item.no) + Number(item.ch),
+    }
+  })
+})
+// 碳排元素分析
+const carbonElementData = computed(() => {
+  const arr = []
+  // co2
+  const co2 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.co)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CO₂', value: co2 })
+  // CH₄
+  const ch4 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.ch)
+  }, 0).toFixed(2)
+  arr.push({ name: 'CH₄', value: ch4 })
+  // N₂O
+  const no2 = carbonData.value.reduce((pre, target: any) => {
+    return pre + Number(target.no)
+  }, 0).toFixed(2)
+  arr.push({ name: 'N₂O', value: no2 })
+})
 </script>
 
 <template>
   <div class="container">
-    <div class="bg" />
-    <div>
-      <el-button class="bak" type="primary" @click="emit('bak')">
+    <!-- <div class="bg" /> -->
+    <!-- <div class="bak-btn">
+      <el-button class="bak" @click="emit('bak')">
         返回
       </el-button>
-    </div>
+    </div> -->
     <div class="content">
+      <!-- 碳排量 -->
       <div class="card-box u-f-ajsb">
+        <!-- 总co2排放 -->
         <div class="card backgroundImg">
           <div class="title" style="color: rgb(255 255 255);">
             总CO₂e排放
           </div>
+          <div class="content1" style="color: rgb(255 255 255);">
+            <span class="count">{{ totalCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data" style="color: rgb(255 255 255);">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
           <img src="../../../assets/images/co.png" class="tu-1">
         </div>
+        <!-- 分别排放 -->
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            CO₂排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ coCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" style="background-color: #41a877;" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-co" style="color: rgb(255 255 255);">
+            CO₂
+          </div>
+        </div>
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            CH₄排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ chCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-ch" style="color: rgb(255 255 255);">
+            CH₄
+          </div>
+        </div>
+        <div class="card part" style="color: rgb(0 0 0);">
+          <div class="title">
+            N₂O排放
+          </div>
+          <div class="content1">
+            <span class="count">{{ noCarbon }}</span>
+            <span class="unit">万吨</span>
+          </div>
+          <div class="line" />
+          <div class="data">
+            <span>低于同行</span>
+            <span>{{ 0 }}%</span>
+          </div>
+          <div />
+          <!-- <img src="../../../assets/images/co.png" class="tu-1"> -->
+          <div class="tu-1 logo logo-no" style="color: rgb(255 255 255);">
+            N₂O
+          </div>
+        </div>
+      </div>
+      <!-- 碳排结果分析标题 -->
+      <div class="carbon-title" style="color: #000;">
+        <!-- 碳排放结果分析 -->
+      </div>
+      <!-- echarts -->
+      <div class="echarts">
+        <!-- 碳排分析饼图 -->
+        <carbon-analyse :data="carbonAnalyseData" />
+        <!-- 碳排元素分析 -->
+        <carbon-element :data="carbonElementData" />
+        <!-- 碳排汇总 -->
+        <carbon-gather />
       </div>
     </div>
   </div>
@@ -29,36 +176,91 @@
   background-image: url("../../../assets/images/result-bg.png");
 }
 
-.bak {
+// .bak {
+//   position: absolute;
+//   top: 30px;
+//   left: 10%;
+// }
+.bak-btn {
   position: absolute;
-  top: 30px;
-  left: 10%;
+  left: 0;
+  top: 0;
 }
 
 .content {
-  width: 80%;
+  // width: 80%;
   background: #fff;
   margin: 0 auto;
   min-height: 100vh;
-  margin-top: -85px;
+  // margin-top: -85px;
   border-radius: 8px;
+  // background-image: url("../../../assets/images/result-bg.png") no-repeat;
+  .echarts {
+    display: flex;
+    justify-content: space-around;
+    height: 25rem;
+  }
 
-  .card-box {
-    padding: 46px 35px;
+  .carbon-title {
+    // width: 60%;
+    margin: 0 auto;
+    background: url("../../../assets/images/carbon-result-bg-1.png") no-repeat;
+    height: 115px;
+  }
+
+  .part {
+    border: 2px solid #41a877 !important;
+    width: 24% !important;
+    border-radius: 6px;
+    height: 8rem !important;
+    // background-color: #ccc;
+    padding: 1.5rem 3rem 4rem 2.5rem !important;
+    // padding: 0 !important;
+    .logo {
+      top: 1rem !important;
+      border-radius: 4px;
+    }
+
+    .logo-co {
+      background-color: #41a877;
+    }
+
+    .logo-ch {
+      background-color: #6686f3;
+    }
+
+    .logo-no {
+      background-color: #bc86ff;
+    }
+  }
+
+  .card-part {
+    width: 70%;
+
+    .item {
+      border: 3px solid #41a877;
+      border-radius: 6px;
+    }
+  }
+
+  .data {
+    padding: 0 15px;
+    display: flex;
+    justify-content: space-between;
   }
 
   .u-f-ajsb {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-around;
   }
 
   .card {
     overflow: hidden;
     position: relative;
     padding: 4rem 3rem 4rem 2.5rem;
-    width: 28%;
-    height: 14rem;
+    width: 25%;
+    height: 12rem;
     border: 1px solid #fff;
     border-radius: 6px;
 
@@ -75,6 +277,26 @@
       top: 2.5rem;
       width: 45px;
       height: 45px;
+      text-align: center;
+      line-height: 45px;
+    }
+
+    .line {
+      width: 96%;
+      height: 3px;
+      background-color: #fff;
+      margin: 0 auto;
+      margin-top: 10px;
+      border-radius: 4px;
+    }
+
+    .content1 {
+      margin-top: 10px;
+
+      .count {
+        font-size: 20px;
+        font-weight: 700;
+      }
     }
   }
 
diff --git a/src/views/count/electric.vue b/src/views/count/electric.vue
index a301c75..ec4f110 100644
--- a/src/views/count/electric.vue
+++ b/src/views/count/electric.vue
@@ -3,17 +3,42 @@
 import page from './page.vue'
 import tableList from './table.vue'
 import result from './components/result.vue'
+const $router = useRouter()
 const isShowTable = ref(true)
+const resultRef = ref()
+const carbonData = ref<any>([])
 const resultFun = () => {
-  isShowTable.value = !isShowTable.value
+  // 固定燃烧
+  const fixed = JSON.parse(sessionStorage.getItem('固定燃烧') as string)
+  carbonData.value.push(fixed)
+  // 移动燃烧
+  const mobile = JSON.parse(sessionStorage.getItem('移动燃烧') as string)
+  carbonData.value.push(mobile)
+  // 能源加工转换
+  const energy = JSON.parse(sessionStorage.getItem('能源加工转换') as string)
+  carbonData.value.push(energy)
+  // 购入电力
+  const electricity = JSON.parse(sessionStorage.getItem('购入电力') as string)
+  carbonData.value.push(electricity)
+  // 购入电力
+  const heat = JSON.parse(sessionStorage.getItem('购入热力') as string)
+  carbonData.value.push(heat)
+  // 光伏
+  const guang = JSON.parse(sessionStorage.getItem('光伏') as string)
+  carbonData.value.push(guang)
+  // isShowTable.value = !isShowTable.value
+  // 给子组件发送数据
+  resultRef.value.requestData(carbonData.value)
+  sessionStorage.setItem('计算结果', JSON.stringify(carbonData.value))
+  $router.push({ path: '/carbonCount/electricresult' })
 }
 </script>
 
 <template>
   <div v-show="isShowTable">
     <page />
-    <table-list />
-    <div style="position: fixed; right: 100px; bottom: 22px;z-index: 99;">
+    <table-list ref="countRef" />
+    <div style="position: fixed; right: 100px; bottom: 10px;z-index: 99;">
       <el-button size="large">
         保存
       </el-button>
@@ -22,6 +47,6 @@
       </el-button>
     </div>
   </div>
-  <result v-show="!isShowTable" @bak="resultFun" />
+  <result v-show="!isShowTable" ref="resultRef" :data="carbonData" @bak="resultFun" />
 </template>
 
diff --git a/src/views/count/table.vue b/src/views/count/table.vue
index 2654fd1..6399a44 100644
--- a/src/views/count/table.vue
+++ b/src/views/count/table.vue
@@ -10,16 +10,16 @@
 <template>
   <div style="position: relative; left: 12%; width: 85%;">
     <!-- 固定燃烧 -->
-    <fixed-combustion />
+    <fixed-combustion ref="fixRef" />
     <!-- 移动燃烧 -->
-    <mobile-combustion />
+    <mobile-combustion ref="mobileRef" />
     <!-- 能源加工转换 -->
-    <energy-processing />
+    <energy-processing ref="energyRef" />
     <!-- 购入热力 -->
-    <purchaseofheat />
+    <purchaseofheat ref="heatRef" />
     <!-- 购入电力 -->
-    <purchaseofelectricity />
+    <purchaseofelectricity ref="electricityRef" />
     <!-- 光伏 -->
-    <photovoltaic />
+    <photovoltaic ref="photovoltaicRef" />
   </div>
 </template>
diff --git a/src/views/data/electricity/detailDialog.vue b/src/views/data/electricity/detailDialog.vue
index b50d412..5e62fc1 100644
--- a/src/views/data/electricity/detailDialog.vue
+++ b/src/views/data/electricity/detailDialog.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import showPhoto from './showPhoto.vue'
 const centerDialogVisible = ref(false)
 const imgurl = ref('')
 const title = ref('')
 const initDialog = (row: any) => {
   centerDialogVisible.value = true
   imgurl.value = row.electricityDetail
-  title.value = row.electricityName
+  title.value = `${row.electricityName}配电网`
 }
 defineExpose({
   initDialog,
@@ -21,7 +22,7 @@
     align-center
     append-to-body
   >
-    <show-photo :minio-file-name="url" width="100%" height="125px" />
+    <show-photo :minio-file-name="imgurl" width="100%" height="400px" />
     <!-- <template #footer>
       <span class="dialog-footer">
         <el-button @click="centerDialogVisible = false">Cancel</el-button>
@@ -33,8 +34,12 @@
   </el-dialog>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .dialog-footer button:first-child {
   margin-right: 10px;
 }
+
+::v-deep .el-image {
+  margin: 0 auto;
+}
 </style>