<!-- 碳排元素分析 柱状图 -->
<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>