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