<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>